Hacker News Reader

Comment by ptrincr | Hacker News Reader

Look no further than D3.js as an example of the kind of visualisations which are possible with SVG.

At least this is what introduced me to working with SVG. As much as I like D3, mainly for charting, it's not the easiest thing to pick up.

View on HN

Whoa that "mower demo" is really messing with my vim navigation muscle memory.

If you skip the whole .enter() pattern then D3 is more approachable, IMHO.

.enter() was sort of confusing for me at first, but you lose the data-binding goodness of D3 if you drop it. I think the real issue is that the tutorials don't really explain it correctly: .enter() is where you add things and make changes that will be with the nodes for their lifetime. Do that, and then do your update logic (setting path attributes & fills, etc.). Don't run update logic when instantiating nodes, except for animation.

You can think of .enter() as React working in 1 way and under your explicit control instead of automagically. It's a one-way binding between your data and your DOM, with the data being the source of truth.

d3v4 is improving the logic around .enter() a bit. See https://medium.com/@mbostock/what-makes-software-good-943557... Search for "Removing the magic of enter.append"

You can also use Vega or Vega-Lite and let d3 be the low-level architecture:

http://vega.github.io/

https://www.youtube.com/watch?v=Y8Fp9z-9DWc

https://vimeo.com/177767802

I especially like how they handle interaction (event streams/signals; about six, seven minutes into the youtube video).

Supposedly there's a big update coming late fall, that upgrades vega and vega-lite to the latest version of D3. It also (finally) introduces the interactive bits to vega-lite.

Reply on news.ycombinator.com