Bivariate Maps with React and D3 | Hacker News Reader

Bivariate Maps with React and D3

github.com

55 pointsdanso16 comments

I love the idea of bivariate color scales, but is it just me or they are hard to read?

It's especially confusing that the featured example uses the lack of something (equality) at the maximum of one scale.

OK, now we just need a bivariate color palette generator

It 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.

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.

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?

    <svg
      width={width}
      height={height}
    >
      {geoJson.features.map(feature =>
        <path
          key={`path-${feature.properties.bfsId}`}
          stroke='white'
          strokeWidth={0.25}
          d={path(feature)}
          fill='steelblue'
        />
      )}
    </svg>

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.

I think biggest reason to use React was great create-react-app for developer setup.

Fast and easy to start and expand as needed.

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.

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.

The usefulness of combing react and d3 is that you can create reusable and composable components, instead of creating something news every time you need a specific chart/map. This makes it easier to create more complex things like dashboards or UIs.

There is a better way to create reusable and composable components: Web Components. Read about it here: https://developer.mozilla.org/en-US/docs/Web/Web_Components

I highly recommend against using web components. Polymer has failed to take off in the past 3/4 years, and there are performance issues across browsers.

Subjectively, I didn’t find the API all that great either.

Polymer is crap. Web Components are great. There is definitely no performance issues. Ditch polymer and other such bloated libs. Try this 200-line lib instead: https://github.com/wisercoder/uibuilder

That answers the question of "why use React". But that wasn't my question. My question is "why use D3".

I've been using D3 for a couple years now, and it's so low-level that I really don't feel like it abstracts very much for me. Using React, I can easily build an abstraction over an SVG path element that receives datapoints and produces a `d` attribute.

Reply on news.ycombinator.com