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:
- target
CSS selector of the target div, e.g.'#plotTarget' - data
Numerical data in the following form (unless noted otherwise),[{x: 1, y: 3.4}, {x: 2.3, y: 13} ...] - config [optional]
Optional configuration, explained in examples and in the end.
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.
{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.
{smoothing: true} is set by default in
this case.
Scatter plot
Scatter plot has similar API
new tufte.ScatterPlot('#target-div', data)
{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.
{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
axismargin 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.