Embed D3js charts in emails
Update: Knowtify shut down a few years ago after getting acquired by Kissmetrics. Since then, a few alternative URL based solutions have popped up. Check out Image Charts if you to add a quick chart to an email.
D3.js is amazing. As a software developer, I get a ton of satisfaction in making D3 data visualizations. It is far less painful than using some graphic design tool like Illustrator and far more powerful than HTML/CSS.
One of the biggest problems I’ve run into with D3 is the desire to take charts where javascript won’t go. At Knowtify, that typically means emails. Not a big deal right? You can just turn your visualizations into static images by running D3 scripts that generate visualizations in your favorite browser, then take screenshots and crop in Photoshop. But what if you want to make hundreds or even thousands of visualizations on a daily or weekly basis? That’s the problem we run into with Knowtify in our pursuit of email personalization. Generating these images manually is just not an option.
We wanted to find a way to easily generate and store these images automatically, and at scale. So we built a solution called Knowtify Charts and decided to open it up to everyone. This is how it works.
- Create a D3 chart (template) and upload it to the web. (it must be publicly accessible)
- Write a script in your language of choice to dynamically generate the data for your chart.
- Have your script ping our API to tell us where your D3 chart is along with a filename and chart variables.
- Our server generates the chart, converts it into an image, uploads it to our Amazon S3 account and responds with a public url where you can access the image for 7 days.
- Include the image in your email (or anywhere else) and repeat if necessary.
To accomplish this we join forces with Heroku, Node.js, D3, PhantomJS, Express (for the API) and Amazon S3. I’d also like to thank Andrea Grassi from Haptime for helping bring it all together. I’ll probably write a post later to go over how this all works.
If you want to dive in and try it out, here’s the documentation. We also have an API to generate simple but highly configurable line charts.
Here are a few examples to show you some of the things you can do with D3js and Knowtify Charts:
