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

Edit this code on GitHub

More of Javascript D3

See more codes...