metricsgraphics / metrics-graphics

A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce common types of graphics in a principled and consistent way. The library currently supports line charts, scatterplots and histograms, as well as features like rug plots.

Example

All you need to do is add an entry node to your document:

<div id="chart"></div>

Then, use the id to mount the chart:

import LineChart from 'metrics-graphics'

new LineChart({
  data, // some array of data objects
  width: 600,
  height: 200,
  target: '#chart',
  area: true,
  xAccessor: 'date',
  yAccessor: 'value'
})

That's it!

The raw data for this example can be found here

Documentation

If you want to use MetricsGraphics, you can find the public API here.

If you want to extend MetricsGraphics, you can read up on the components and utilities.

Development Setup

This project uses Yarn Workspaces. Please make sure that Yarn is installed.

# clone and setup
git clone https://github.com/metricsgraphics/metrics-graphics
cd metrics-graphics
yarn install

Run both the development setup of the library and the development setup of the examples

# inside packages/lib
yarn dev

# inside packages/examples
yarn dev

metrics-graphics's Issues

allow the adding of classes / ids to the overall svg

given that styling is often done in a css file, it might pay to allow users to add an id to a chart so they can individually reference the chart in the css file. This will allow custom styling via css.

Remove hard-coded release data, and replace with an args.markers object

At least for a lot of Firefox-related charts, we want version markers. Other projects may need different marker. Currently these are all hard-coded to just be ff versions. Needs to be separate.

args.markers should probably look like [{'date': date obj, 'label':'this is a lable'},...] and so on. If the argument exists, then show the markers. If not, don't.

design x axis to also support non-date ranges

For the first release we focused primarily on date ranges, since most of what we're doing is visualizing time series. We should have additional functionality for non date ranges.

Add option for axis units

It would be nice to be able to infer units, but otherwise, perhaps add a new argument to moz_chart.

Change type arg to format (for distinguishing between %, numbers and so on)

change from args.goals to arbitrary horizontal lines w/ labels

Implement as either args.baseline or args.horizontal_markers

Add a new arg for whether the year should be shown on the x-axis

Make this an installable Bower package

(A future feature request as someone looking forward to using this)

It would be great if we could make this a Bower package for easy installation and updating in external projects.

• http://bower.io
• http://bower.io/#defining-a-package

X, Y axes don't cover the entire length or height of the chart

@hamilton Is that by design?

Clean up code and styles

Remove redundant 'link' argument

Move styling args from js to css

Move stylesheet links to header

I figured it would look better this way, though see what you think.

Use github's release functionality to control versioning

Github contains this functionality and we haven't done anything with it. We probably should for the next milestone.

add bootstrap section designs to examples

We want to show two different sections: the torso view (three graphs or so above the fold) and the section views (containing finer-grained data, with a briefing section).

add multiple lines to moz_chart

Currently the function only supports a single time series.

Don't assume json is 2d array

Increase y-axis ticks from 4 to 5

Create presentation layouts

We need to have a few different canned presentation types. For instance, we will often be in the position of having a handful of small multiples to present in a section, or a full-screen report-style graph. Having some design ideas in mind for this would be very useful.

Settling on setting ids / classes for different graph elements

With some graphics, when one rolls over a date, we may want similar triggers to fire for other graphs for the same date. Currently id / class naming conventions to achieve this are not being met.

This is especially useful for the crafting of numerous small multiples, where rolling over one point might also cause rollover effects on a number of others.

Furthermore, there is no way to say that one WANTS a set of graphs to be linked in their rollover behavior.

Remove Underscore.js dependency

Rather than adding n circles to the dom, add just one and change coords on mouse-over

Add an option to switch color scheme from light to dark

update readme.md

Add a new 'link' arg to determine whether data points should be linked across charts

{true, false} links across all charts
string links across all charts with same link literal

Create a documentation page

This should include how to make basic charts, how things are organized, and how to extend the library such that we'll actually accept pull requests.

Add histogram

We need to have time series bar charts for the situations that call for them.

This should primarily be making a new mainPlot, and figuring out how the rolloverOn/Off changes for this graphic type.

Enable rollover on multiple lines in multiple line chart

Make charts responsive so that they look good in mobile

create charts.missing

this will add a div that shows that a chart is missing or coming soon

Add bootstrap popovers for titles, along with visual question mark cue

This is for providing further explanation of something in a chart.

Replace chart title question mark with glyph

Tooltip (value, date) disappears when mouse is over circle

Change cursor to pointer when chart titles are moused-over

Take out data formatting code from metrics-graphics.js

We're currently assuming that dates are not timestamps and hence convert them in init(). Moving to main.js.

validate the x and y limit setting in args

We should be allowed to say what the x and y scales should have as their min or max, and of course automatically calculate those if no value is provided

Remove redundent bootstrap css from our stylesheet

Cache the data for each chart on a page

We should have it so that if two charts are linked, then the rollover in one triggers the rollover in the other.

have color of area part of chart changeable

add links for code & issues

Add quantile chart

This is a time series visualization designed to track quantiles over time. I have the code for this separately in another project, and need to port it over to metrics-graphics.

change axis text size for smaller-width graphs

The x-axis labels and markers could stand to be slightly smaller for smaller-width graphs, for the sake of feeling the clutter.

Currently I'm finding width=150 to be a good candidate for the threshold.

We may also play with the number of ticks as well on the y-axis.

move style.css to metrics_graphics.css

Make repo public?

A few people have asked whether we could make the repo public. I think that it's a good idea, though see what you think.

Make area part of line chart optional

This should be handled in the moz.defaults.all object. By default let's leave the blue area available on single line charts, and off for multiple line charts.

Separate constituent elements of the moz_chart function into the new object-based approach

Currenty moz_chart has a bunch of different somewhat-procedural chunks of code. When we add more chart types, it would make sense to abstract these just one level up so we can more easily reuse code & have things be readable. For instance, we will likely use the same axes for lots of different charts, but the rollover logic & data mapping will be fundamentally different. We'll have these:

var charts = {};
charts.line = {
  init: function(){}, \\ makes scales
  x_axis:function(){}, \\ draws x
  y_axis:function(){}, \\ draws y
  main_plot:function(){}, \\  draws the actual graphed elements
  rollover:function(){},  \\  draws whatever invisible rollover elements
  on:function(){},  \\ handles on rollover
  off:function(){}, \\ handles off rollover
  defaults:function(){} \\ has various defaults from whatever those are

create rollover callbacks

I'm thinking of a callback function that takes the data point being rollover'd, and does something with it according to the user's wishes:

function(d){
      $('div#some_div').html(d);
}

This could be useful in many contexts where someone wants additional rollover effects outside of the default behavior, especially if it is outside of the svg element of interest.

change name of moz_chart to something a little more generic

Given that this is a public repo now, would make sense to probably think about making any reference to Mozilla more generic, explicitly.

Move chart titles to the .json file rather than hard-coding

On mouse over data is one day ahead