Hi, Elana here. At Datawrapper, I’m typically found on the other end of our firstname.lastname@example.org inbox, helping you with all your charting, mapping and data-wrangling questions.
Today however, I’m using Datawrapper in a way I wouldn’t typically ever find myself advising anyone, to recreate a photograph.
For those who missed it, this isn’t the first time I’ve misused Datawrapper for generative art. Previously I recreated Vermeer’s ‘Girl with a Pearl Earring’ as a scatterplot, and reincarnated Audrey Hepburn as a split bar chart.
Of course, Datawrapper is great for creating charts (and maps), but it certainly wasn’t designed as a tool for drawing pictures. Being forced to play by Datawrapper’s rules means coming up with increasingly unintuitive ways of transforming an image into a Datawrapper-friendly dataset.
Today’s victim: The Line Chart
What’s going on here?
Each line represents a row of pixels in the original image. The lines are essentially ‘waves’, the size (amplitude) of which varies according to the brightness of the original image at that point.
The datapoints themselves are only at the peaks, troughs and ‘baseline’, Datawrapper does the work of drawing the lines between the points for me:
Bigger wave = more ‘ink’. And voila, the eye perceives a darker area.
Or if you prefer it in maths, each line is described by this equation (calculated only for 45 degree intervals):
y = y0 + amplitudeMax * (1 - brightness) * Math.sin(x*frequency)
Generating the dataset
For my previous chARTwork, generating the dataset was a lengthy process of:
- Editing the image in Photoshop
- Reducing the resolution
- Using Processing to write a little script that loops over the image pixels, and extracts the brightness of each pixel and generate the required CSV.
If you want to generate a dataset like this from your own image, you can do so here.
Making The chart
Once I had my dataset, I just pasted it into Datawrapper, and made a few small tweaks:
I inverted the vertical axis using a custom range (so that it would go from low to high)
I customized the lines, to give them all the same color:
And finally, I added a range highlight, typically used to draw attention to an important bit of your data. In this case, just because I thought a background would look pretty.
And that’s it! If you want to check out the chart in Datawrapper for yourself, hover over the chart and click Edit this chart!
Hope you enjoyed, until next time!
p.s. Shoutout to John Preston, who inspired me to create that little tool for turning images into datasets!