D3.js stands out due to its ability to bind data to the Document Object Model (DOM) and apply data-driven transformations to the document. In this tutorial, we will create a bar chart that visualizes a dataset, demonstrating how to set up D3.js, load data, and create an interactive visualization.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript.
  • A local development environment with a web server (e.g., using Live Server in Visual Studio Code).
  • D3.js library included in your project.

Setting Up Your Project

  1. Create the Project Structure

Create a new directory for your project and add the following files:

   /d3-bar-chart
   ├── index.html
   ├── style.css
   └── script.js
  1. Include D3.js in Your HTML

In your index.html, include the D3.js library and link your CSS and JavaScript files:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>D3 Bar Chart Example</title>
       <link rel="stylesheet" href="style.css">
       <script src="https://d3js.org/d3.v7.min.js"></script>
   </head>
   <body>
       <h1>Bar Chart Visualization</h1>
       <svg id="bar-chart" width="600" height="400"></svg>
       <script src="script.js"></script>
   </body>
   </html>

Loading Data

For this example, we will use a simple dataset representing sales data. Create a JSON file named data.json in the project directory:

[
    {"product": "A", "sales": 30},
    {"product": "B", "sales": 80},
    {"product": "C", "sales": 45},
    {"product": "D", "sales": 60},
    {"product": "E", "sales": 20},
    {"product": "F", "sales": 90},
    {"product": "G", "sales": 55}
]

Now, we will load this data in script.js:

d3.json('data.json').then(data => {
    createBarChart(data);
}).catch(error => {
    console.error('Error loading data:', error);
});

Creating the Bar Chart

Next, we will create a function createBarChart to visualize the data:

function createBarChart(data) {
    const svg = d3.select("#bar-chart");
    const margin = { top: 20, right: 30, bottom: 40, left: 40 };
    const width = +svg.attr("width") - margin.left - margin.right;
    const height = +svg.attr("height") - margin.top - margin.bottom;

    const x = d3.scaleBand()
        .domain(data.map(d => d.product))
        .range([0, width])
        .padding(0.1);

    const y = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.sales)])
        .nice()
        .range([height, 0]);

    const g = svg.append("g")
        .attr("transform", `translate(${margin.left},${margin.top})`);

    g.append("g")
        .attr("class", "x-axis")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(x));

    g.append("g")
        .attr("class", "y-axis")
        .call(d3.axisLeft(y));

    g.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", d => x(d.product))
        .attr("y", d => y(d.sales))
        .attr("width", x.bandwidth())
        .attr("height", d => height - y(d.sales))
        .attr("fill", "steelblue")
        .on("mouseover", function(event, d) {
            d3.select(this).attr("fill", "orange");
        })
        .on("mouseout", function(event, d) {
            d3.select(this).attr("fill", "steelblue");
        });
}

Explanation of the Code

  1. SVG and Margins: We define the SVG dimensions and margins to create space for axes.
  2. Scales: We use d3.scaleBand for the x-axis (categorical) and d3.scaleLinear for the y-axis (numerical).
  3. Axes: We append the axes to the SVG using d3.axisBottom and d3.axisLeft.
  4. Bars: We create rectangles for each data point and set their attributes based on the data. Mouse events are added for interactivity.

Styling the Chart

In style.css, you can add some basic styles to enhance the appearance of the chart:

.bar {
    transition: fill 0.3s;
}

.x-axis path,
.y-axis path {
    display: none;
}

.x-axis line,
.y-axis line {
    stroke: #ccc;
}

Conclusion

In this tutorial, we have built a simple bar chart using D3.js, demonstrating how to load data, create scales, and render a visualization. D3.js offers extensive capabilities for creating complex visualizations, and this example serves as a foundation for further exploration.

Learn more with useful resources