javascript-d3How do I create a chart using D3.js?

Creating a chart using D3.js is a simple process. First, you need to include the D3.js library in your HTML page:

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

Next, create a div element in your HTML page to contain the chart:

<div id="chart"></div>

Then, write the JavaScript code to create the chart. Here is an example of a bar chart:

<script>
    var data = [2, 4, 8, 16, 32];
    var width = 420,
        barHeight = 20;
    var x = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, width]);
    var chart = d3.select("#chart")
        .attr("width", width)
        .attr("height", barHeight * data.length);
    var bar = chart.selectAll("g")
        .data(data)
        .enter().append("g")
        .attr("transform", function(d, i) {
            return "translate(0," + i * barHeight + ")";
        });
    bar.append("rect")
        .attr("width", x)
        .attr("height", barHeight - 1);
    bar.append("text")
        .attr("x", function(d) {
            return x(d) - 3;
        })
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function(d) {
            return d;
        });
</script>

This example code will create a bar chart with five bars, each representing the data points 2, 4, 8, 16, 32. The x variable is used to scale the data points to the width of the chart, and the bar variable is used to create the bars. The rect element is used to draw the bars, and the text element is used to display the data points.

Code explanation

• var data = [2, 4, 8, 16, 32]: an array of data points to use in the chart
• var width = 420, barHeight = 20: variables to set the width and height of the chart
• var x = d3.scaleLinear(): a variable to scale the data points to the width of the chart
• var chart = d3.select("#chart"): a variable to select the div element containing the chart
• var bar = chart.selectAll("g"): a variable to select the bars in the chart
• bar.append("rect"): a method to draw the bars in the chart
• bar.append("text"): a method to display the data points in the chart

Helpful links

• https://d3js.org/
• https://developer.mozilla.org/en-US/docs/Web/API/SVGElement

Edit this code on GitHub