4 ms·

Look no further than D3.js as an example of the kind of visualisations which are possible with SVG. https://github.com/d3/d3/wiki/Gallery https://github.com/d3

by ptrincr 10y ago

Look no further than D3.js as an example of the kind of visualisations which are possible with SVG. https://github.com/d3/d3/wiki/Gallery https://github.com/d3/d3/wiki/Gallery 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.

th0ma5 10y ago
If you skip the whole .enter() pattern then D3 is more approachable, IMHO.
- dlbucci 10y ago
  .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.
- athenot 10y ago
  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.
- Hupriene 10y ago
  d3v4 is improving the logic around .enter() a bit. See https://medium.com/@mbostock/what-makes-software-good-943557f8a488 https://medium.com/@mbostock/what-makes-software-good-943557... Search for "Removing the magic of enter.append"
  - vanderZwan 10y ago
    You can also use Vega or Vega-Lite and let d3 be the low-level architecture: http://vega.github.io/ http://vega.github.io/ https://www.youtube.com/watch?v=Y8Fp9z-9DWc https://www.youtube.com/watch?v=Y8Fp9z-9DWc https://vimeo.com/177767802 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.
tcfunk 10y ago
Whoa that "mower demo" is really messing with my vim navigation muscle memory.

by ptrincr 10y ago

th0ma5 10y ago

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

dlbucci 10y ago
.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.
athenot 10y ago
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.
Hupriene 10y ago
d3v4 is improving the logic around .enter() a bit. See https://medium.com/@mbostock/what-makes-software-good-943557f8a488 https://medium.com/@mbostock/what-makes-software-good-943557... Search for "Removing the magic of enter.append"
- vanderZwan 10y ago
  You can also use Vega or Vega-Lite and let d3 be the low-level architecture: http://vega.github.io/ http://vega.github.io/ https://www.youtube.com/watch?v=Y8Fp9z-9DWc https://www.youtube.com/watch?v=Y8Fp9z-9DWc https://vimeo.com/177767802 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.

tcfunk 10y ago

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