Introducing d3-shape | Hacker News Reader

Introducing d3-shape

medium.com

218 pointsingve19 comments

I've recently been experimenting with how best to leverage the wealth of knowledge which has gone into d3 within the context of React, where the conventional selection-driven APIs become a hinderance rather than a help.

Around that time, I noticed the new modular repos on the d3 Github org[1] coming together, and have since been watching with great anticipation. I'm glad to see d3 evolving for a new world where its excellent, fine-tuned collection of math and drawing functions work in concert with your rendering framework of choice.

[1] https://github.com/d3

For example, here's something pointless I threw together combining d3-shape, d3-scale and react-motion: https://jsbin.com/mehata/edit?js,output

I made a react wrapper component for using d3 style components within react apps. It uses the react lifecycle methods instead of render ...

http://bl.ocks.org/cpapazian/6228888157c39be85e9c

Scroll to the bottom for the wrapper class. Please excuse the coffeescript.

Shameless plug: the design of this seems really similar to my own library paths.js. In both cases, the starting point is observing that nowadays people usually already use some framework to manipulate the DOM, so what is actually needed is some way of computing some description of shapes starting from the data (and suitable accessor functions). see https://andreaferretti.github.io/paths-js-demo

Ah, this looks interesting. I have been looking for a library for visually representing, animating, and interacting with general data structures, such as various tree and hash algorithms (https://news.ycombinator.com/item?id=10572893).

One thing, I was playing with the graph tree demo and it freezes after a few drags, every single time. Is this part of the demo?

Can confirm this. Using latest Chrome.

Yeah, the graph chart is buggy, and advertised as such. I have been wanting to improve that for a while, but I did not find the time yet...:-(

Mind some nitpicks? :)

It's not possible to put a sector back into the piechart by clicking on it again. So once you clicked on any sector, there's no way to go back to the original chart state.

Using up/down arrows to change selection in comboboxes doesn't update the graph.

Tree Chart has no animation on leaf expansion/collapse, so clicking, for example, on Grandma results in the graph transformation that's abrupt and not immediately obvious. There's also no way to tell collapsed nodes from those without children (leafs).

Sankey Diagram could use some fade transitions to make highlighting less jarring.

Thank you for the feedback! Actually, the whole point of the library is to generate shape information based on data, and the actual rendering is left to the user. So the demo is left as an example, and I don't want to add too many features, because it would make the example more complex to follow

I was literally working on almost the same thing all day, except with dot syntax compat (so you get all the GraphViz/LaTeX/Docbook/Doxygen benefits). Oh well, excellent work, my good man !

RIP all other JS charting libraries.

Eh I'm not so sure. I used NVD3 as a charting library on a project because I wanted to use d3 after seeing all the amazing work others have done, but found it to be very confusing. I'm not sure how much of that is NVD3 or how much of that was just d3.

I think it helps if you just understand the mental model that d3 is going for. Clearly tons of people are able to do good work with it.

I agree d3 is confusing at the start, especially the data join concept and method chaining. But once you put enough effort to understand exactly what each function does (through experimenting with browser inspector), it becomes as easy to use as jQuery.

Rendering is broken in Firefox on iOS. Known issue? Otherwise it looks great!

Would you mind filing a bug with more information? https://github.com/d3/d3-shape/issues

Is it only broken in Firefox for iOS, or is it broken in general for apps that use the iOS WebView?

Is there an isolated demo (JS Bin & co.)? Couldn’t find it in the text/repo.

This is great. Thanks Mike.

Reply on news.ycombinator.com