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>

D3 visualization in this blog post