4 ms·

I really want to learn D3, and I've tried to learn it once before, but I just can't make it click in my head. I can find something and modify it to fit my needs

I really want to learn D3, and I've tried to learn it once before, but I just can't make it click in my head. I can find something and modify it to fit my needs, but I can't get the paradigm of it. This is such a beautifully and well written article and it's probably as close as I'll get to a digestible tutorial on it, so idk why I'm having such a tough time. I am very proficient at React and have been told multiple times that I'm a top performer at FAANG so idk what's so hard about D3.

hogFeast 6y ago
It is fairly simple imperative code: you just call functions on everything. Where it gets more complex is data and fitting that into an imperative model with very few flow control constructs: updating, creating multiple elements at once, doing weird things like calling select on elements that don't exist yet, and for most chart types there is a topological ordering on the graph of actions required to create a chart (i.e. you have to create an axis before you create a line because you need the axis that maps your data points to x,y positions)...combined with the fact that d3 throws almost no errors or misleading errors with bad inputs, and it can definitely great pretty tricky. The saving grace is the dispatcher which you can use dispatch events, and this does make it possible to break up your code. Also, it is nothing like React. Trying to get d3 working with React is like trying to stuff a sausage through the eye of a needle. It is a great package but it is becoming a bit outdated as the world moves towards things like React. Also, for most users it is superfluous. I still use chart.js, and only move things over when I have problems.
brailsafe 6y ago
If you're coming from React and haven't done much classic JS procedural DOM programming, you're just coming from a bit of a different level of abstraction that would be hard to click with or justify the necessity of doing so. In the reverse I personally never jived with React and procrastinated like hell in learning it. I find something about it uninteresting, as if all the tricky bits about js sort of turned into just assembling blocks.
- brundolf 6y ago
  I got started with jQuery-style stuff and I still find D3's API incredibly hard to use. I think part of the problem is that it awkwardly straddles the two worlds: some parts of the API are imperative like jQuery, and other parts are declarative-ish, and it's very hard to keep track of which is which.
  - brailsafe 6y ago
    No doubt. I've personally never had too much difficulty with D3's API, but a lot of people have, and I don't know why either are the case. I'd add though that jQuery was an incredibly well-written library with a great API, designed to be more intuitive than basic DOM programming. D3, afaik, is just a lot of capability but not as much attention to API user experience.
brundolf 6y ago
D3 is very powerful and well-engineered, with well-considered abstractions that really do manage to cover virtually every imaginable visualization. But its user-facing API is hot garbage. It's actually impressive that they've managed to come up with such an confusing and hard to track API for concepts that are themselves not fundamentally confusing. But it is what it is, it's established, it's here, so you kind of just have to bite the bullet and push through.
- peterhil 6y ago
  That exactly is the reason why I switched from using D3.js to create charts to creating the SVGs in Angular (that was ten years ago...) and only using the scale and path methods of D3.js. It is real pain with D3.js to keep the code in nicely separated modules or functions.
dsego 6y ago
It's the same as react but with a chaining style dsl instead of JSX. Rather than mounting a component, you do a selection, then give it some data and define transformations, ie how to render the data. D3 will look at the current DOM, do a diffing on data similar to React and see which changes need to be made to update the DOM. A quick example (I haven't done d3 in a few months so maybe I got it wrong): const drawBars = (plot, records) => plot.selectAll('rect.bar') .data(records) .join('rect') .attr('class', 'bar') .attr('height', d => d.value) drawBars(d3.select('#plot'), records) // same in React const Bars = ({ records }) => { return ( <> { records.map(d => ( <rect className="bar" height={d.value} /> )) } </> ) } ReactDOM.render( <Bars records={records} />, document.getElementById('#plot') )
- purplecats 6y ago
  thanks i took a look at your code and it's making a lot more sense now. its kinda of like react with a different dsl. realizing that d3 stood for something something document, and that select/selectAll were basically querySelector functions made this much easier to consume. thanks for your input, i just finished all dozen of her in depth blogs (not linked) and it was really interesting. I can't wait to use this now.

hogFeast 6y ago

It is fairly simple imperative code: you just call functions on everything. Where it gets more complex is data and fitting that into an imperative model with very few flow control constructs: updating, creating multiple elements at once, doing weird things like calling select on elements that don't exist yet, and for most chart types there is a topological ordering on the graph of actions required to create a chart (i.e. you have to create an axis before you create a line because you need the axis that maps your data points to x,y positions)...combined with the fact that d3 throws almost no errors or misleading errors with bad inputs, and it can definitely great pretty tricky. The saving grace is the dispatcher which you can use dispatch events, and this does make it possible to break up your code. Also, it is nothing like React. Trying to get d3 working with React is like trying to stuff a sausage through the eye of a needle. It is a great package but it is becoming a bit outdated as the world moves towards things like React. Also, for most users it is superfluous. I still use chart.js, and only move things over when I have problems.

brailsafe 6y ago

If you're coming from React and haven't done much classic JS procedural DOM programming, you're just coming from a bit of a different level of abstraction that would be hard to click with or justify the necessity of doing so. In the reverse I personally never jived with React and procrastinated like hell in learning it. I find something about it uninteresting, as if all the tricky bits about js sort of turned into just assembling blocks.

brundolf 6y ago
I got started with jQuery-style stuff and I still find D3's API incredibly hard to use. I think part of the problem is that it awkwardly straddles the two worlds: some parts of the API are imperative like jQuery, and other parts are declarative-ish, and it's very hard to keep track of which is which.
- brailsafe 6y ago
  No doubt. I've personally never had too much difficulty with D3's API, but a lot of people have, and I don't know why either are the case. I'd add though that jQuery was an incredibly well-written library with a great API, designed to be more intuitive than basic DOM programming. D3, afaik, is just a lot of capability but not as much attention to API user experience.

brundolf 6y ago

D3 is very powerful and well-engineered, with well-considered abstractions that really do manage to cover virtually every imaginable visualization. But its user-facing API is hot garbage. It's actually impressive that they've managed to come up with such an confusing and hard to track API for concepts that are themselves not fundamentally confusing. But it is what it is, it's established, it's here, so you kind of just have to bite the bullet and push through.

peterhil 6y ago
That exactly is the reason why I switched from using D3.js to create charts to creating the SVGs in Angular (that was ten years ago...) and only using the scale and path methods of D3.js. It is real pain with D3.js to keep the code in nicely separated modules or functions.

dsego 6y ago

It's the same as react but with a chaining style dsl instead of JSX. Rather than mounting a component, you do a selection, then give it some data and define transformations, ie how to render the data. D3 will look at the current DOM, do a diffing on data similar to React and see which changes need to be made to update the DOM. A quick example (I haven't done d3 in a few months so maybe I got it wrong): const drawBars = (plot, records) => plot.selectAll('rect.bar') .data(records) .join('rect') .attr('class', 'bar') .attr('height', d => d.value) drawBars(d3.select('#plot'), records) // same in React const Bars = ({ records }) => { return ( <> { records.map(d => ( <rect className="bar" height={d.value} /> )) } </> ) } ReactDOM.render( <Bars records={records} />, document.getElementById('#plot') )

purplecats 6y ago
thanks i took a look at your code and it's making a lot more sense now. its kinda of like react with a different dsl. realizing that d3 stood for something something document, and that select/selectAll were basically querySelector functions made this much easier to consume. thanks for your input, i just finished all dozen of her in depth blogs (not linked) and it was really interesting. I can't wait to use this now.