Embedding D3 in a Website
How to embed a D3 visualization in a website or a blog post.
My blog follows this directory structure:
assets/
csv/
file.csv
js/
d3.min.js
d3-barchart-vis.js
_posts/
this-blog-post.md
Add a div
with a descriptive id
to the section of your blog post where you want to add your visualization:
<div id="d3-barchart-vis"></div>
In the d3-barchart-vis.js
, the svg
selects this <div id
:
var svg = d3.select("#d3-barchart-vis")
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 " + w + " " + h);
The csv
file is called like this so it points at the correct directory:
d3.csv("../assets/csv/file.csv", rowConverter).then(function(dataset) {
At the end of the blog post, after all content, add a reference to the JavaScript files:
<script type="text/javascript" src="../assets/js/d3.min.js"></script>
<script type="text/javascript" src="../assets/js/d3-barchart-vis.js"></script>