This is from a Stack Overflow question about embedding a d3.js example in a Jekyll blog post (written in Markdown).
This should work, but it looks like the challenge from the referenced d3 example is have a proper target element in the document. The example uses an <iframe> element, which embeds another HTML document where the target element is <body>. Here, I’ve embedded the same iframe:
And here, I’ve used d3 to target an element <div id="example"> in this document:
To do this, I made the following changes:
- change
var svg = d3.select("body").selectAll("svg")tovar svg = d3.select("div#example").selectAll("svg") - save
morley.csvto the root directory of my Jekyll site, then changed3.csv("morley.csv", function(error, csv)tod3.csv("/morley.csv", function(error, csv)(copied this file into project to resolve cross-site scripting errors) - change
<script src="box.js"></script>to<script src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/box.js"></script> - create a new element called
<div id="example"></div>
Check out the code for this post on GitHub to see how I did it!