How to embed a d3.js example to the Jekyll blog post?

Question

I am experimenting with this Jekyll theme http://richbray.me/frap/

And I want to create a blog post showing this D3.js example: http://bl.ocks.org/mbostock/4061502

Answer 1

There are a few ways to get this to work:

Embed an

You can change this to

Then, you can simply paste this iframe line into your markdown file. Make sure that you have an empty line before and after it.

You can also add width="600" height="400" attributes to that iframe element so that most of the chart will fit in the iframe.

Target a block element within the document (e.g.

instead of )

• change var svg = d3.select("body").selectAll("svg") to var svg = d3.select("div#example").selectAll("svg")
• save morley.csv (you can get it here) to the root directory of your Jekyll site, then change d3.csv("morley.csv", function(error, csv) to d3.csv("/morley.csv", function(error, csv) (copy this file into your Jekyll project to resolve cross-site scripting errors)
• change to
• create a new element called

I created this Jekyll blog post that shows how to do this. Also, check out Matt Shwery's blog post (and raw markdown) with another d3 / Jekyll example.