tufte.js

Tufte style minimal plots for the browser.

Tufte style plots for the browser. Inspired by Tufte in R. The plots here are not exhaustive and more plots will be added as I feel need for them.

The idea is to create an ultra minimal library for simple visualizations. At places, I have relied on the possibility of interactiveness to deviate from the usual Tufte style which helps in removing more ink. In case some of the required data ink is missing, its because either they are in plan or I have actually missed them or they are better suited to a visualization apt for small data, like a table.

This project is not associated with Edward Tufte and is purely an opinionated take on his visual style.

Getting started

tufte.js is a D3 based library. To use it, download the source from here and include the following snippet in your html document. Its also available on npm here.

<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="./dist/tufte.js"><script>

The API is simple and most of the charts need 3 arguments, in the following order:

Line plot

A basic line chart can be plotted using the following snippet

new tufte.LinePlot('#target-div', data)

In case of less data points, the y-axis is skipped and circles with on hover tooltip are displayed for plotted points.

A simple line plot with on hover tooltips for points. This uses extra config parameter {label: {x: 'text'}} for setting the x axis label.

When there are lots of points, the circles are not drawn and y axis is displayed.

Optional parameter {smoothing: true} is set by default in this case.

Scatter plot

Scatter plot has similar API

new tufte.ScatterPlot('#target-div', data)
Optional parameter {tickType: {x: 'quartile', y: 'quartile'}} provides quartile tick labels on both axes here.

A more useful way to plot scatter is to set marginal = true in config. This plots the marginal values along the axes ticks.

Optional parameter {marginal: true} is set here.

Chart Options

Optional parameters specified below can be overridden by passing to the plot constructor.

width, height (integer)
Width and height for the plot.

margin.[top|bottom|left|right|axis] (integer)
Margins. The axis margin is between drawing area and axis

dotLinePlot (boolean)
Whether to draw circles on line plot

label.[x|y] (string)
Label for the axis

scaleType.[x|y] (string)
Scale type for axis. "linear" (default), "log" or "time". "time" disables "tickType" property.

tickType.[x|y] (string)
Type of ticks to show. "plain" (default) or "quartile"

marginal (boolean)
Whether to show marginal values in scatter plots. False by default.