14

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

So the main difficulty is how to let Markdown render the script to let d3.js show its contents. Any ideas?

4
  • This question may help. Mar 26, 2014 at 9:31
  • So the solution provided is to add a empty new line after the opening tag. I will try and report, thanks.
    – TongZZZ
    Mar 26, 2014 at 13:54
  • After multiple tries, I don't think I could get a example set up correctly. I actually don't think you can embed a Javascript script in Markdown (.md) file and render and execute it to show what it is. Please prove I am wrong.
    – TongZZZ
    Mar 26, 2014 at 16:11
  • Fortunately, The answer by @nicksuch proved my statement upstairs is wrong. Hats off.
    – TongZZZ
    Mar 27, 2014 at 4:05

2 Answers 2

13

There are a few ways to get this to work:

Embed an <iframe>

In the d3 example, there's an embedded iframe:

<iframe src="/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/" marginwidth="0" marginheight="0" scrolling="no"></iframe>

You can change this to

<iframe src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/" marginwidth="0" marginheight="0" scrolling="no"></iframe>

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. <div> instead of <body>)

  • 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 <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>

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.

2
  • 1
    Well, what more can I say. You rock! And this d3.select("div#example").selectAll("svg") is a true d3.js marvelous, I am still getting familiar with it, would like to know more. Also worth mentioning, I have changed to another Jekyll template and this example works great. I may not test on my original Jekyll template, so not sure if it works there.
    – TongZZZ
    Mar 27, 2014 at 4:03
  • 3
    am getting this error message after copy paste iframe Refused to display 'http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.ocks.org".
    – I Like
    Jan 4, 2017 at 7:33
4

inframe is no longer supported by bl.ocks you will get the following error

Refused to display 'http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.ocks.org".

you can try using rawgit.com

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.