Embed D3js charts in emails
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.
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.
Here are a few examples to show you some of the things you can do with D3js and Knowtify Charts: