A sparkline is a very small chart that shows a value change over some controlling factor, usually time. Sparklines typically do not have axes or labels, and should be self-explanatory given the context of the sparkline.

This is an example sparkline. It is a small graphical object, in the body of the page. It is meant to help narrate a story that your data is trying to tell. Creating this sparkline is quite easy.

const sparkline = (container, data, options) => {
    const defaults = {
        scale: {
            x: d3.scaleLinear(),
            y: d3.scaleLinear()
        size: [100, 40],
        style: {
            stroke: "rgb(60, 120, 240)",
            strokeWidth: 1
        value: {
            x: d => d[0],
            y: d => d[1]

    // Apply defaults to the given options.
    options = $.extend(true, defaults, options);

    // Add an SVG object to the given container.
    let svg = d3
        .classed("sparkline", true)
        .classed("sparkline-svg", true)
        .attr("width", options.size[0])
        .attr("height", options.size[1]);

    let g = svg
        .classed("sparkline", true)
        .classed("sparkline-group", true);

    let xScale = options.scale.x.range([0, options.size[0]]).domain(d3.extent(data, options.value.x));

    let yScale = options.scale.y.range([options.size[1], 0]).domain(d3.extent(data, options.value.y));

    // Create the line generator function.
    let line = d3
        .x(d => xScale(options.value.x(d)))
        .y(d => yScale(options.value.y(d)));

    // Finally, draw the path object.
    let path = g
        .classed("sparkline", true)
        .classed("sparkline-path", true)
        .attr("d", line)
        .style("fill", "none")
        .style("stroke", options.style.stroke)
        .style("stroke-width", options.style.strokeWidth);

    return path;

A copy of this code is available in Github. Now, go forth and visualize!