Prev

JavaScript D3.js

D3.js (Data-Driven Documents) is a powerful JavaScript library for creating complex and dynamic data visualizations. It uses HTML, SVG, and CSS to bring data to life with interactive and animated visual elements.

Key Topics

Getting Started with D3.js

To use D3.js, include the library in your HTML file via CDN:

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

Binding Data

D3 binds data to DOM elements, allowing dynamic updates. Use the data() and enter() methods to bind data and create elements for each data point.

const data = [10, 20, 30, 40, 50];
const svg = d3.select("body")
    .append("svg")
    .attr("width", 400)
    .attr("height", 100);

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 40)
    .attr("y", d => 100 - d)
    .attr("width", 30)
    .attr("height", d => d)
    .attr("fill", "steelblue");

Explanation: This code binds an array of data to rectangles in an SVG element, dynamically setting their size and position based on the data values.

Scaling and Axes

D3 provides scales to map data to visual dimensions and axes for easy visualization of data ranges.

const data = [10, 20, 30, 40, 50];

const scaleX = d3.scaleBand()
    .domain(data.map((_, i) => i))
    .range([0, 400])
    .padding(0.1);

const scaleY = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([100, 0]);

const svg = d3.select("body")
    .append("svg")
    .attr("width", 400)
    .attr("height", 150);

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => scaleX(i))
    .attr("y", d => scaleY(d))
    .attr("width", scaleX.bandwidth())
    .attr("height", d => 100 - scaleY(d))
    .attr("fill", "steelblue");

svg.append("g")
    .attr("transform", "translate(0,100)")
    .call(d3.axisBottom(scaleX));

svg.append("g")
    .call(d3.axisLeft(scaleY));

Explanation: This code uses scales to map data values to SVG coordinates and renders axes to display data ranges.

Example: Interactive Bar Chart

This example demonstrates an interactive bar chart where bars change color on hover:

<!DOCTYPE html>
<html>
    <head>
        <title>D3.js Bar Chart</title>
        <script src="https://d3js.org/d3.v7.min.js"></script>
    </head>
    <body>
        <script>
            const data = [10, 20, 30, 40, 50];

            const svg = d3.select("body")
                .append("svg")
                .attr("width", 400)
                .attr("height", 150);

            const scaleX = d3.scaleBand()
                .domain(data.map((_, i) => i))
                .range([0, 400])
                .padding(0.1);

            const scaleY = d3.scaleLinear()
                .domain([0, d3.max(data)])
                .range([100, 0]);

            svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("x", (d, i) => scaleX(i))
                .attr("y", d => scaleY(d))
                .attr("width", scaleX.bandwidth())
                .attr("height", d => 100 - scaleY(d))
                .attr("fill", "steelblue")
                .on("mouseover", function () {
                    d3.select(this).attr("fill", "orange");
                })
                .on("mouseout", function () {
                    d3.select(this).attr("fill", "steelblue");
                });
        </script>
    </body>
</html>

Key Takeaways

  • Data Binding: D3 dynamically binds data to DOM elements, enabling real-time updates.
  • Scales: D3 scales map data values to visual dimensions like coordinates and colors.
  • Axes: Axes provide a visual representation of data ranges for better understanding.
  • Interactivity: Create interactive visualizations with event handlers like mouseover and mouseout.
Prev