MetricsGraphics.js – D3-based library optimized for visualizing time-series data

by bog-bog-bog • 12 years ago

380 76 12 years ago

kordless• 12 years ago

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

cfontes• 12 years ago

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) ?

watty• 12 years ago

IMO, HighCharts is still the best for flexibility and aesthetics.

ckluis• 12 years ago

I like opinionated libraries like this with sensible options.

ollybee• 12 years ago

Can't wait to see a graphite front end based on this.

victorin• 12 years ago

gingerlime• 12 years ago

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/

katabatic• 12 years ago

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.

wildbunny• 12 years ago

Cool, but needs candlesticks!

bronson• 12 years ago

The confidence band example comes close. Might work until real candlesticks are implemented.

hamilton7• 12 years ago

Hi - yep, certainly on the horizon.

crudbug• 12 years ago

Neatly done ! Pushing 3 more:

[1] https://github.com/fastly/epoch/ [2] http://code.shutterstock.com/rickshaw/ [3] http://square.github.io/cubism/

pstuart• 12 years ago

And a nice packaged solution: http://grafana.org/

misaelm• 12 years ago

I really like grafana but unlike the parent's suggestions, it uses Flot not D3 as the charting backend.

kurtfunai• 12 years ago

These look fantastic! I will definitely be using this library in the future.

pachydermic2• 12 years ago

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.

datashovel• 12 years ago

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.

pachydermic2• 12 years ago

Sound idea - thanks!

eric_bullington3• 12 years ago

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/

maelito• 12 years ago

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).

eric_bullington3• 12 years ago

Very nice! React components are really the perfect level of abstraction for a chart library.

nacs2• 12 years ago

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.

eric_bullington3• 12 years ago

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.

aw3c2• 12 years ago

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).

foxpc• 12 years ago

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 ;)

reduce2• 12 years ago

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.

petepete• 12 years ago

c3js does pie and donut charts

http://c3js.org

pessimizer• 12 years ago

Have you tried out http://nvd3.org/ ?

hamilton7• 12 years ago

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.

Ecio78• 12 years ago

Some people say that pie charts are bad ;) https://www.stevefenton.co.uk/Content/Pie-Charts-Are-Bad/

hackerews• 12 years ago

Not too shabby. Check out dygraphs for some inspiration. Lots of powerful features and handles huge datasets.

nawitus• 12 years ago

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.

hamilton7• 12 years ago

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.

_almosnow• 12 years ago

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.

forrestthewoods2• 12 years ago

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?

bengali32• 12 years ago

https://github.com/mozilla/metrics-graphics/blob/master/js/m... possibly

kirkbackus• 12 years ago

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...

darkmarmot2• 12 years ago

I would love to use this -- I just wish it had a stripped down version without the dependencies: especially no bootstrap....

hamilton7• 12 years ago

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

darkmarmot2• 12 years ago

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)

reduce2• 12 years ago

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.

hamilton7• 12 years ago

Hi - we've actually talked about a number of implementation ideas for this, and probably should add a github issue for this.

d--b• 12 years ago

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?

couchand2• 12 years ago

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].

[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

namuol2• 12 years ago

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.

couchand2• 12 years ago

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.

coldtea• 12 years ago

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.

jjguy• 12 years ago

+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!)

dirtyaura• 12 years ago

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.

ryanmarsh2• 12 years ago

+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.

hamilton7• 12 years ago

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.

capkutay• 12 years ago

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.

thomasfl• 12 years ago

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.

cosud• 12 years ago

what about a live data option ? That's the one feature of highcharts I use the most.

applecore• 12 years ago

Looks great, but Highcharts is still way ahead for visualizing time series data.

Highcharts: http://www.highcharts.com/

alphahelix• 12 years ago

This seems to offer a small subset of the functionality of plottable.js

findjashua2• 12 years ago

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.

ryanmarsh2• 12 years ago

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?

findjashua2• 12 years ago

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!

orthecreedence• 12 years ago

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.

orion138• 12 years ago

where does this fit between rickshaw and flot?

romansanchez• 12 years ago

Couldn't find in the docs. Does this support epoch timestamps? Does it support more granular x-axis ticks, eg hours, min, sec?

grayclhn• 12 years ago

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.)

hijinks• 12 years ago

oh wow.. i'd love to see an addition to this for tessera.

germanforblack• 12 years ago

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

MetricsGraphics.js – D3-based library optimized for visualizing time-series data

Related Stories