
D3 in Depth - _mhr_
http://d3indepth.com
======
elsherbini
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
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
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
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.

------
canada_dry
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
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
Which site are you using to refresh your regex?

~~~
thorin
I use this one [https://regex101.com/](https://regex101.com/)

------
jarym
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
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
thanks! Bookmarked.

------
curiousgal
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
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
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)

~~~
gumballhead
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.

~~~
curiousgal
Can you point me to some resources that can help me with D3?

~~~
gumballhead
I'd be happy to. Can I ask first what you've tried and what you had trouble
with? I think a lot of why d3 is considered low-level is that there are lot of
external things you do need to know. For example, for me, it wasn't d3 itself
but functional programming that I didn't really understand. For those who
don't do web development much, it might be DOM (and in particular, SVG)
manipulation.

The d3 specific parts are the idea of mapping data to DOM elements (which is
the part I think is beautiful), how it uses the data join to do so, and how
you use the scale functions to map from data space to pixel space to set the
element positions and other attributes.

Feel free to email me if you like -- it's on my profile.

------
twostoned
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.

------
pletnes
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?

~~~
jordache
data visualization that is interactive and works on a platform that is
universal. python produces only static output right?

~~~
LaGrange
What? No. Check out Jupyter, for example. Of course that's a totally different
platform, but I wouldn't call that "static".

~~~
tomca32
But it is static. The visual output is usually in jpg form. That's pretty much
the definition of static output.

The only output I can find in Jupyter that is not static is coming from Bokeh
which takes Python and generates javascript code to run in the browser.
Jupyter itself calls this "a style of D3".

~~~
pletnes
Jupyter is just the editor and viewer. It can plug in a lot of stuff,
including maps and videos, but those are prepared using other libraries.

