Plottable 101: Easy Chart Components in JavaScript

Philosophy

Each arrow points to a component primitive; the blue boxes are higher-order components. Taken from the PlottableJS.org Examples

A Really Simple Chart

var data = [
{ hoursStudied: 1, testScore: 1 },
{ hoursStudied: 2, testScore: 3 },
{ hoursStudied: 3, testScore: 2 },
{ hoursStudied: 4, testScore: 4 },
{ hoursStudied: 5, testScore: 3 },
{ hoursStudied: 6, testScore: 5 }
];
var dataSet = new Plottable.Dataset(data, { name: "Test Scores" });
// Have to use the .data() setter-method
dataSet.data(newData);
// This mutation _won't_ trigger updates to our components
newData.push({ hoursStudied: 0, testScore: 1 });
var plot = new Plottable.Plots.Line();
plot.addDataset(dataSet);
var xAccessor = function(datum, index, dataset) {
return datum.hoursStudied;
};
// TODO: add a Scale
plot.x(xAccessor, __SCALE__);
var xScale = new Plottable.Scales.Category();
plot.x(xAccessor, xScale);
var yScale = new Plottable.Scales.Linear();
var yAccessor = function(datum, index, dataset) {
return datum.testScore;
};
plot.y(yAccessor, yScale);
plot.renderTo("svg#example");
Baby’s first Plottable chart

Adding Details

var xLabel = new Plottable.Components.AxisLabel("Hours Studied");
var yLabel = new Plottable.Components.AxisLabel(
dataSet.metadata().name, 270
);
var table = new Plottable.Components.Table([
[yLabel, plot],
[null, xLabel]
]);
table.renderTo("svg#example");
Our revised plot, with 200% more labels (that’s how percentages work, right?)
var xAxis = new Plottable.Axes.Category(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");
var table = new Plottable.Components.Table([
[yLabel, yAxis, plot],
[null, null, xAxis],
[null, null, xLabel]
]);

Overlaying Plots With Groups

var studentData = [
{ hoursStudied: 1, students: 10 },
{ hoursStudied: 2, students: 12 },
{ hoursStudied: 3, students: 15 },
{ hoursStudied: 4, students: 7 },
{ hoursStudied: 5, students: 3 },
{ hoursStudied: 6, students: 2 }
];
var studentDataSet = new Plottable.Dataset(data,
{ name: “Students” }
);
var yStudentsScale = new Plottable.Scales.Linear();
var yStudentsAxis = new Plottable.Axes.Numeric(yStudentsScale,
"left"
);
var yStudentsLabel = new Plottable.Components.AxisLabel(
studentDataSet.metadata().name,
270
);
var barPlot = new Plottable.Plots.Bar();
barPlot.addDataset(studentDataSet);
barPlot.x(function(d) { return d.hoursStudied; }, xScale);
barPlot.y(function(d) { return d.students; }, yStudentsScale);
barPlot.attr('opacity', 0.3);
var group = new Plottable.Components.Group([ barPlot, plot ]);
var table = new Plottable.Components.Table([
[yLabel, yAxis, group, yStudentsAxis, yStudentsLabel],
[null, null, xAxis, null, null],
[null, null, xLabel, null, null ]
]);

The Road Goes Ever On

--

--

--

Engineering @Opendoor

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Clay Allsopp

Clay Allsopp

Engineering @Opendoor

More from Medium

JavaScript Simplified — Data Types

JavaScript Date Formatting Strings with D3

Use dynamic CSS class names along with global classes using Webpack in React JS

Using Map, Find , Filter function in Javascript