Bivariate Maps with React and D3
github.com
Bivariate Maps with React and D3
1–10 of 17 posts
Re: Bivariate Maps with React and D3
#2It seems weird to pair D3 with React, since D3 is just another abstraction over the DOM, just like React. Why not just render the graphics with React?
Re: Bivariate Maps with React and D3
#3It seems weird to pair D3 with React, since D3 is just another abstraction over the DOM, just like React. Why not just render the graphics with React?
Take a look at the parts of the D3 API used here and explain what parts of the React API could be used to replace them. They serve two very different use cases.
React has tools for state management, code reuse, routing and other common front-end needs and leaves the DOM content to be decided by the coder with XML-like markup. D3 abstracts over the DOM content to handle the specifics of rendering while the coder focuses on the data.
Pairing D3 with React or Vue is a very common decision. Because this project seems to make little use of React beyond memoization I would think that doing without React would be much more plausible.
Re: Bivariate Maps with React and D3
#4It seems weird to pair D3 with React, since D3 is just another abstraction over the DOM, just like React. Why not just render the graphics with React?
D3 has many parts. d3-selection (https://github.com/d3/d3-selection) is the only part that deals with the DOM (I think). It wouldn't make much sense to use it with React, but the rest of D3 can easily be combined with React.
Re: Bivariate Maps with React and D3
#5It seems weird to pair D3 with React, since D3 is just another abstraction over the DOM, just like React. Why not just render the graphics with React?
I couldn't see a reason for React to be used in this visualization either. It's been awhile since I've used D3 but I thought it could do this kind of rendering on its own?
{geoJson.features.map(feature =>
)}
Re: Bivariate Maps with React and D3
#6It seems weird to pair D3 with React, since D3 is just another abstraction over the DOM, just like React. Why not just render the graphics with React?
Pairing a view library with D3 is pretty nice in that you can create components and pass arbitrary data into them to generate visualizations. It's not always necessary, but it helps for certain use cases where breaking out data visualizations into components is a little more manageable.
Re: Bivariate Maps with React and D3
#7It seems weird to pair D3 with React, since D3 is just another abstraction over the DOM, just like React. Why not just render the graphics with React?
The creator admits this in the README:
The use of react is hereby not sctrictly necessary and much of the code found in SwissMap.js is also valid for other programming environments.
Re: Bivariate Maps with React and D3
#8It seems weird to pair D3 with React, since D3 is just another abstraction over the DOM, just like React. Why not just render the graphics with React?
I couldn't see a reason for React to be used in this visualization either. It's been awhile since I've used D3 but I thought it could do this kind of rendering on its own? {geoJson.features.map(feature => )} I was thinking maybe React was also used with this visualization in production (e.g. adding interactive elements for a published story), and so maybe the author found it easy to use React for the rendering too?
D3 can do this type of rendering, but d3 data joins and selections are often difficult for people to understand and master. The beauty of this approach is that it bypasses all that and uses map to loop through the geoJSON features creating each path element.
To me this is more readable and easy to understand, but you don't really need react to do any of this. This can also be done with plan js.
Re: Bivariate Maps with React and D3
#9OK, now we just need a bivariate color palette generator
Re: Bivariate Maps with React and D3
#10It seems weird to pair D3 with React, since D3 is just another abstraction over the DOM, just like React. Why not just render the graphics with React?
D3 has many parts. d3-selection ( https://github.com/d3/d3-selection ) is the only part that deals with the DOM (I think). It wouldn't make much sense to use it with React, but the rest of D3 can easily be combined with React.
I agree, when I use d3 and react together I tend to use all of the non-DOM-manipulating d3 utilities for transforming data then react for rendering the DOM. D3 is a swiss army knife of utilities for data visualization, and as you point out only a small part of it deals with DOM manipulation.