First of all, please let me say this, React is designed for us native developer!(because of the similar API, lifecycle things…).
Long long ago, when Facebook tries to use HTML5 technology to build the mobile version of Facebook, it turns out to be a failure, at that time, there are not so many choices of front-end modularization framework to choose from.
But no pains, no gains.
I guess Facebook learns from it, and I guess they actually learn a lot from the process. Since then Facebook spend a lot of energy on iOS.(like building the very famous Paper™ APP)
So my point is, if there’s gonna be one technology to rule the mobile & web platform, that’s gonna be build by Facebook XD.
D3 Overview & concept
lower lever API, but more control
Behaviors - reusable interaction behaviors
Core - selections, transitions, data, localization, colors, etc.
Geography - project spherical coordinates, latitude & longitude math
Geometry - utilities for 2D geometry, such as Voronoi diagrams and quadtrees
Layouts - derive secondary data for positioning elements
Scales - convert between data and visual encodings
SVG - utilities for creating Scalable Vector Graphics
Time - parse or format times, compute calendar intervals, etc.
The g element is a container used to group objects. Transformations applied to the g element are performed on all of its child elements. Attributes applied are inherited by child elements. In addition, it can be used to define complex objects that can later be referenced with the
Selects the first element that matches the specified selector string, returning a single-element selection. If no elements in the current document match the specified selector, returns the empty selection. If multiple elements match the selector, only the first matching element (in document traversal order) will be selected.
D3 + React
Let React have complete control over the DOM even when using D3. This way we can benefit from Reacts Virtual DOM.
With this approach, React itself is responsible for generating the SVG markup. d3.js is used for its tremendous collection of utility functions, such as those that calculate the path value for various chart types.
First we make a selection object of all the svg circles in the visualisation (initially there will be none). Then we bind some data to the selection (our data array).
D3 keeps track of which data point is bound to which circle in the diagram. So initially we have two datapoints, but no circles; we can then use the .enter() method to get the datapoints which have “entered”. For those points, we say we would like a circle added to the diagram, centered on the x and y values of the datapoint, with an initial radius of 0 but transitioned over half a second to a radius of 5.
super cool example
- There’s a confusing idiom “scale”.
“Scales are functions that map from an input domain to an output range.”
- React files can actually be named like “*.react.js”. Then you can require it like this:
Hmmm… definitely cooler, not sure if it’s useful
- Paperclip™ is a great way for you to play around with d3, you just copy those html into the editor and see how things are going on. I don’t know how to explain it better, but you just fucking do it.
Let’s Make a Bar Chart http://bost.ocks.org/mike/bar/
D3 and React - the future of charting components?
Play with D3:
One repo to rule them all
Get them for free… Holy High(好厉害).
This one’s not for free… so if there are team coverage? XD
Tools Built with D3
When you want to use D3 without actually writing any D3 code, you can choose one of the many tools built on top of D3!
A library for working with large, multivariate datasets, written primarily by Mike Bostock. This is useful for trying to squeeze your “big data” into a relatively small web browser.
A D3 plug-in for visualizing time series data, also written by Mike Bostock. (One of my favorite demos.)
An online tool for data dashboards and widgets updated in real time, by Paul Jensen.
The “dc” is short for dimensional charting, as this library is optimized for exploring large, multidimensional datasets.
Reusable charts with D3. NVD3 offers lots of beautiful examples, with room for visual customizations without requiring as much code as D3 alone.
More reusable charts, with a range of chart types available. Polychart.js is free only for noncommercial use.
A toolkit for displaying time series data that is also very customizable.
A great tool for experimenting with live coding using D3, by Ian Johnson.