As I usually point out when D3 libraries come up, using a library like this will only get you so far. It's amazing how many feature requests are sprinkled throughout the comments here, and every one of them would be trivial changes if you're working with the underlying D3 principles.
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].
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.
+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 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.
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.
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.
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.
+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).
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).
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.
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.
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 ;)
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.
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.
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.
> 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?
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
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.
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.
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.
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.
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.
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?
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.
[+] [-] couchand|11 years ago|reply
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
[+] [-] hamilton|11 years ago|reply
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.
[+] [-] jjguy|11 years ago|reply
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!)
[+] [-] capkutay|11 years ago|reply
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.
[+] [-] namuol|11 years ago|reply
[+] [-] thomasfl|11 years ago|reply
Just let it be said: there's definitely room fore even more libraries built on top of D3.
[+] [-] dirtyaura|11 years ago|reply
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.
[+] [-] ryanmarsh|11 years ago|reply
[+] [-] eric_bullington|11 years ago|reply
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/
[+] [-] maelito|11 years ago|reply
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).
[+] [-] nacs|11 years ago|reply
Also, an easy way to customize all styling, tick intervals and min-max ranges would be good.
[+] [-] aw3c2|11 years ago|reply
[+] [-] nawitus|11 years ago|reply
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.
[+] [-] hamilton|11 years ago|reply
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.
[+] [-] foxpc|11 years ago|reply
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 ;)
[+] [-] hamilton|11 years ago|reply
[+] [-] Ecio78|11 years ago|reply
[+] [-] reduce|11 years ago|reply
[+] [-] pessimizer|11 years ago|reply
[+] [-] petepete|11 years ago|reply
http://c3js.org
[+] [-] orthecreedence|11 years ago|reply
[+] [-] findjashua|11 years ago|reply
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.
[+] [-] ryanmarsh|11 years ago|reply
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?
[+] [-] kordless|11 years ago|reply
[+] [-] cfontes|11 years ago|reply
Nice to hear that, I am looking at some right now...
What would you recommend for maximum compatibility? (IOS, Android, Browsers) ?
[+] [-] pachydermic|11 years ago|reply
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.
[+] [-] datashovel|11 years ago|reply
[+] [-] reduce|11 years ago|reply
[+] [-] hamilton|11 years ago|reply
[+] [-] ollybee|11 years ago|reply
[+] [-] gingerlime|11 years ago|reply
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/
[+] [-] katabatic|11 years ago|reply
Standard disclaimer - I'm the author of Tessera.
[+] [-] victorin|11 years ago|reply
[+] [-] crudbug|11 years ago|reply
[1] https://github.com/fastly/epoch/ [2] http://code.shutterstock.com/rickshaw/ [3] http://square.github.io/cubism/
[+] [-] pstuart|11 years ago|reply
[+] [-] grayclhn|11 years ago|reply
[+] [-] germanforblack|11 years ago|reply
:thumbsup: Looks really great
[+] [-] d--b|11 years ago|reply
[+] [-] alphahelix|11 years ago|reply
[+] [-] ckluis|11 years ago|reply
[+] [-] romansanchez|11 years ago|reply
[+] [-] darkmarmot|11 years ago|reply
[+] [-] hamilton|11 years ago|reply
Make an issue on github and we'll get to it soon: https://github.com/mozilla/metrics-graphics/issues
[+] [-] hackerews|11 years ago|reply
[+] [-] wildbunny|11 years ago|reply
[+] [-] bronson|11 years ago|reply
[+] [-] hamilton|11 years ago|reply