state of the chart:

d3 charting libraries in january 2015,

a short, personal and incomplete survey

Anna Powell-Smith    http://anna.ps    @darkgreener

so many charting libraries

soooooooooooooo many

which?

why?
what next?

1. which

d3 libraries i looked at

• nvd3
• c3
• dc
• plottable (palantir)

d3 libraries i didn't look at

• xcharts (not actively developed)
• rickshaw (not actively developed)
• polycharts ($$$)
• dimple (only one active dev)
• raw (really an exploratory/design tool)
• epoch (focussed on realtime data) 

post-talk note: lots of love for dimple at the meetup, especially for analysis - should check this out

d3 libraries i didn't look at

• metricsgraphics by mozilla (looks interesting, but i ran out of time)
• vega (interesting, but perhaps more theoretically right now)

and i also didn't look at

• anything deliberately specialist: 
  • network graphs (jsnetworkx)
  • responsive charts (chartist)
  • parallel coordinates (parallel coordinates)
  • large datasets (crossfilter)

and i also didn't look at

• d3 libraries for your favourite javascript mvc: 
  • d3-angular
  • d3-react
  • d3-meteor
  • d3-too-hip-for-you

oh yeah, not that either

• anything not based on d3
• the five d3 chart libraries released since yesterday
• your favourite d3 chart library (sorry about that)

it's a bit overwhelming...

would like to meet...

• sensible philosophy
• open licence
• being actively developed...
• ...ideally by more than one person
• straightforward setup
• supports transitions
• access to underlying d3
• support for writing plugins

we'll look at bar charts in each one

 
nvd3

history is... interesting

• initially developed by a dev at Novus
• he made it open source, but Novus objected
• then they changed their mind
• then they stopped actively developing it when he moved on
• then someone else forked it, then decided they didn't have time to maintain it
• then someone made a community fork

"A reusable chart library for D3"

• Apache licence
• Based on Mike Bostock's "Towards Reusable Charts"
• Begun in May 2013, currently 1.7
• "Reece" now seems to be leading 
• Semi-actively developed
• Documentation split across two sites

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })    //Specify the data accessors.
      .y(function(d) { return d.value })
      .staggerLabels(true)    // Staggering labels.
      .tooltips(false)        //Don't show tooltips
      .showValues(true)       //...instead, show bar value on top of each bar.
      .transitionDuration(350)
      ;

  d3.select('#chart svg')
      .datum(exampleData())
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

pros

• Loads of options
• Mature
• Great that there's now a community project with a clear licence situation

cons

• Documentation not great
• Definitely an 'NVD3 way' - I find it hard to follow
• Is it alive?

 
c3

"D3-based reusable chart library"

• MIT licence
• Begun in May 2013, currently v0.4
• Masayuki Tanaka is lead dev 
• Actively developed
• Active Google Group
• 3,500 GitHub stars

pros

• comfortable - feels familiar
• customisable - wraps the D3 code, extend via D3
• controllable - APIs to interact with chart state

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar'
    },
    bar: {
       width: 100
    }
});

chart.load({
    columns: [
        ['data3', 130, -150, 200, 300, -200, 100]
    ]
});

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar',
        labels: {
            format: {
                y: d3.format("$,")
            }
        }
    },
    bar: {
       width: 100
    }
});

cons

• documentation? (seems excellent to me)
• not many plugins yet (but supported)
• no specific responsive features 
• fewer chart types than nvd3
• mostly one very active developer

 
dc

"Dimensional Charting Javascript Library"

• Apache licence
• Native Crossfilter support
• Started in 2012
• Actively developed (by 2 people!)
• 3,500 GitHub stars

var chart = dc.barChart("#test");
d3.csv("morley.csv", function(error, experiments) {

  experiments.forEach(function(x) {
    x.Speed = +x.Speed;
  });

  var ndx                 = crossfilter(experiments),
      runDimension        = ndx.dimension(function(d) {return +d.Run;}),
      speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;});

  chart
    .width(768)
    .height(480)
    .x(d3.scale.linear().domain([6,20]))
    .brushOn(false)
    .yAxisLabel("This is the Y Axis!")
    .dimension(runDimension)
    .group(speedSumGroup)
    .renderlet(function(chart) {
        chart.selectAll('rect').on("click", function(d) {
            console.log("click!", d);
        });
    });
    chart.render();
});

pros

• mature
• looks stable
• actively developed
• you can do impressive things with crossfilter + dc if you invest the time in learning to use it

cons

• needs upfront investment in learning to use it - imperative approach like nvd3
• documentation isn't brilliant
• probably good if you want to use crossfilter a lot and are willing to invest the time

 
plottable

"Flexible, interactive charts for the web"

• developed by Palantir
• launched at JSConf EU 2014
• MIT licence
• actively developed (not surprising since it's so new)
• "didn't want to use raw D3, and no other library supported interactive drag and zoom"

// Scales
var xScale = new Plottable.Scale.Ordinal();
var yScale = new Plottable.Scale.Linear();

// Plot Components
var title  = new Plottable.Component.TitleLabel("Celebrities");
var yLabel = new Plottable.Component.Label("Height (cm)", "left");
var xAxis  = new Plottable.Axis.Category(xScale, "bottom");
var yAxis  = new Plottable.Axis.Numeric(yScale, "left");
var lines  = new Plottable.Component.Gridlines(null, yScale);
var plot   = new Plottable.Plot.VerticalBar(xScale, yScale)
  .addDataset(data)
  .project("x", "name", xScale)
  .project("y", "height", yScale)
  .animate(true);

// Layout and render
new Plottable.Component.Table([
  [null,    null, title],
  [yLabel, yAxis, lines.merge(plot)],
  [null,    null, xAxis]
])
.renderTo("svg#example");

pros and cons

• nice table layout idea
• actively developed, but on company time
• why'd they build a new library rather than
  extend an existing one?

phew

Y so many?

1. d3 is hard 

    d3 is low-level

2. d3 is finished 

    d3 is stable

3. devs ❤ reinventing the wheel
people are different

4. perhaps because earlier libraries have had a learning curve

what now?

the inconclusive conclusion

1. there have always been lots of chart libraries. that probably isn't going to change

i like c3. but you might not

2. in your toolkit: tools for exploration, for workhorse 
charts, + for one-off designs

tools for exploration

post talk note: people think raw is a great tool for exploration (but lament the lack of bar + line chart support)

"Learn as much as you can about existing tools which help you create standard charts quickly. Especially at the beginning of a project, it is super-important to generate a lot of charts quickly... Personally, I use Tableau and Gephi"

@moritz_stefaner

tools for

workhorse charts

alpha.ons.gov.uk

tools for beautiful

one-off designs

woah, algorithms!

3. maybe evolution is good too, as well as intelligent design?

"Maybe that’s the reason why people are sharing a lot of their work on http://bost.ocks.org/, doing some small experiments, laying down some building block...

...perhaps currently that is the most efficient way of building re-usable chart."

@muyueh on HN

4. more re-use would be a fine thing

how can we encourage re-use?

over to you

(and thanks)