3 ms·

I've built all kinds of things with d3, I've been using it for over 4 years. It's a seriously great library. However, there's a cognitive overhead of thinking

I've built all kinds of things with d3, I've been using it for over 4 years. It's a seriously great library. However, there's a cognitive overhead of thinking in selections and update patterns... It's hard to remove state and make composable components that can work well in React, Angular, et al. While p5 sounds like the answer. We've been stripping away imperative programming on the web for the best part of it's history. Modern web development is more and more declarative every day... I just can't help shake the feeling it's a step backwards.

Osmium 9y ago
> While p5 sounds like the answer. We've been stripping away imperative programming on the web for the best part of it's history. Modern web development is more and more declarative every day... I just can't help shake the feeling it's a step backwards. Maybe, but I really like it -- a use case I'm looking at is making interactive versions of the types of figures you'd normally find in textbooks, and there's no one good library for this kind of thing. Each case is unique and has a large illustrative element. p5.js (and, before that, Processing) just allows you to get stuff done. I think that's why Processing took off so much in the artistic community too.
- rspeer 9y ago
  I think you're agreeing with the parent. He's saying the idea that everything's supposed to be declarative is a step backwards, because indeed sometimes you just want to write some imperative code and make something happen.
  - jamesrom 9y ago
    Excuse my clumsy wording. I mean p5 feels like it's out of step with modern web development.
macawfish 9y ago
you might try d3-component (https://github.com/curran/d3-component https://github.com/curran/d3-component)
molloy 9y ago
I just started learning d3 today for a work project, and yeah the selections and `data()`, `enter()`, `exit()` definitely add some cognitive overhead. Now that I've (mostly) wrapped my head around it, I like it a lot (and I'm also happy with d3's documentation!) Have you used react-faux-dom? [0] I've only just started using it, but so far it feels like a good solution for marrying react and d3. [0] https://github.com/Olical/react-faux-dom https://github.com/Olical/react-faux-dom
- austinhyde 9y ago
  Having gone through the process of marrying react and d3 - IMHO it's far easier to let react do DOM diffing and manipulation, and let d3 worry about data processing. The two work great together, just so long as you don't try to shoehorn one into the other. React more or less mirrors data(), enter(), and exit() with props, componentDid(/Will)Mount, and componentWillUnmount
  - derekperkins 9y ago
    This may be too late for you, but this is a great library that marries d3 with React. https://github.com/tannerlinsley/react-charts https://github.com/tannerlinsley/react-charts
    - austinhyde 9y ago
      Yeah, that does exactly the thing I was describing from a quick skim. https://github.com/uber/react-vis https://github.com/uber/react-vis does it as well. I've found that attempting to wrangle one of these chart libs takes more time than a quick `myData.map(d => <line path={linefunc(d)}/>)` or similar.
  - palimpsests 9y ago
    Having officiated the same kind of union between Ember and D3 in a few different ways, I have to agree - let Ember handle rendering, and D3 handles dynamic data binding. I've been working on an open source Ember library based on these concepts: http://locusenergy.github.io/ember-sparkles/#/sine-wave http://locusenergy.github.io/ember-sparkles/#/sine-wave
polskibus 9y ago
Can you say what is the problem with D3 and react working together?

Osmium 9y ago

> While p5 sounds like the answer. We've been stripping away imperative programming on the web for the best part of it's history. Modern web development is more and more declarative every day... I just can't help shake the feeling it's a step backwards. Maybe, but I really like it -- a use case I'm looking at is making interactive versions of the types of figures you'd normally find in textbooks, and there's no one good library for this kind of thing. Each case is unique and has a large illustrative element. p5.js (and, before that, Processing) just allows you to get stuff done. I think that's why Processing took off so much in the artistic community too.

rspeer 9y ago
I think you're agreeing with the parent. He's saying the idea that everything's supposed to be declarative is a step backwards, because indeed sometimes you just want to write some imperative code and make something happen.
- jamesrom 9y ago
  Excuse my clumsy wording. I mean p5 feels like it's out of step with modern web development.

macawfish 9y ago

you might try d3-component (https://github.com/curran/d3-component https://github.com/curran/d3-component)

molloy 9y ago

I just started learning d3 today for a work project, and yeah the selections and `data()`, `enter()`, `exit()` definitely add some cognitive overhead. Now that I've (mostly) wrapped my head around it, I like it a lot (and I'm also happy with d3's documentation!) Have you used react-faux-dom? [0] I've only just started using it, but so far it feels like a good solution for marrying react and d3. [0] https://github.com/Olical/react-faux-dom https://github.com/Olical/react-faux-dom

austinhyde 9y ago
Having gone through the process of marrying react and d3 - IMHO it's far easier to let react do DOM diffing and manipulation, and let d3 worry about data processing. The two work great together, just so long as you don't try to shoehorn one into the other. React more or less mirrors data(), enter(), and exit() with props, componentDid(/Will)Mount, and componentWillUnmount
- derekperkins 9y ago
  This may be too late for you, but this is a great library that marries d3 with React. https://github.com/tannerlinsley/react-charts https://github.com/tannerlinsley/react-charts
  - austinhyde 9y ago
    Yeah, that does exactly the thing I was describing from a quick skim. https://github.com/uber/react-vis https://github.com/uber/react-vis does it as well. I've found that attempting to wrangle one of these chart libs takes more time than a quick `myData.map(d => <line path={linefunc(d)}/>)` or similar.
- palimpsests 9y ago
  Having officiated the same kind of union between Ember and D3 in a few different ways, I have to agree - let Ember handle rendering, and D3 handles dynamic data binding. I've been working on an open source Ember library based on these concepts: http://locusenergy.github.io/ember-sparkles/#/sine-wave http://locusenergy.github.io/ember-sparkles/#/sine-wave

polskibus 9y ago

Can you say what is the problem with D3 and react working together?