Using Datawrapper to Embed Tables and Charts on Substack
I bemoaned the lack of table and chart options natively in Substack until I came across Datawrapper.
I recently migrated my entire personal web site to Substack. Along the way, I found myself struggling with how to handle a few of my pages that had tabular data. That’s where Datawrapper entered the picture.
My main page about running has a chart and a table, and I also have a table at the bottom of my triathlon pages. These tables help serve as navigation, but they also help me view my performance over time without having to go to a lot of different pages. They’re fully interactive, too – you can sort and filter the table, for example, to find exactly what you’re looking for.
So how does it work?
When you sign into Datawrapper and create a new visualization, you can select a chart, map, or a table. I haven’t played with map-based data yet, but really want an excuse! The first step is to upload your data, either by copy/pasting or uploading an Excel or CSV file (good if you don’t need to update it often), linking to external data, or connecting to a Google Sheet. I used a Google Sheet, since my data will be updating periodically.
Then, you can select the type of visualization you want to create. Notice that you can switch between table (the last option) and charts here.
When you’re customizing a table or chart, there are a ton of formatting options. I recommend embracing a spirit of play here! When you make changes, there’s a preview window that shows you exactly how it’ll look. For tables, you have options to show/hide columns, sort columns, re-order columns, and add a heat map for specific data.
The most useful feature for my use case was employing markdown to turn a column’s data into a link. I wanted to use my table not only to convey tabular data, but to serve as a navigation index to my race reports. The first step is to check the box labeled Parse markdown at the top of the customization section. The tooltips do a great job telling you more about what a feature does, too.
The linkable portion of my table is the title of each race, turned into a link using the permalink from the Substack post for that event. Here’s how I used markdown in the Google Sheet:
Column A – text of the event title
Column C – permalink of the Substack post
Column E – a formula that creates the markdown
Column E is the column that I show in the Datawrapper table, and I hide Columns A and C. Feel free to copy the formula below. What it basically says is that if the permalink is not blank, create markdown that wraps the event title with the permalink using markdown’s [title](link) syntax. Otherwise, it’s just the title.
=IF(C33<>"","["&A33&"](https://scottpdawson.substack.com/p/"&C33&")",A33)Publish Your Visualization
Once you’re happy with your visualization, it’s time to publish it! Here’s how mine looks after I’ve published it.
That last option in the screenshot is what you want to paste into Substack. It’ll convert the link into the visualization, and once you’ve done that, you never have to touch it again.
Updating Your Visualization
Whenever you need to update the visualization, go into Datawrapper. Navigate the last tab, after validating that the visualization picked up your data changes, and click Republish.