Joyplot

In this tutorial we recreate the famous Joy Division cover for their Unknown Pleasures album.

Data

Data is available thanks to Borgar Þorsteinsson and Michael Zöllner.We load it using the Fetch API and transform it into a set of plottable data. Each line becomes a separate curve and the indices of the numbers will be the X coordinates.

const URL = 'https://gist.githubusercontent.com/synesenom/0c2e98a34b548d9fcb9fdf0f76dc79ff/raw/psr_b1919_p21.csv'

(async () => {
  // Fetch our data.
  const raw = await fetch(URL)
    .then(response => response.text())
  const data = raw.split('\n')
    // Each line is a single plot with the indices as X values.
    // We also apply a small shift between each curve. The value
    // 100 is added to ensure we only have positive numbers.
    .map((d, i) => ({
      name: `line${Math.floor(i / 10)}${i % 10}`,
      values: d.split(',')
        .map(parseFloat)
        .map((y, x) => ({
          x,
          y: 0.3 * y - i + 100
        }))
    }))
})()

Now we have an array of 80 curves. Good news is that with the transformation we already did the mostwork and now we just have to add a single plot.

The plot

Since each curve should cover the previous one, we use an AreaChart.As we noted before, the data is prepared in a way that we can pass it directly to the chart as it is and once we hide the axes and display none of the ticks we are done.

dalian.AreaChart('lines', '#chart')
  .data(data)
  .width(parseFloat(d3.select('#chart').style('width')))
  .height(parseFloat(d3.select('#chart').style('padding-bottom')))
  .margins(50)
  .color.palette('#fff')
  .lineColor('#000')
  .opacity(1)
  .leftAxis.hideAxisLine(true)
  .leftAxis.hideTicks(true)
  .leftAxis.values([])
  .bottomAxis.hideAxisLine(true)
  .bottomAxis.hideTicks(true)
  .bottomAxis.values([])
  .render()

And that was it, we have our own version of the famous Unknown Pleasures cover in about 30 lines ofcode!

Final script

Here you can download the full working example as a stand-alone HTML file.