The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Creating Bar Charts

Next ►
►

In this section, we will learn how to create bar charts using D3.js. Bar charts are one of the most common types of visualizations and are used to compare different categories of data. We will cover the following topics:

  1. Setting Up the SVG Container
  2. Binding Data to Elements
  3. Creating the Bars
  4. Adding Axes
  5. Styling the Chart

  1. Setting Up the SVG Container

First, we need to set up an SVG container where our bar chart will be drawn. The SVG container is essentially a canvas where we can place our graphical elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bar Chart with D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
        .bar:hover {
            fill: orange;
        }
        .axis-label {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

  1. Binding Data to Elements

Next, we need to bind our data to the SVG elements. For this example, let's use a simple dataset representing the sales of different products.

const data = [
    { 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 }
];

  1. Creating the Bars

We will now create the bars for our bar chart. Each bar will represent a product, and its height will correspond to the sales value.

const svg = d3.select("svg");
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.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));

  1. Adding Axes

To make our bar chart more informative, we will add axes to it.

g.append("g")
    .attr("class", "x axis")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(x))
    .append("text")
    .attr("y", margin.bottom - 10)
    .attr("x", width / 2)
    .attr("text-anchor", "middle")
    .attr("class", "axis-label")
    .text("Product");

g.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", -margin.left + 10)
    .attr("x", -height / 2)
    .attr("dy", "0.71em")
    .attr("text-anchor", "middle")
    .attr("class", "axis-label")
    .text("Sales");

  1. Styling the Chart

Finally, we can add some CSS to style our bar chart. This includes setting the color of the bars and adding hover effects.

.bar {
    fill: steelblue;
}

.bar:hover {
    fill: orange;
}

.axis-label {
    font-size: 12px;
}

Complete Code

Here is the complete code for creating a bar chart with D3.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bar Chart with D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
        .bar:hover {
            fill: orange;
        }
        .axis-label {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        const data = [
            { 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 }
        ];

        const svg = d3.select("svg");
        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.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));

        g.append("g")
            .attr("class", "x axis")
            .attr("transform", `translate(0,${height})`)
            .call(d3.axisBottom(x))
            .append("text")
            .attr("y", margin.bottom - 10)
            .attr("x", width / 2)
            .attr("text-anchor", "middle")
            .attr("class", "axis-label")
            .text("Product");

        g.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(y))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", -margin.left + 10)
            .attr("x", -height / 2)
            .attr("dy", "0.71em")
            .attr("text-anchor", "middle")
            .attr("class", "axis-label")
            .text("Sales");
    </script>
</body>
</html>

Summary

In this section, we learned how to create a basic bar chart using D3.js. We covered setting up the SVG container, binding data to elements, creating the bars, adding axes, and styling the chart. This foundational knowledge will help you create more complex visualizations as you progress through the course. In the next section, we will explore how to create line charts.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved