MetricsGraphics.js – D3-based library optimized for visualizing time-series data(metricsgraphicsjs.org)
metricsgraphicsjs.org
MetricsGraphics.js – D3-based library optimized for visualizing time-series data
http://metricsgraphicsjs.org
76 comments
Hi - author here. Completely agree - if you want to make much more complex data graphics, learning the nuts and bolts of d3 is vital. You certainly can't escape that.
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.
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.
+1 based on my own experience. I still don't grok The D3 Way, despite having used it several times in production projects.
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!)
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!)
I consider D3 a rather low level solution for data visualization. It gives you the bits and pieces for making paths, axises, and svg's that users can interact with.
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.
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.
Because the first thing I should be expected to do when choosing to use a library to achieve my data-viz goals is to read through a dozen tutorials about a needlessly-complex API.
It's not at all "needlessly complex". In fact, it's remarkable how much power you can get from just a few orthogonal instructions. Yes, it requires that you form a decent mental model of the system, but what it unleashes is so valuable that I promise you it's worth it. It's very much like learning a programming language: hard at first, but with a bit of experience you can do things you never thought possible.
Because if data-viz is actually your goal, and not a secondary aspect of your work, then you SHOULD read tons of tutorials and learn the low level workings.
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.
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'll give it another shot (I have to for my current project) -- but I don't think my initial assessment is "total BS".
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 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.
Is there any web based D3 "wysiwyg" editors that generates readable javascript that only uses D3? That would be something in between using "raw" D3 and libraries built on D3. Another common way to make visualisations is to modify examples found on bl.ocks.org.
Just let it be said: there's definitely room fore even more libraries built on top of D3.
Just let it be said: there's definitely room fore even more libraries built on top of D3.
Partly true, but visualizing timeseries is full of little details and gotchas, and taking care of all of them on top of standard d3.js is quite a big chunk of work.
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.
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.
+1
This cannot be stressed enough. There is a learning curve for D3 but if you invest the time you'll get out more than you put in. Without really understanding how to do "hard" things in D3 libraries like this and Square's Crossfilter won't get you very far beyond the examples given.
Congrats on an extremely well-done library. Glad to see d3 getting addition options with a much higher level of abstraction for those users who just want to make a common visualization with a minimum of fuss.
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).
1. http://esbullington.github.io/react-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).
1. http://esbullington.github.io/react-d3/
Here's a horizontal bar chart that could complete your examples.
https://github.com/laem/react-horizontal-bar-chart
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).
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).
Very nice! React components are really the perfect level of abstraction for a chart library.
Sensible hover effects are essential IMO (not just for prettiness sake) and is a basic thing that quite a few libraries seem to miss out.
Also, an easy way to customize all styling, tick intervals and min-max ranges would be good.
Also, an easy way to customize all styling, tick intervals and min-max ranges would be good.
Thanks for your input. Animated effects like hover on definitely on my todo list. And it's already possible to customize styling and tick intervals, although I haven't documented that yet (still setting up documentation that goes beyond the example site and README).
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.
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.
Min-max ranges are useful for keeping desired range visible even when the data shows very little change (like a 0-100 min-max scale that shows the full range even when all of the data happened to fall within 93-99 for example).
Properly definable color ranges. Let's say I want to color values below 0 in blue shades, values above 0 as red shades. Pretty much none of the libraries allow anything like that (unless you jump through hoops and write ugly hacks).
I implemented something similar with Dygraphs. The "killer feature" with that was instantly zooming to any detail (e.g. from 1 year to a time window of 10 milliseconds). The client would instantly show the level of detail possible with the current dataset, and fetch the detailed datapoints in around 100-200 ms.
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.
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.
Hi - one of the authors here (Dygraphs is fantastic, btw!)
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.
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.
Oh! This is sadly a bit too late as I've recently switched from Highcharts to Flot because I did not want to buy the so-expensive commercial license for Highcharts.
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 ;)
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 ;)
Hi - one of the authors here. We've had the pie chart request before. We will probably never implement pie charts. I agree that there are cognitive issues with them, and given that at least for our immediate needs there are better alternatives.
Some people say that pie charts are bad ;)
https://www.stevefenton.co.uk/Content/Pie-Charts-Are-Bad/
I really wish that there were canvas (non-svg) alternatives to flot, with many graphing features. Flot's performance for frequently updating graphs is awesome.
Have you tried out http://nvd3.org/ ?
c3js does pie and donut charts
http://c3js.org
http://c3js.org
While I am actively learning D3 itself, I really like the style of this library and its abilities. It makes almost 100% of the same design decisions I would make when plotting the kinds of charts it does. I've been looking for an open-source project like this for ages. I know about a lot of others (like nvd3) but never quite felt like anything provided the level of interaction (specifically hover states) I wanted. I'm excited to give Metrics a shot.
A major 'feature' of D3 is its ability to update the dom with the new svg elements.
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.
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 with the new svg elements.
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?
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?
It would if D3 did so in a transparent, intuitive manner. One of the major issues beginners (including myself) face with D3 is the steep learning curve due to the fact that it isn't always clear what exactly a method does and the API can almost feel cryptic at times. I remember adding one method at a time in the chain to 'reverse engineer' the behavior (I could've read the source, but plunker's auto update makes it easier to experiment). If you look at the questions on Stack Overflow, a large percentage are in fact
around the dom behavior.
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!
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!
I've looked at a LOT of time series graphing libraries over the last few years. Well done on MetricsGraphics for making it look great, powerful and easy to use: http://metricsgraphicsjs.org/interactive-demo.htm
Indeed. It looks nice, but I need to code in it a little before releasing a conclusion. I still have HighCharts as the standard for this.
Nice to hear that, I am looking at some right now...
What would you recommend for maximum compatibility? (IOS, Android, Browsers) ?
Nice to hear that, I am looking at some right now...
What would you recommend for maximum compatibility? (IOS, Android, Browsers) ?
IMO, HighCharts is still the best for flexibility and aesthetics.
Just a quick plug for my angular directive for highcharts https://github.com/pablojim/highcharts-ng
Awesome. I just happened to be thinking of how to do this... I think you just saved me a lot of time and effort.
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.
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.
It looks like the library dynamically fits the chart inside the dimensions you provide when instantiating it. So you probably could (on zoom) instantiate a separate graph based on same data inside different height / width constraints.
Sound idea - thanks!
Some nice stuff here. My feature request: this badly needs a vertical crosshair for the multi-line charts, to see what are all the values at that point on the x-axis at once.
Hi - we've actually talked about a number of implementation ideas for this, and probably should add a github issue for this.
Can't wait to see a graphite front end based on this.
That's an interesting idea. I'm the creator of Giraffe[0], a graphite front end using Rickshaw[1]. I was just toying with idea of trying out a branch / fork that uses this instead...
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/
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/
Tessera (https://github.com/urbanairship/tessera) has pluggable renderers - I haven't checked out metricsgraphics suitability for rendering Graphite data yet, but it would likely be quite straightforward.
Standard disclaimer - I'm the author of Tessera.
Standard disclaimer - I'm the author of Tessera.
+1
Neatly done ! Pushing 3 more:
[1] https://github.com/fastly/epoch/ [2] http://code.shutterstock.com/rickshaw/ [3] http://square.github.io/cubism/
[1] https://github.com/fastly/epoch/ [2] http://code.shutterstock.com/rickshaw/ [3] http://square.github.io/cubism/
And a nice packaged solution: http://grafana.org/
I really like grafana but unlike the parent's suggestions, it uses Flot not D3 as the charting backend.
These are pretty, but I put absolutely no faith in a "confidence band" implemented by anyone who doesn't feel a need to explain their formula. It's surprisingly difficult (serial correlation, for one thing.)
I just realised that this project has been released under the mozilla github account — this (might) mean that it'll be actively maintained, and perhaps better documented than other libraries around.
:thumbsup: Looks really great
:thumbsup: Looks really great
This library is great: it's clean, it doesn't have the useless feature that you usually see in charts, like animation and oversmoothing. But why in the world would you tie this to bootstrap and jquery?
This seems to offer a small subset of the functionality of plottable.js
I like opinionated libraries like this with sensible options.
Couldn't find in the docs. Does this support epoch timestamps? Does it support more granular x-axis ticks, eg hours, min, sec?
I would love to use this -- I just wish it had a stripped down version without the dependencies: especially no bootstrap....
Howdy - one of the authors here. I believe to my knowledge the only thing that requires bootstrap.js is the popover stuff, which we plan to decouple anyway.
Make an issue on github and we'll get to it soon: https://github.com/mozilla/metrics-graphics/issues
Make an issue on github and we'll get to it soon: https://github.com/mozilla/metrics-graphics/issues
Awesome, thanks! I will do so :)
(I'm currently in the process of ripping Bootstrap out of an app for performance reasons and styling flexibility -- flexbox)
Not too shabby. Check out dygraphs for some inspiration. Lots of powerful features and handles huge datasets.
These look fantastic! I will definitely be using this library in the future.
Looks great, but Highcharts is still way ahead for visualizing time series data.
Highcharts: http://www.highcharts.com/
Highcharts: http://www.highcharts.com/
what about a live data option ? That's the one feature of highcharts I use the most.
oh wow.. i'd love to see an addition to this for tessera.
where does this fit between rickshaw and flot?
On the scatterplot examples, when it automatically highlights the closest point to your mouse pointer (maybe using some kind of underlying voronoi field) I nerdgasmed.
The scatter highlight is super sexy. Digging through the project on GitHub I can't find the code that makes that happen. Anyone know where the magic is?
Geez. I've been trying to learn d3 for a blog post and holy shit is it impossible to analyze. So much obfuscation. I might liken raw HTML SVG info to machine code and d3js to assembly. It's pretty nasty.
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?
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?
yes d3.js is kind of an assembly for visualization and it's fine like that.
But honestly, I don't see how those 2 lines
But honestly, I don't see how those 2 lines
.on('mouseover', this.rolloverOn(args))
.on('mouseout', this.rolloverOff(args));
> I feel like a scatterplot highlight should be the easiest god damn thing ever.
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 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
This does look like where they are generating the mouseover/highlight regions for the multi-line graphs. And the highlight regions for the scatterplot are being done here
https://github.com/mozilla/metrics-graphics/blob/master/js/m...
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
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
Hi - author here. Yes, we use Voronoi + clipPaths to make these kinds of rollovers possible.
It would be interesting to see the performance characteristics between
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 shortestNot sure if I'm misreading your step 2 description for the first strategy, but one of the great things about using this type of mouseover region is that each polygon is already tied to a single point - so there's no need to do any query for contained points on mouseover. The lookup time for contained points is constant.
How do go from cursor coordinates to a polygon? Once you've done that, finding the the associated point in the scatter plot should be constant, but mapping from cursor to polygons in faster than linear time seems non-trivial.
k-d trees sound closer to what you'd want to do cursor coordinates to scatter plot point lookups.
k-d trees sound closer to what you'd want to do cursor coordinates to scatter plot point lookups.
You are correct. It does that for the multi-line graphs as well.
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...
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...
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/
[7]: http://bost.ocks.org/mike/circles/
[8]: https://github.com/mbostock/d3/wiki/Tutorials