Make D3 charting next level
I learned D3 for a while and somewhat confident about creating basic charts and graphs and make them interactive.
However when it become more complicated with user interactions or we need to make multiple charts to react each other (like this), it become a little bit overwhelming.
It’s mainly because when I add some interaction or animation to the d3 chart it always makes my rendering function become getting bigger and bigger so it makes me hard to keep track of each components interactions.
Using framework
I felt long time I should use some front end frame work to manage my webapp.
I first try angular and it was nice to use but I felt that using it with third party libraries is a little bit difficult and also recent move to angular2.0 is makes me down.
Then React coming to option. I leaned bit of basics by a book (React.js Essentials) and there are very nice blog posts (sxywu, nicolas hery which I read but also react.rocks, react-d3, oli.me, the binary blog) about using react with d3.
graphing each blog’s interaction (which blog referring which) might fun
after read sxywu’s blog I realised that using react is much bigger step than I think.
In her blog react is main component for rendering and event handling. It make sense because these are react’s strong points.
Rendering in react gives me component modularity and event handling with react and flux gives me one way data flow.
So where does she use d3? It’s in updating components. Because d3’s transition animation is very easy to use, beautiful effect and effective as data visualisation.
As I feel importance of transition effect and not very much expect user interaction (especially user update data, I assume user just consume data), maybe sticking to d3 is necessary and I’d love to.
Written with StackEdit.
