
MetricsGraphics.js – D3-based library optimized for visualizing time-series data - bog-bog-bog
http://metricsgraphicsjs.org
======
couchand
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/](http://bost.ocks.org/mike/bar/)

[1]: [http://bost.ocks.org/mike/join/](http://bost.ocks.org/mike/join/)

[2]:
[http://bost.ocks.org/mike/selection/](http://bost.ocks.org/mike/selection/)

[3]:
[http://bl.ocks.org/mbostock/3808218](http://bl.ocks.org/mbostock/3808218)

[4]: [http://bost.ocks.org/mike/nest/](http://bost.ocks.org/mike/nest/)

[5]:
[http://bost.ocks.org/mike/constancy/](http://bost.ocks.org/mike/constancy/)

[6]:
[http://bost.ocks.org/mike/transition/](http://bost.ocks.org/mike/transition/)

[7]: [http://bost.ocks.org/mike/circles/](http://bost.ocks.org/mike/circles/)

[8]:
[https://github.com/mbostock/d3/wiki/Tutorials](https://github.com/mbostock/d3/wiki/Tutorials)

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

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

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

------
eric_bullington
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/](http://esbullington.github.io/react-d3/)

~~~
maelito
Here's a horizontal bar chart that could complete your examples.
[https://github.com/laem/react-horizontal-bar-
chart](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_bullington
Very nice! React components are really the perfect level of abstraction for a
chart library.

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

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

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

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

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

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

~~~
ryanmarsh
> 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?

~~~
findjashua
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!

------
kordless
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](http://metricsgraphicsjs.org/interactive-demo.htm)

~~~
cfontes
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
IMO, HighCharts is still the best for flexibility and aesthetics.

~~~
pablobaz
Just a quick plug for my angular directive for highcharts
[https://github.com/pablojim/highcharts-
ng](https://github.com/pablojim/highcharts-ng)

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

~~~
pachydermic
Sound idea - thanks!

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

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

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

~~~
gingerlime
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](https://github.com/kenhub/giraffe) [1]
[http://code.shutterstock.com/rickshaw/](http://code.shutterstock.com/rickshaw/)

------
crudbug
Neatly done ! Pushing 3 more:

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

~~~
pstuart
And a nice packaged solution: [http://grafana.org/](http://grafana.org/)

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

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

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

------
d--b
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?

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

------
ckluis
I like opinionated libraries like this with sensible options.

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

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

~~~
hamilton
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](https://github.com/mozilla/metrics-graphics/issues)

~~~
darkmarmot
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)

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

------
wildbunny
Cool, but needs candlesticks!

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

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

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

Highcharts: [http://www.highcharts.com/](http://www.highcharts.com/)

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

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

------
orion138
where does this fit between rickshaw and flot?

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

~~~
forrestthewoods
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?

~~~
bengali3
[https://github.com/mozilla/metrics-
graphics/blob/master/js/m...](https://github.com/mozilla/metrics-
graphics/blob/master/js/metricsgraphics.js#L1264) possibly

~~~
forrestthewoods
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?

~~~
bengali3
> 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](http://bl.ocks.org/mbostock/d8e15a0ab7f85818a5bd)
or this:
[http://bost.ocks.org/mike/shuffle/](http://bost.ocks.org/mike/shuffle/)

Edit: a must see are the creations from the man himself. Mike Bostock
[http://bl.ocks.org/mbostock](http://bl.ocks.org/mbostock)

