javascript-d3How do I create a D3.js gallery?

Creating a D3.js gallery is a great way to showcase your data visualizations. Here's a quick guide on how to do it:

Start by gathering your data visualizations in a folder.
Create a index.html file in the same folder and add the following code:

<html>
  <head>
    <title>My D3.js Gallery</title>
  </head>
  <body>
  </body>
</html>

Add the D3.js library to the <head> of the index.html file:

<script src="https://d3js.org/d3.v4.min.js"></script>

Create a <div> element in the <body> of the index.html file:

<div id="gallery"></div>

Add JavaScript code to the <script> tag of the index.html file to loop through the data visualizations and append them to the <div> element:

var gallery = d3.select("#gallery");

d3.json("data.json", function(data) {
  data.forEach(function(d) {
    var div = gallery.append("div")
      .attr("class", "chart");

    div.append("img")
      .attr("src", d.image);

    div.append("p")
      .text(d.title);
  });
});

Finally, add some basic styling to the index.html file to make the gallery look nice:

#gallery {
  display: flex;
  flex-wrap: wrap;
}

.chart {
  width: 300px;
  margin: 10px;
}

Open the index.html file in a web browser to see the gallery!

Helpful links

Edit this code on GitHub

More of Javascript D3

See more codes...