Compost.js: Composable data visualization library

Compost is a data visualization library that lets you compose rich interactive data visualizations from a small number of basic primitives. The library is based on the functional programming idea of composable domain-specific languages. Compost is simple (implemented in just 700 lines of code) and easy to understand. Compost is a plain JavaScript library. You use it by writing JavaScript code that generates a chart using some 15 basic Compost primitives.

Compost in 10 lines of code

The following example is a line chart showing the GBP/USD exchange rate around 23 June 2016. An interesting feature is that the chart highlights a part before the date using one color and the part after the date using another color.

In Compost, we create the chart by composing three chart elements using c.overlay. The three chart elements are two rectangles constructed using c.shape and one line constructed using c.line. Results of those functions are chart elements that can be further transformed using functions such as c.fillColor and c.strokeColor that change the color of the element.

// Exchange rate range for the background
let lo = 1.25, hi = 1.52;

// Overlay three shapes and add axes on three sides
let xchg = c.axes("left right bottom", c.overlay([
  // Fill area behind first 16 values in blue
  c.fillColor("#1F77B460",  c.shape(
    [ [0,lo], [16,lo], [16,hi], [0,hi] ])),
  // Fill area behind the remaining values in red
  c.fillColor("#D6272860",  c.shape(
    [ [gbpusd.length-1,lo], [16,lo], [16,hi], [gbpusd.length-1,hi] ])),
  // Draw a black line using 'gbpusd' array
  c.strokeColor("#202020", c.line(, i) => [i, v])))

// Render chart on <div id="demo" />
c.render("demo", xchg)

The example illustrates two key ideas of Compost:

Learn more about Compost