7 ms·

D3 in Depth

493 points by _mhr_ 8y ago

twostoned 8y ago
Nice timing. I just found this website the other day and love it. I've just recently been getting into data visualization and have fallen in love with d3.js. Another good resources is http://alignedleft.com/work/d3-book/ http://alignedleft.com/work/d3-book/. Maybe a bit introductory for some of the smartypants on HN but I've been away from front end dev for a while and so find blasting through the chapters pretty helpful. Hilarious tone, also. Combined with d3indepth.com's examples and the API docs I've been able to get a good grasp of d3.js.
elsherbini 8y ago
I think this hasn't been update since 2017, and most of it is from 2016. I pretty much only use javascript for d3, and I put it down for a while. Recently I decided to do something with d3 v5.0[1], and got confused about the state of ES6 modules. Has anyone gotten rollup to work with d3? Is it possible to just use ES6 modules natively in the browser if you don't care about older browsers? My other issue was with async/await. It seems like when I used async await on a locally hosted csv file, it could take between 1 and 2 seconds to load. For my colleague sometimes minutes. When I switched to d3 v4.0 and the old callback approach, it loaded instantly, even for my colleague. What gives? [1] https://github.com/d3/d3/blob/master/CHANGES.md https://github.com/d3/d3/blob/master/CHANGES.md
- jordan801 8y ago
  Most ES6 features are available in Chrome and Firefox. Not sure what the issue is with async and await, all it is, is syntactic sugar really. It shouldn't have a lag time any differently. Babel (transpiler) is super easy to setup if you have any problems with compatibility.
  - daurnimator 8y ago
    It's not all sugar, there are some actual differences; and especially around async/await there are optimizations that can only be made in the non-transpiled code.
    - joshribakoff 8y ago
      He said async/await is syntactic sugar over promises which it is. And that babel is easy to setup, which it is. Those statements are independently true. No one said the state machine that babel transpiles your async/awaits to is performant, he wasn't making that assertion. The difference between 1s & 1m lag in D3 has got to be a D3 bug.
- codetrotter 8y ago
  > Is it possible to just use ES6 modules natively in the browser if you don't care about older browsers? Yes. Note that you need to use <script type=module> Personally though, I am using Google Closure compiler to turn the code of all my ES6 modules into a single, packed file without modules. Additionally I have told Closure compiler to output a sourcemap so that I can debug my code still. There are some issues with this from time to time. Not sure about what the debugging story is like currently with plain ES6 modules in the browser. Here is my Makefile in case you'd like to look at the arguments I pass to Closure compiler: https://github.com/ctsrc/Infinite-Tower-Run/blob/191a4035fd188c1462979425bb3b8c638ceac438/GNUmakefile https://github.com/ctsrc/Infinite-Tower-Run/blob/191a4035fd1...
pletnes 8y ago
As someone who mostly sticks to python but is interested in data analysis and visualization, I still haven’t figured out what problem d3 solves, and which use cases it makes sense for?
- bronson 8y ago
  What a strange comment. Have you tried to answer this for yourself? For example, looking at the homepage or any demos?
- jordan801 8y ago
  It offers a bunch of functions that help make svg manipulation digestible. Try manipulating an svg with vanilla javascript, it's a pain to do anything more than basic shape drawing.
- jordache 8y ago
  data visualization that is interactive and works on a platform that is universal. python produces only static output right?
  - LaGrange 8y ago
    What? No. Check out Jupyter, for example. Of course that's a totally different platform, but I wouldn't call that "static".
    - jordache 8y ago
      but you need a special viewer to run the output.. huge friction. That's a none-starter for almost everyone. everyone has a web browser...
      - maxerickson 8y ago
        ...The Jupyter Notebook is an open-source web application that allows you to create and share documents that contain live code, equations, visualizations and narrative text. http://jupyter.org/ http://jupyter.org/
