Show HN: A gallery of graphs built with React and D3.js

by holtzy • 3 years ago

297 61 3 years ago

Many JS libraries exist to build graphs on the web (Vega, chartJS, Plotly...).

They allow to make charts quickly. But you lose flexibility: you're limited by the options they offer.

I just created a gallery with hundreds of graphs made with d3.js and React. - Examples are split by graph types - They all come with explanation and code sandboxes - Gradual complexity to ease the learning curve

It took me ages to create this project! Feedback welcome!

aweb• 3 years ago

Wow, I don't know a thing about dataviz but I really liked the website! The real world examples are really helpful to understand why we could use a certain kind of chart. Keep up the good work!

holtzy18• 3 years ago

Thanks a lot for the nice feedback!

azangru2• 3 years ago

Could you tell us what you have learnt about the performance of these tools? E.g. when you write about different approaches to building charts with d3 and react here (https://www.react-graph-gallery.com/about), is approach 2, which directly interacts with the DOM, more performant than approach 3, which has to go through React? Also, what, approximately, is the upper limit of a dataset size after which the React+d3=>svg approach begins to stutter?

Swizec• 3 years ago

In my experience (author of ReactForDataviz) the React renders SVG approach starts struggling around 10,000 to 50,000 nodes depending on hardware and what kind of calculations you’re doing.

Directly manipulating the SVG DOM with D3 (wrapped in a React blackbox) goes to around 100,000 nodes. After that you really have to start using canvas or webgl.

At those numbers you also start getting huge performance gains by mutating data and doing less copying. Everything you learn in “how to do react” tutorials quickly starts being wrong when your arrays have thousands of elements.

Edit: there’s also a lot you can do with how things are nested. The flatter your DOM, the fewer nodes React has to touch for every update

Here’s a fun stress test I built a while back that goes up to a million nodes rendered by React https://swizec.com/blog/a-better-react-18-starttransition-de...

holtzy18• 3 years ago

This is a very good question as performance is a key struggle in Data Visualization. Swizec answer below is great.

I will write more about performance soon. But using several layers of canvas is definitely the way to go in most situation to put it in a nutshell

SkyPuncher• 3 years ago

The page background is wild. It's really neat how it reacts to the mouse cursor.

julien040• 3 years ago

This is awesome! I have always wanted to learn about D3.js, but I've never really started. I hope these well-made examples will help. Thank you for creating this.

mjfisher2• 3 years ago

I've been vaugely interested for years, but I never quite had a good handle on what problems D3 solved; it's lower level than a charting library - to the extent that you use it to manipulate SVG primitives directly. At that point I figured you may as well go all the way and write it all yourself.

However now I've started playing around with it, I realise its killer core feature: it manages the relationships between the scale of your data and the coordinates on your screen, which saves a ton of awkward calculations. Add in helpers built on top for things like axes, line smoothing etc. and you've got a hell of a powerful API for creating charts, custom visualisations and anything else you can think of. I'm becoming a fan.

vidyesh3• 3 years ago

I really like the power of D3 but I have tried and failed at learning D3.js properly, I was unable to understand basic bars and graphs but the same reason you mentioned I find it difficult to advance, SVG manipulation with a big dataset is difficult after some point to create a complex visualizations.

Any good resources you could share that has helped you? Thank you.

holtzy18• 3 years ago

If 1 day you need to compute the position of all the rectangles in a treemap, you will understand how handy d3.js is.

D3.js is split in 2 types of functions:

- "math" - rendering

Math functions cannot be avoided for sure

jsweojtj• 3 years ago

Very nice! I've been a fan of your other data viz gallery work w/ python especially. I love how clearly you explain how to build up these results as well.

holtzy18• 3 years ago

Thanks! Glad to hear this!

wing-_-nuts• 3 years ago

Would anyone have book recommendations for react and d3? I'm a backend dev, with little interest in front end but the ability to visualize data like this is a 'killer app' for me.

azemetre• 3 years ago

I really enjoyed the Fullstack D3 book by Amelia Wattenberger:

https://www.newline.co/fullstack-d3

I'd recommend the book over the video as it does more elaborate data visualizations.

p4ul• 3 years ago

I'm a big fan of "D3 for the Impatient". It's rather brief, but still manages to cover a huge number of topics. I also appreciate its style of gradually building up an intuition for how D3 works. I always recommend this book for people coming to D3!

holtzy18• 3 years ago

Many great books exist for d3.js.

For d3.js AND react, it is missing for now IMO

itairall• 3 years ago

Great stuff. I had gone down this path last year with not using attr and it was so hard to find good examples like this.

The thing I never figured out was how to use d3 axis as a svg generator. Starting from scratch on each project is quite painful for the axis and d3 axis is so nice.

holtzy18• 3 years ago

You can: - call d3.axis in a useEffect - Or create your own axis component rendering some svg. It is not so hard actually.

littlecranky672• 3 years ago

This is great! The example page on official d3 is a bit dated and certainly has "grown" over time. I also particular don't like that d3 is too much of a "one tool for everything" approach. I.e. the data calculations and the drawings shouldn't be done in the same framework (thats were React comes into play).

My biggest pet peeve with D3 is the lack of TypeScript friendly-ness. I not only mean the lack of official typescript .d.ts bindings, but the API itself is completely not designed for strict typing. Functions are heavily overloaded/polymorphic, take all sort of different types of parameter shapes, and change their return values on what is passed in etc. My experience was always, once I got my code "properly" typed, the next update of the .d.ts bindings would break again, and this would repeat every couple of weeks.

azangru2• 3 years ago

I.e. the data calculations and the drawings shouldn't be done in the same framework (thats were React comes into play).

I used to think so too; but I don't any longer. Rendering in React is fairly expensive. It may easily turn out that direct DOM manipulation is better suited to visualizations than DOM manipulation through React.

jdonaldson• 3 years ago

Data calculations and rendering should be done in the same framework if you wish to optimize interactivity.

jitl2• 3 years ago

Very cool to explore the code here. Have you looked at Visx? It’s a D3+React mashup library, used by Airbnb and Notion for graphs. https://airbnb.io/visx/gallery

internetter2• 3 years ago

Wow how have I never heard of this? Looks wonderful

jitl2• 3 years ago

Harry (the guy who wrote it) is skilled but not a JS thought-leader Twitter personality. I know about it because I worked at Airbnb back in the day. https://twitter.com/hshoff

patrickthebold• 3 years ago

VisX is mentioned in the about page, so presumably. https://www.react-graph-gallery.com/about, that page also gives some motivation on why this is a separate project.

holtzy18• 3 years ago

Yes I know about VisX.

The approach is kind of in-between what I suggest and what a classic JS library like Vega does.

It is definitely a very good abstraction imo!! But I'm always scared to be stuck with a customisation I cannot do because of a layer of abstraction.

motohagiography• 3 years ago

They form a grammar of viz techniques. Brilliant, thank you.

cududa• 3 years ago

Just curious, does your setup support exporting the charts as base64 or PNG’s?

holtzy18• 3 years ago

Nope. Charts are added to the DOM using SVG or Canvas.

sputknick• 3 years ago

This is really helpful for me, the right level of example. I find most D3 examples to either be too simple or too complex, this nails the sweetspot of visually impressive, while still being practical.

holtzy18• 3 years ago

Nice thanks!

mhh__• 3 years ago

In my experience of implementing some clever financial plots in D3 I find that most examples on websites such as these are very quickly exhausted - unless you're dealing with a chart that either an undergraduate statistician or a programmer of any level might use you're on your own - I don't mind that, except that I notice that libraries often focus on a few examples rather than really nailing (say) getting zooming right.

internetter2• 3 years ago

Interesting to see this built on substack. I didn't know it had the capacity for something this custom

holtzy18• 3 years ago

Substack is just the tool I use for the newsletter!

The website is made using Next.JS

comboy• 3 years ago

Well, I don't have any constructive feedback, but it's beautiful.

_Parfait_• 3 years ago

Don't ever let this site go dark for any reason ever please. Great stuff

holtzy18• 3 years ago

It's fully static and hosted on github. It won't go dark. (And I'm actively working on it :) )

tunesmith• 3 years ago

This subject goes so deep, thank you for creating this. I spent significant time creating my own component that uses elk to lay out a graph, and d3 transitions with interpolation to animate from one graph state to another. I didn't try react-spring and don't have much of an insight between when to use react-spring and when I'd have to use transitions anyway. I'm looking forward to if you add more information along those lines.

holtzy18• 3 years ago

Animation is the trickiest part of dataviz on the web IMO.

I like react-spring but there are sooo many approached. All with pros and cons.

I'll write more about it soon!

Tokumei-no-hito• 3 years ago

Do you have a Substack? I remember your name from the data-to-viz. I’m interested in reading more about your experiences and thoughts on the space

epgui2• 3 years ago

We really need to rally all the dataviz tools around a grammar of graphics (Wilkinson, 2005)

holtzy18• 3 years ago

Ever heard about ggplot2 ?

www.r-graph-gallery.com

epgui2• 3 years ago

Yes haha. I really dislike working in R but ggplot2 is great.

jibbit• 3 years ago

What is it about D3 that is hard to explain? I know that documentation is hard, but e.g. something about React makes it easily grokable, and something about D3 is the opposite. Do react and d3 compliment each other? Or overlap?

spion• 3 years ago

I think the rendering pipeline for D3 is actually the hard/strange part, and to be honest, the less-valuable part too (can be swapped with React). The rest of the API is great. The new strange, unordered observablehq examples with extra DSL interspersed aren't helping.

holtzy18• 3 years ago

I agree a LOT with the comment below.

D3.js comes with function that modify the DOM. This is react job too. So using both together can be a challenge.

MR4D• 3 years ago

Did anyone else just waste 5 minutes playing with the background image?

I haven't seen that before - very cool.

Juicyy• 3 years ago

it comes from some library called js particles or particles.js i forget which and there are knockoffs... https://particles.js.org/samples/index.html#basic

erksa• 3 years ago

Great work!

holtzy18• 3 years ago

Thanks!

sterlind• 3 years ago

The link for "Connections" (I've been calling them geo-graphs or network maps) seems to be broken, which is a shame. I've had a hard time finding good libraries for them, and they're hard to get right for a few reasons:

- if you zoom out to show the world, map projections wrap around the antimeridian (e.g. you turn right at Kamchatka, loop around and hit Alaska.) if you want your edges to wrap (i.e. follow a great arc) rather than taking the long way around (i.e. drawing a line all through Europe and Asia), you have to do spherical math.

- if you want a multigraph (multiple edges between any pair of nodes), you need to have a way for those edges to "curve" rather than following a straight path (great arc.) this makes the math much more complicated, especially keeping numerical stability and accounting for coordinate singularities.

- now imagine all the fiddly bits of making the arrowheads touch the nodes at the right place, scale in width properly, etc. if you're really committed, you'll use lat/lon for every vertex of every poly you render. if not, there will be distortions. it's a trade-off.

- now imagine updating all of that while panning and zooming, and keeping it efficient and smooth.

I made a component for this, I'll try to open-source it, but I'm curious how other people have tackled the same issue. Did I just over-engineer the hell out of it doing spherical trig, vector math and iterative methods, or is it plain hard?

holtzy18• 3 years ago

All the map sections are not ready yet. But they will be soon!

ttfkam2• 3 years ago

Using Svelte and D3 together for data visualization leads to more declarative code and componentized code that developers have become accustomed to but without sacrificing performance.

https://blog.logrocket.com/data-visualization-svelte-d3/

holtzy18• 3 years ago

How does Svelte makes the code more declarative and Componentized than with React ?

ttfkam2• 3 years ago

Because React makes you add a bunch of boilerplate and extra steps in code for performance like useMemo(...) that simply aren't needed in Svelte.

Show HN: A gallery of graphs built with React and D3.js

Related Stories