Menu
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?
993
Include D3 Library from CDN js library by linking it directly into our HTML page from the Content Delivery Network (CDN). CDN is a network of servers where files are hosted and are delivered to a user based on their geographic location. If we use the CDN, we do not need to download the source code.
Advertisements. SVG stands for Scalable Vector Graphics. SVG is an XML-based vector graphics format. It provides options to draw different shapes such as Lines, Rectangles, Circles, Ellipses, etc. Hence, designing visualizations with SVG gives you more power and flexibility.
D3 is a JavaScript library and framework for creating visualizations. D3 creates visualizations by binding the data and graphical elements to the Document Object Model. D3 associates (binding) the data (stuff you want to visualize) with the DOM. This allows the user to manipulate, change or add to the DOM.
There are a few ways to get this to work:
<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.
<div> instead of <body>)var svg = d3.select("body").selectAll("svg") to var svg = d3.select("div#example").selectAll("svg")
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)<script src="box.js"></script> to <script src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/box.js"></script>
<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.
180
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
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
