3 ms·

I've recently had good success writing raw SVG from ClojureScript. What does D3 provide on top of that?

by arohner 11y ago

pgbovine 11y ago
a principled way to think about layering graphics and animations ... it's a bit higher level of abstraction than generating raw SVG. paper here: http://vis.stanford.edu/files/2011-D3-InfoVis.pdf http://vis.stanford.edu/files/2011-D3-InfoVis.pdf
athenot 11y ago
D3 provides bindings between data structures and DOM elements; that's where a lot of the power comes from, specifically for doing in-place updates. I've used d3 as a replacement for react and it performs quite well—though you have to be a bit more explicit when it comes to updates.
cpbotha 11y ago
Probably the most important innovation of d3 is the idea of the DOM - data join. Mike Bostock, handsome father of d3.js and maker of all that is pure and wonderful (I have the good fortune to spend lots of work time using d3), mentioned this himself during his reddit AMA, see https://www.reddit.com/r/dataisbeautiful/comments/3k3if4/hi_im_mike_bostock_creator_of_d3js_and_a_former/cuul8go https://www.reddit.com/r/dataisbeautiful/comments/3k3if4/hi_... In short, you get some data, you join it with a selection of wholly or partially non-existent DOM, and then you work with the enter (new), update (existing) and exit (not required for the new data) selection. This is an extremely powerful metaphor for representing data and performing dynamic data updates using arbitrary mixes of SVG (or any other DOM) elements. (oh, based on this mechanism, you can build really beautiful visual transitions) Here's a short introduction to the join idea in d3: https://bost.ocks.org/mike/join/ https://bost.ocks.org/mike/join/ BTW, programming in d3.js already feels a whole lot like programming in a functional language.
coldtea 11y ago
Literally, TONS. From handling mappings between ranges to converting geolocations, and from automatically keeping track of things added/removed from an SVG based diagram/plot to picking nice tick marks on your axis.
dwwoelfel 11y ago
Most of the replies you got are talking about DOM manipulation. If you're using React, then you have that part covered. In my experience, it's much easier to use React's declarative model over D3's imperative one. D3 has some really nice graphing utilities, though. Their scale functions are handy and their geometry API is spectacular: https://github.com/mbostock/d3/wiki/Geometry https://github.com/mbostock/d3/wiki/Geometry

I've recently had good success writing raw SVG from ClojureScript. What does D3 provide on top of that?

by arohner 11y ago

I've recently had good success writing raw SVG from ClojureScript. What does D3 provide on top of that?

a principled way to think about layering graphics and animations ... it's a bit higher level of abstraction than generating raw SVG. paper here: http://vis.stanford.edu/files/2011-D3-InfoVis.pdf http://vis.stanford.edu/files/2011-D3-InfoVis.pdf

athenot 11y ago

D3 provides bindings between data structures and DOM elements; that's where a lot of the power comes from, specifically for doing in-place updates. I've used d3 as a replacement for react and it performs quite well—though you have to be a bit more explicit when it comes to updates.

cpbotha 11y ago

Probably the most important innovation of d3 is the idea of the DOM - data join. Mike Bostock, handsome father of d3.js and maker of all that is pure and wonderful (I have the good fortune to spend lots of work time using d3), mentioned this himself during his reddit AMA, see https://www.reddit.com/r/dataisbeautiful/comments/3k3if4/hi_im_mike_bostock_creator_of_d3js_and_a_former/cuul8go https://www.reddit.com/r/dataisbeautiful/comments/3k3if4/hi_... In short, you get some data, you join it with a selection of wholly or partially non-existent DOM, and then you work with the enter (new), update (existing) and exit (not required for the new data) selection. This is an extremely powerful metaphor for representing data and performing dynamic data updates using arbitrary mixes of SVG (or any other DOM) elements. (oh, based on this mechanism, you can build really beautiful visual transitions) Here's a short introduction to the join idea in d3: https://bost.ocks.org/mike/join/ https://bost.ocks.org/mike/join/ BTW, programming in d3.js already feels a whole lot like programming in a functional language.

coldtea 11y ago

Literally, TONS. From handling mappings between ranges to converting geolocations, and from automatically keeping track of things added/removed from an SVG based diagram/plot to picking nice tick marks on your axis.

dwwoelfel 11y ago

Most of the replies you got are talking about DOM manipulation. If you're using React, then you have that part covered. In my experience, it's much easier to use React's declarative model over D3's imperative one. D3 has some really nice graphing utilities, though. Their scale functions are handy and their geometry API is spectacular: https://github.com/mbostock/d3/wiki/Geometry https://github.com/mbostock/d3/wiki/Geometry