How to recreate our charts without code
One of the most common questions we get at The Pudding is some variation of “How did you make that?” or “What tools or programs did you use?”
I love getting these types of questions because they are prompted by excitement and inspiration. But, then when we answer them — usually with something like “all of our projects are coded from scratch” — you can immediately feel the creative spark dim and deflate.
While the type of projects we publish at The Pudding require a lot of technical skill, the individual pieces of them aren’t as intimidating or insurmountable as you think.
I’m going to walk you through no-code examples of how to make some of the charts from our latest pieces.
Strip Plot
As seen in They Won’t Play a Lady-O on Country Radio
I’ll often end up making no-code charts as the last step of a project when I’m converting what we’ve built in code to work in a social media post. But, this strip plot originally started out in a spreadsheet, and that informed what I wanted to do in code. If you’re interested in making charts in spreadsheets, check out PolicyViz’s Jonathan Schwabish, who is pushing the limits of what you can do in Google Sheets and Excel.
Tools used
- CODE:Svelte, D3.js, Canvas
- NO CODE:Google Sheets/Excel/other spreadsheet software
The chart
No Code
Code
How-To Video
Bubble Chart
As seen in Is the Love Song Dying?
When I first started out doing data visualizations, I made a lot of them manually in Illustrator, which meant using the scatter plot tool to create proportional circles and then moving them around by hand to make bubble charts. Extremely hacky and terribly inefficient, but hey, it got the job done! Luckily, today there are charting tools like Datawrapper and Flourish that make it a lot easier to whip up interactive and responsive bubble (and other!) charts. Our team uses these tools to build rapid prototypes and export SVG charts for further refinement.
The chart
No Code
Code
How-To Video
Stacked Bars
As seen in Who Gets Shipped and Why?
The Pudding is known for scrollytelling, where graphics animate in place as you scroll down the page. Russell built a library for it (Scrollama) and created a component for it in our Svelte starter template. But, you don’t need to know how to code to pull off the same effect — you can do it in consecutive social images (like this, modeled after this), or by building a tapper story in Flourish (like this). Note: if you have a Publisher or Enterprise license for Flourish you can make scrollytelling stories.
The chart
No Code
Code
How-To Video
Bar Chart Grid
As seen in Colors of the Court
Bar charts often get dismissed as “basic” — they’re just rectangles, right? But, in this case, “just rectangles” works to our advantage. Using Figma’s auto layout feature, you can quickly make complex grid layouts that are perfect for making box-based charts: bar charts (like this), waffle charts, pictograms, treemaps, strip plots, heatmaps, etc. I’ve even used it to make dot plots before! You can also check out chart plugins for Figma, including Datavizer, built by our former colleague Amelia Wattenberger.
Assets
The chart
No Code
Code