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.csv
to 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!