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

Basic Concepts and Terminology

Next ►
►

In this section, we will cover the fundamental concepts and terminology that are essential for understanding and working with D3.js. By the end of this module, you should have a solid grasp of the basic building blocks of D3.js, which will serve as a foundation for more advanced topics.

What is D3.js?

D3.js (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS to bring data to life. D3.js allows you to bind data to a Document Object Model (DOM) and then apply data-driven transformations to the document.

Key Concepts

  1. Selections

Selections are a core concept in D3.js. They allow you to select and manipulate DOM elements. Selections can be created using the d3.select and d3.selectAll methods.

// Select a single element
d3.select("body").style("background-color", "lightblue");

// Select multiple elements
d3.selectAll("p").style("color", "red");

  1. Data Binding

Data binding is the process of connecting data to DOM elements. This is done using the data method. Once data is bound to elements, you can use D3.js to create, update, or remove elements based on the data.

// Bind data to paragraphs
const data = [10, 20, 30, 40, 50];
d3.selectAll("p")
  .data(data)
  .text(d => `Value: ${d}`);

  1. Enter, Update, and Exit

D3.js uses a pattern called enter, update, and exit to manage the lifecycle of elements based on data.

  • Enter: Handles the creation of new elements for incoming data.
  • Update: Handles the updating of existing elements.
  • Exit: Handles the removal of elements that are no longer needed.
const data = [10, 20, 30];

// Select and bind data
const p = d3.select("body").selectAll("p")
  .data(data);

// Enter: Create new elements
p.enter().append("p")
  .text(d => `Enter: ${d}`);

// Update: Update existing elements
p.text(d => `Update: ${d}`);

// Exit: Remove old elements
p.exit().remove();

  1. Scales

Scales are functions that map data values to visual values, such as positions, lengths, or colors. D3.js provides several types of scales, including linear, ordinal, time, and logarithmic scales.

// Create a linear scale
const scale = d3.scaleLinear()
  .domain([0, 100]) // Input domain
  .range([0, 500]); // Output range

console.log(scale(50)); // Output: 250

  1. Axes

Axes are used to create reference lines and labels for visualizations. D3.js provides functions to generate and customize axes.

const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

const xAxis = d3.axisBottom(xScale);

// Append the axis to an SVG element
d3.select("svg")
  .append("g")
  .attr("transform", "translate(0, 50)")
  .call(xAxis);

Practical Example

Let's create a simple bar chart to demonstrate these concepts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Bar Chart</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="500" height="200"></svg>
  <script>
    const data = [30, 86, 168, 281, 303, 365];

    const svg = d3.select("svg");

    const xScale = d3.scaleBand()
      .domain(data.map((d, i) => i))
      .range([0, 500])
      .padding(0.1);

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

    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => xScale(i))
      .attr("y", d => yScale(d))
      .attr("width", xScale.bandwidth())
      .attr("height", d => 200 - yScale(d))
      .attr("fill", "steelblue");
  </script>
</body>
</html>

Explanation:

  1. Data: We have an array of data values.
  2. SVG: We select the SVG element where the chart will be drawn.
  3. Scales: We create xScale and yScale to map data values to positions.
  4. Bars: We bind the data to rect elements and set their attributes based on the scales.

Exercises

Exercise 1: Modify the Bar Chart

Modify the bar chart to use a different color for the bars and add labels showing the data values above each bar.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modified Bar Chart</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="500" height="200"></svg>
  <script>
    const data = [30, 86, 168, 281, 303, 365];

    const svg = d3.select("svg");

    const xScale = d3.scaleBand()
      .domain(data.map((d, i) => i))
      .range([0, 500])
      .padding(0.1);

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

    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => xScale(i))
      .attr("y", d => yScale(d))
      .attr("width", xScale.bandwidth())
      .attr("height", d => 200 - yScale(d))
      .attr("fill", "orange");

    svg.selectAll("text")
      .data(data)
      .enter()
      .append("text")
      .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
      .attr("y", d => yScale(d) - 5)
      .attr("text-anchor", "middle")
      .text(d => d);
  </script>
</body>
</html>

Exercise 2: Create a Line Chart

Create a simple line chart using the same data array.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Line Chart</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="500" height="200"></svg>
  <script>
    const data = [30, 86, 168, 281, 303, 365];

    const svg = d3.select("svg");

    const xScale = d3.scaleLinear()
      .domain([0, data.length - 1])
      .range([0, 500]);

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

    const line = d3.line()
      .x((d, i) => xScale(i))
      .y(d => yScale(d));

    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", line);
  </script>
</body>
</html>

Summary

In this section, we covered the basic concepts and terminology of D3.js, including selections, data binding, enter-update-exit pattern, scales, and axes. We also created a simple bar chart and a line chart to demonstrate these concepts in practice. Understanding these fundamentals is crucial as we move on to more complex visualizations and interactions in the upcoming modules.

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