javascript-d3How do I create charts using d3.js?

Creating charts using d3.js is a powerful way to visualize data. It is a JavaScript library that uses HTML, SVG, and CSS to create charts. To create a chart using d3.js, you will need to include the d3.js library in your HTML document, create a dataset, and use the d3.js functions to create and manipulate the chart.

For example, the following code block creates a simple bar chart using d3.js:

<html>
  <head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      // Create the dataset
      var dataset = [1, 2, 3, 4, 5];

      // Create the SVG element
      var svg = d3.select("#chart")
                  .append("svg")
                  .attr("width", 500)
                  .attr("height", 300);

      // Create the bars
      svg.selectAll("rect")
         .data(dataset)
         .enter()
         .append("rect")
         .attr("x", function(d, i) {
           return i * 40;
         })
         .attr("y", function(d) {
           return 300 - (d * 25);
         })
         .attr("width", 30)
         .attr("height", function(d) {
           return d * 25;
         })
         .attr("fill", "teal");
    </script>
  </body>
</html>

This will output a bar chart like this:

The code above consists of the following parts:

Include the d3.js library in the HTML document: <script src="https://d3js.org/d3.v5.min.js"></script>
Create a dataset: var dataset = [1, 2, 3, 4, 5];
Create an SVG element: var svg = d3.select("#chart") .append("svg") .attr("width", 500) .attr("height", 300);
Create the bars: svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return i * 40; }) .attr("y", function(d) { return 300 - (d * 25); }) .attr("width", 30) .attr("height", function(d) { return d * 25; }) .attr("fill", "teal");

For more information on creating charts with d3.js, see the following links:

Edit this code on GitHub

More of Javascript D3

See more codes...