curiousgal 8y ago
As a data person, I've always wanted to use D3 to build my visualizations but it's always been like using Assembly to build a program.
- jordache 8y ago
  that's pretty much the only way to do it though.. if you go any higher-level then it's just pre-baked out of the box visualization. As low level as d3 seems to be, there is probably no more intuitive data visualization that is bound to web display technology.
  - andybak 8y ago
    This seems so defeatist. Is each graph really that much of a special snowflake that we can't have frameworks that cover the 80% use case but allow you to drop to a lower level when needed? I am disinclined by temperament to use low level tools for tasks that really should have a sensible generic abstraction. I know some people's brains err in the other direction - each to their own. (I'm pretty sure tools exist. I used https://bokeh.pydata.org https://bokeh.pydata.org a few years ago when I needed something along these lines. I looked at d3 and had a similar reaction to the grandfather comment)
    - colordrops 8y ago
      There are higher level visualization tools built on D3.
    - kops 8y ago
      I agree with he sentiment as an outsider, but let's build 5 bar charts and talk about this stuff again :-)
    - gumballhead 8y ago
      I guess I'm one of those people who thinks that d3's api is an amazing level of abstraction. It took a bit for it to click for me, but that was mostly because it was my first exposure to functional programming. If I ever have to make a chart with another language, I cry because I can't use d3. I have reimplemented portions of d3's api in other environments like native Android before. Digging through the docs to find whatever configuration variable I'm supposed to set reminds me of the days of jquery plugins.
canada_dry 8y ago
For me using D3 is kinda like using regex. Whenever I need to use it... it always take a long refresher to get back up-to-speed. But, it's one of those amazing, invaluable tools that does some pretty complex stuff without sweat.
- Vaslo 8y ago
  Really good comparison, feel the same way. I use a site to brush up on my regex now and again, but since I'm not using daily, its easy to forget it!
  - yelnatz 8y ago
    Which site are you using to refresh your regex?
    - thorin 8y ago
      I use this one https://regex101.com/ https://regex101.com/
    - verinus 8y ago
      I really like http://regexstorm.net/ http://regexstorm.net/ for .net based regex- the included regex tester is a very nice feature to debug a regex...
    - yroc92 8y ago
      https://regexr.com https://regexr.com saved my life
    - Analemma_ 8y ago
      In addition to the online tools that other commenters have pointed out, I strongly recommend finding a regex "cheat sheet" (there are dozens online) and actually printing it out - I have one pinned to the corkboard next to my monitor and it is invaluable. It will save a lot of time from having to remember all the character classes, which characters do/don't need an escape \, and crazy lookaround syntax ("was it ?<! or ?<=")
jarym 8y ago
I love D3 but my biggest complaint is that many of the examples floating around appear to have been coded by people who don't care about reusability (and in some cases, ability for others to understand the code). Nowadays if I need to do interactive visualisations I typically end up using Mobx + SVG.js. It works really well and I rarely get other developers asking me to explain how it works so that's a HUGE plus.
- macawfish 8y ago
  Maybe you'd like this library: https://github.com/curran/d3-component https://github.com/curran/d3-component It let's you modularize your d3 code into components. Very handy!
  - jarym 8y ago
    thanks! Bookmarked.

493 points by _mhr_ 8y ago

Nice timing. I just found this website the other day and love it. I've just recently been getting into data visualization and have fallen in love with d3.js. Another good resources is http://alignedleft.com/work/d3-book/ http://alignedleft.com/work/d3-book/. Maybe a bit introductory for some of the smartypants on HN but I've been away from front end dev for a while and so find blasting through the chapters pretty helpful. Hilarious tone, also. Combined with d3indepth.com's examples and the API docs I've been able to get a good grasp of d3.js.

elsherbini 8y ago

I think this hasn't been update since 2017, and most of it is from 2016. I pretty much only use javascript for d3, and I put it down for a while. Recently I decided to do something with d3 v5.0[1], and got confused about the state of ES6 modules. Has anyone gotten rollup to work with d3? Is it possible to just use ES6 modules natively in the browser if you don't care about older browsers? My other issue was with async/await. It seems like when I used async await on a locally hosted csv file, it could take between 1 and 2 seconds to load. For my colleague sometimes minutes. When I switched to d3 v4.0 and the old callback approach, it loaded instantly, even for my colleague. What gives? [1] https://github.com/d3/d3/blob/master/CHANGES.md https://github.com/d3/d3/blob/master/CHANGES.md

jordan801 8y ago
Most ES6 features are available in Chrome and Firefox. Not sure what the issue is with async and await, all it is, is syntactic sugar really. It shouldn't have a lag time any differently. Babel (transpiler) is super easy to setup if you have any problems with compatibility.
- daurnimator 8y ago
  It's not all sugar, there are some actual differences; and especially around async/await there are optimizations that can only be made in the non-transpiled code.
  - joshribakoff 8y ago
    He said async/await is syntactic sugar over promises which it is. And that babel is easy to setup, which it is. Those statements are independently true. No one said the state machine that babel transpiles your async/awaits to is performant, he wasn't making that assertion. The difference between 1s & 1m lag in D3 has got to be a D3 bug.
codetrotter 8y ago
> Is it possible to just use ES6 modules natively in the browser if you don't care about older browsers? Yes. Note that you need to use <script type=module> Personally though, I am using Google Closure compiler to turn the code of all my ES6 modules into a single, packed file without modules. Additionally I have told Closure compiler to output a sourcemap so that I can debug my code still. There are some issues with this from time to time. Not sure about what the debugging story is like currently with plain ES6 modules in the browser. Here is my Makefile in case you'd like to look at the arguments I pass to Closure compiler: https://github.com/ctsrc/Infinite-Tower-Run/blob/191a4035fd188c1462979425bb3b8c638ceac438/GNUmakefile https://github.com/ctsrc/Infinite-Tower-Run/blob/191a4035fd1...

pletnes 8y ago

As someone who mostly sticks to python but is interested in data analysis and visualization, I still haven’t figured out what problem d3 solves, and which use cases it makes sense for?

bronson 8y ago
What a strange comment. Have you tried to answer this for yourself? For example, looking at the homepage or any demos?
jordan801 8y ago
It offers a bunch of functions that help make svg manipulation digestible. Try manipulating an svg with vanilla javascript, it's a pain to do anything more than basic shape drawing.
jordache 8y ago
data visualization that is interactive and works on a platform that is universal. python produces only static output right?
- LaGrange 8y ago
  What? No. Check out Jupyter, for example. Of course that's a totally different platform, but I wouldn't call that "static".
  - jordache 8y ago
    but you need a special viewer to run the output.. huge friction. That's a none-starter for almost everyone. everyone has a web browser...
    - maxerickson 8y ago
      ...The Jupyter Notebook is an open-source web application that allows you to create and share documents that contain live code, equations, visualizations and narrative text. http://jupyter.org/ http://jupyter.org/

curiousgal 8y ago

As a data person, I've always wanted to use D3 to build my visualizations but it's always been like using Assembly to build a program.

jordache 8y ago
that's pretty much the only way to do it though.. if you go any higher-level then it's just pre-baked out of the box visualization. As low level as d3 seems to be, there is probably no more intuitive data visualization that is bound to web display technology.
- andybak 8y ago
  This seems so defeatist. Is each graph really that much of a special snowflake that we can't have frameworks that cover the 80% use case but allow you to drop to a lower level when needed? I am disinclined by temperament to use low level tools for tasks that really should have a sensible generic abstraction. I know some people's brains err in the other direction - each to their own. (I'm pretty sure tools exist. I used https://bokeh.pydata.org https://bokeh.pydata.org a few years ago when I needed something along these lines. I looked at d3 and had a similar reaction to the grandfather comment)
  - colordrops 8y ago
    There are higher level visualization tools built on D3.
  - kops 8y ago
    I agree with he sentiment as an outsider, but let's build 5 bar charts and talk about this stuff again :-)
  - gumballhead 8y ago
    I guess I'm one of those people who thinks that d3's api is an amazing level of abstraction. It took a bit for it to click for me, but that was mostly because it was my first exposure to functional programming. If I ever have to make a chart with another language, I cry because I can't use d3. I have reimplemented portions of d3's api in other environments like native Android before. Digging through the docs to find whatever configuration variable I'm supposed to set reminds me of the days of jquery plugins.

canada_dry 8y ago

For me using D3 is kinda like using regex. Whenever I need to use it... it always take a long refresher to get back up-to-speed. But, it's one of those amazing, invaluable tools that does some pretty complex stuff without sweat.

Vaslo 8y ago
Really good comparison, feel the same way. I use a site to brush up on my regex now and again, but since I'm not using daily, its easy to forget it!
- yelnatz 8y ago
  Which site are you using to refresh your regex?
  - thorin 8y ago
    I use this one https://regex101.com/ https://regex101.com/
  - verinus 8y ago
    I really like http://regexstorm.net/ http://regexstorm.net/ for .net based regex- the included regex tester is a very nice feature to debug a regex...
  - yroc92 8y ago
    https://regexr.com https://regexr.com saved my life
  - Analemma_ 8y ago
    In addition to the online tools that other commenters have pointed out, I strongly recommend finding a regex "cheat sheet" (there are dozens online) and actually printing it out - I have one pinned to the corkboard next to my monitor and it is invaluable. It will save a lot of time from having to remember all the character classes, which characters do/don't need an escape \, and crazy lookaround syntax ("was it ?<! or ?<=")

jarym 8y ago

I love D3 but my biggest complaint is that many of the examples floating around appear to have been coded by people who don't care about reusability (and in some cases, ability for others to understand the code). Nowadays if I need to do interactive visualisations I typically end up using Mobx + SVG.js. It works really well and I rarely get other developers asking me to explain how it works so that's a HUGE plus.

macawfish 8y ago
Maybe you'd like this library: https://github.com/curran/d3-component https://github.com/curran/d3-component It let's you modularize your d3 code into components. Very handy!
- jarym 8y ago
  thanks! Bookmarked.