MetricsGraphics.js – D3-based library optimized for visualizing time-series data
metricsgraphicsjs.org
metricsgraphicsjs.org
Spend a little time learning how D3 works. It will be well worth it. To get started, read through any tutorial you find written by Mike Bostock.
Required reading: Let's Make a Bar Chart[0], Thinking with Joins [1], How Selections Work [2], General Update Pattern [3], Nested Selections [4], Object Constancy [5], Working with Transitions [6], Three Little Circles [7].
For more tutorials, check out this list on the D3 wiki [8].
[0]: http://bost.ocks.org/mike/bar/
[1]: http://bost.ocks.org/mike/join/
[2]: http://bost.ocks.org/mike/selection/
[3]: http://bl.ocks.org/mbostock/3808218
[4]: http://bost.ocks.org/mike/nest/
[5]: http://bost.ocks.org/mike/constancy/
[6]: http://bost.ocks.org/mike/transition/
The advice the parent gave is meant for people working on projects where visualization is important. Not for those just needing to show a few plots quikcly in some other kind of project.
If you work is heavy on data-viz then you very much should read into all this. The same way we wouldn't consider someone a programmer if he just bought some shrinked wrapped software and installed it.
Plus the "needlessly complex" accusation is total BS. In fact it's considered one of the best designed APIs by most experienced developers -- check the interwebs for references to that, and is amazingly coherent, giving you only what you need for any specific problem, instead of forcing you to tons of boilerplate or irrelevant trivia.
I understood what D3 was doing under the hood, and experienced a lot of friction/confusion when I needed to build and manipulate a specific SVG tree structure.
The fact that D3 expects me to understand the low-level SVG structure and yet provides me with a model that doesn't intuitively mesh with this model is the source for most of my confusion and frustration, I expect.
I've taken the easy way out and used a D3 library a couple times and been disappointed by precisely what counchand refers to: changes that should be trivial resulting in notable implementation pain.
(but I like the looks of this - and kinda want to kick the tires and give it a shot!)
There's a lot of value on higher level libraries that make opinionated decisions how e.g. gaps, data point highlights, zooming, rounding, axis labels and tons of other details work.
But I would add that not everyone wants to make more complex ones. For a lot of needs, 'using a library like this will only get you so far' is often exactly what folks need. Many of us just want to make charts that work really well, and are really simple to use. We grew tired of having to re-implement the same ideas over and over again for new dashboards and reports. Hence this library - a way of simplifying what we've already done, and making it easier to add new features in a principled way.
If you just want a simple, good looking line chart with legends and tool tips, you're better off using a library like MetricsGraphs, highcharts (not based on d3), or nvd3.
If making custom, unique visualizations is your day job, then d3 is the right way to go.
Just let it be said: there's definitely room fore even more libraries built on top of D3.
I've just started my on take on a high-level chart library based on d3, one that leverages React components [1]. I'm hoping to retain an equally simple interface as MetricGraphics. In fact, I'm sure I'll draw a lot of inspiration from this excellent chart library.
My library is still very early stage, but I'd love to get feedback on possible directions from React users and others interested in dataviz (someone mentioned candlesticks, which I'm noting down in my todo).
It's the same building principles : chart is a React component, svg written as JSX, using d3's scales (no axis in mine, but bar info as tooltips instead).
Also, an easy way to customize all styling, tick intervals and min-max ranges would be good.
I hadn't thought of an API for customizable min-max ranges. It was something I figured people would do to their data prior to putting it in the chart, but bears considering.
Anyway, I believe zooming to be a very typical feature for time-series (e.g. Google Finance supports that), so I hope this library has good support for it too.
We've talked about this quite a bit internally (nothing formalized in a github issue), and are still figuring out how we want to handle it, if we want to.
I like how minimalistic the graphs look. Though, missing the pie chart.
I might just switch to this if I see that it's going somewhere ;)
Given that libraries like Ractive and React handle dom updates in a much more sane fashion (just re-render the entire virtual dom instead of mucking around with individual nodes), all I really want is a library to generate path attributes for the svg elements, and hence find paths.js to be a much simpler option.
A major feature of D3 is its ability to update the dom incrementally as data changes.
FTFY
> Given that libraries like Ractive and React handle dom updates in a much more sane fashion (just re-render the entire virtual dom instead of mucking around with individual nodes), all I really want is a library to generate path attributes for the svg elements, and hence find paths.js to be a much simpler option.
So it's more sane to "re-render the entire virtual dom instead of mucking around with individual nodes"? Is it insane that D3 does the mucking around for you so that you don't have to re-render the entire dom? Wouldn't that be a good thing?
tldr: D3 was an excellent tool when it came out, but I personally find Ractive + Paths to be much simpler and straightforward options. I think you'll agree if you give it a shot!
Nice to hear that, I am looking at some right now...
What would you recommend for maximum compatibility? (IOS, Android, Browsers) ?
I'd like to have zooming for my graphs. Any ideas about adding that? If I can manage it/get to it on my own I'll let you guys know.
Mostly out of curiosity, but I liked some features of it and was wondering how they compare to Rickshaw.
If anyone wants to chip in, I'd love to hear from you. Generally looking for more core contributors to the project.
[0] https://github.com/kenhub/giraffe [1] http://code.shutterstock.com/rickshaw/
Standard disclaimer - I'm the author of Tessera.
[1] https://github.com/fastly/epoch/ [2] http://code.shutterstock.com/rickshaw/ [3] http://square.github.io/cubism/
:thumbsup: Looks really great
Make an issue on github and we'll get to it soon: https://github.com/mozilla/metrics-graphics/issues
Highcharts: http://www.highcharts.com/
I feel like a scatterplot highlight should be the easiest god damn thing ever. The fact that it's this complicated seems like a clear indicator that something is broken, but I'm not sure what exactly. I might be inclined to blame the architecture of HTML/DOM?
But honestly, I don't see how those 2 lines
.on('mouseover', this.rolloverOn(args))
.on('mouseout', this.rolloverOff(args));
For a charting library, yes I would expect this to be easy. But to be fair, D3js is not a charting library. The OP here is showing their version of a charting library based off of D3js.
Remember, D3 = Data Driven Documents, which can be leveraged for extremely fast interactive visualizations
For further clarification here is the goal/definition from D3js.org:
"D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction."
A charting library wouldn't give you the flexibility to do this: http://bl.ocks.org/mbostock/d8e15a0ab7f85818a5bd or this: http://bost.ocks.org/mike/shuffle/
Edit: a must see are the creations from the man himself. Mike Bostock http://bl.ocks.org/mbostock
For both they are using D3's built-in voronoi function which will generate the appropriate interaction regions when given a list of points. These polygonal regions surround the given points and fill the graph, acting as large unmissable mouseover targets instead of the tiny points. It's really useful. https://github.com/mbostock/d3/wiki/Voronoi-Geom
More on voronoi tessalation http://en.wikipedia.org/wiki/Voronoi_diagram
1) building a Voronoi tessellation from the given points
2) at each mouse movement perform point-in-polygon queries on all polygons until found
3) rebuild Voronoi as data changes
1) at each mouse movement calculate distance-to-point for each point
2) select the shortestk-d trees sound closer to what you'd want to do cursor coordinates to scatter plot point lookups.
Multi-Line Graph https://github.com/mozilla/metrics-graphics/blob/master/js/m...
Point Graph (Scatterplot) https://github.com/mozilla/metrics-graphics/blob/master/js/m...