D3.js - freeCodeCamp.org

Learn Interactive Data Visualization with Svelte and D3

Beau Carnes — Wed, 16 Jul 2025 17:02:54 +0000

Data is everywhere, but raw numbers on a screen rarely tell a compelling story. To uncover insights and communicate them effectively, you need to make that data visible and interactive.

We just posted a new course on the freeCodeCamp.org YouTube channel.

In this course, instructor Gregory Kirchoff will guide you through building beautiful, interactive data visualizations from scratch using the power of Svelte and the flexibility of D3.

Here are some of the key concepts covered:

How to build a simple, bare-bones scatter plot to understand the core concepts.
Setting up and managing an SVG canvas for your visualizations.
Handling data scales to map your data values to pixel coordinates on the screen.
Adding interactivity to allow users to dynamically update the chart.
Bringing your charts to life with smooth animations and transitions.
Making your visualizations responsive so they look great on any device.
Fetching and parsing real-world data from external sources.

To keep things engaging, you’ll work with fun and unique datasets, starting with the results from a pig racing league and later using the Pokémon API to compare stats like weight, height, and speed.

Watch the full course on the freeCodeCamp.org YouTube channel now (1.5-hour watch).

Learn how to build security into AI

Beau Carnes — Wed, 16 Jul 2025 16:56:20 +0000

Artificial Intelligence is changing how we build software, but it also introduces brand new security risks. If you're a developer or security professional stepping into the world of AI, how do you make sure your applications are safe?

We've just published a new course on the freeCodeCamp YouTube channel that will teach you how to build security into AI. The course was created by security expert Robert Herbig.

Here’s a quick look at what you'll learn:

AI vs. Traditional App Security: Understand why securing an AI model isn't the same as securing a standard web app.
Threat Modeling for AI: Learn how to identify potential weaknesses in your AI systems, from poisoned training data to supply chain attacks.
Input & Output Risks: Dive into specific attack vectors like prompt injection and adversarial examples, and learn how to prevent sensitive data leaks.

As Robert says, "Security must be a foundational layer in AI development, not an afterthought."

Watch the full course now on the freeCodeCamp YouTube channel (1-hour watch).

How to Visualize Weather Data with D3.js

Spruce Emmanuel — Mon, 17 Jan 2022 16:59:10 +0000

What plans would you make if you knew it was going to rain tomorrow?

This can be a crucial question to ask yourself when it comes to planning your personal and day-to-day business activities.

For example, I have a friend who runs an app-based laundry business in Lagos, Nigeria. He relies heavily on sunshine, and sometimes it rains, or there's just no sunshine. On those days, business is very bad.

But what if he knew it was going to rain the next day or in 6 hours? That would help him plan things well in advance and prevent delays in orders. But where can he get such information?

That's where the Tomorrow.io weather API comes in. The weather API provides us with accurate and fast weather data in real time, like precipitation probability, amount of rainfall, temperature, wind speed, and more.

Such information is very useful to businesses across various industries like transportation, agriculture, and, in my friend's case, laundry shops.

Also, the weather data from this API can be easily integrated into your project or any program you are working with. The best part – the free version of the API is extremely powerful on its own, so that's what we'll use today.

In this article, we'll use the Tomorrow.io weather API and D3.js to forecast and visualize the precipitation probability of a particular location on a line chart. A service like this would allow my friend to tell on which days of the week it is likely to rain.

Project Requirements

What do you need to continue in this tutorial? Basic knowledge of JavaScript and D3.js is required.

I suggest reading a beginner's guide to D3.js if you want to refresh your memory before going further.

Getting Started

First, create an HTML file, and add the latest library of d3.js to the HTML file. Also, create an empty svg element, like so:

html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tomorrow.io Rainfall probabilitytitle>
    <script src="https://d3js.org/d3.v7.min.js">script>
  head>
  <body>
    <svg>svg>
  body>
  <script src="index.js">script>
html>

How to Set Up the Margins

At some point, our visualizations will need some space (margins). It is a convention in d3.js to set up the margin convention.

For this, you need to define the margins for the four sides, create an index.js file, and add the following:

const margin = { left: 120, right: 30, top: 60, bottom: 30 }

Now, let's set the width and viewBox of our SVG element. This will help make it responsive.

const width = document.querySelector("body").clientWidth,
  height = 500;

const svg = d3.select("svg").attr("viewBox", [0, 0, width, height]);

How to Define the Scales

The d3.scale function takes in data as input and returns a visual value in pixels. d3.scale needs to be set with a domain and a range. The domain sets a LIMIT for the data we are trying to represent visually.

As seen above, we need to set the range of the scales. We'll set the domain once we fetch our data:

const x_scale = d3.scaleTime().range([margin.left, width - margin.right]);
const y_scale = d3.scaleLinear().range([height - margin.bottom - margin.top, margin.top]);

How to Add a Title and Labels

Next, we need to add a title and labels to our visualizations. This is useful for explaining our graph to our users.

Edit your script.js and add the following code:

// labels
const x_label = "Time";
const y_label = "Rainfall Probability";
const location_name = "Lagos Nigeria";

// add title
svg
  .append("text")
  .attr("class", "svg_title")
  .attr("x", (width - margin.right + margin.left) / 2)
  .attr("y", margin.top / 2)
  .attr("text-anchor", "middle")
  .style("font-size", "22px")
  .text(`${y_label} of ${location_name}`);
// add y label
svg
  .append("text")
  .attr("text-ancho", "middle")
  .attr(
    "transform",
    `translate(${margin.left - 70}, ${
      (height - margin.top - margin.bottom + 180) / 2
    }) rotate(-90)`
  )
  .style("font-size", "26px")
  .text(y_label);
// add x label
svg
  .append("text")
  .attr("class", "svg_title")
  .attr("x", (width - margin.right + margin.left) / 2)
  .attr("y", height - margin.bottom - margin.top + 60)
  .attr("text-anchor", "middle")
  .style("font-size", "26px")
  .text(x_label);

With the above-added title and labels, the preview looks like this:

How to Create the Line Chart

Here, the first thing we'll need to do is to generate the path for our chart. D3.js provides a .line() method that pretty much generates the line path for you. Let's add the line generator:

const start_time = (d) => new Date(d.startTime);
const temperature = (d) => +d.values.precipitationProbability;

const line_generator = d3.line()
  .x((d) => x_scale(start_time(d)))
  .y((d) => y_scale(temperature(d)))
  .curve(d3.curveBasis);

Now that we have defined our line generator, let's go ahead and fetch our data.

How to Fetch Data from the Tomorrow.io Weather API

D3 provides us with a .json() method to fetch JSON data from an API or a local file.

Before you can fetch data using the Tomorrow.io weather API, you'll need a secret access token. To get this token, all you need to do is create an account with Tomorrow.io. Yes, it's that easy.

Once you have created your account, go ahead and log in. Then, on your dashboard, you should see your API secret token:

Add the following code to fetch the data:

const lat = 6.465422; // latitude of Lagos, Nigeria
const long = 3.406448; // Longitude of Lagos, Nigeria

const api_key = "your-api-key-here";

const url = `https://api.tomorrow.io/v4/timelines?location=${lat},${long}&fields=snowAccumulation,precipitationProbability,precipitationType×teps=1h&units=metric&apikey=${api_key}`;

d3.json(url).then(({ data }) => {
  const d = data.timelines[0].intervals;
  console.log(d)
});

Here is an example of the JSON data returned from that fetch:

{
  "data": {
    "timelines": [
      {
        "timestep": "1h",
        "startTime": "2021-12-03T13:00:00Z",
        "endTime": "2021-12-08T01:00:00Z",
        "intervals": [
          {
            "startTime": "2021-12-03T13:00:00Z",
            "values": {
              "snowAccumulation": 0,
              "precipitationProbability": 0,
              "precipitationType": 0
            }
          },
          // 108 more data
        ]
      }
    ]
  }
}

Now that we've fetched our data, let's generate our line chart:

d3.json(url).then(({ data }) => {
  const d = data.timelines[0].intervals;

// set the domain 
  x_scale.domain(d3.extent(d, start_time)).nice(ticks);
  y_scale.domain(d3.extent(d, temperature)).nice(ticks);
  // add the line path
  svg
    .append("path")
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 4)
    .attr("d", line_generator(d)); // generate the path
});

The above code gives us a basic chart:

How to Add the Axes

Even with the above line chart, you will have a hard time knowing exactly which day or hour has the highest possibility of rainfall.

We can resolve this by adding the time and rainfall probability (in %) axes.

First, define the axes just below your scales:

const ticks = 10;
const x_axis = d3.axisBottom()
  .scale(x_scale)
  .tickPadding(10)
  .ticks(ticks)
  .tickSize(-height + margin.top * 2 + margin.bottom);
const y_axis = d3.axisLeft()
  .scale(y_scale)
  .tickPadding(5)
  .ticks(ticks, ".1")
  .tickSize(-width + margin.left + margin.right);

// format our ticks to get accurate %
y_axis.tickFormat((d) => {
  if (!Number.isInteger(d)) {
    d = decimalFormatter(d);
  }
  return d + "%";
});

Finally, let's add our axis on the SVG element:

// append x axis
  svg
    .append("g")
    .attr("transform", `translate(0,${height - margin.bottom - margin.top})`)
    .call(x_axis);

  // add y axis
  svg
    .append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(y_axis);

With the axis added, our line chart now looks like this:

That's much better! You can now tell which day and hour has the highest probability of rainfall.

The full code and demo for this example is hosted on Codepen:

Conclusion

With the power of D3.js combined with the Tomorrow.io weather API, we can create visualizations that help users solve weather-related issues affecting their businesses.

I hope you found this tutorial helpful.

Happy Coding!

Cover photo by Reza Shayestehpour on Unsplash

D3.js Tutorial – Data Visualization for Beginners

Spruce Emmanuel — Wed, 24 Nov 2021 15:03:01 +0000

In this article, I'm going to walk you through how to use D3.js in a step by step and beginner-friendly way.

We'll talk about what D3.js is, how it works, and we'll create some basic visualizations to add transitions, interactions, and zooming.

Getting Started What is D3.js? How to Set Up a D3.js Environment
Selections How to Select Elements in D3 How to Modify Elements in D3
D3 is Data Driven Data Join in D3 Data Loading in D3
Scales in D3
Create a bar chart with d3.js Axis Component in D3 D3 Margin Convention How to Style it With CSS in D3
Create a World Map with d3.js How to Use Multiple Datasets in D3.js Map with city names Event Handling with D3.js Map with Panning and Zooming Programmatic zooming Adding ToolTips
Conclusion

Who is this article for?

This article is aimed at developers who already have a basic knowledge of HTML, CSS, SVG and JavaScript who want to learn how to visualize data with D3.js.

This article is suitable for both complete beginners and those who already have some experience working with D3.js.

By the end of this article, you should understand how D3.js works and how to create visualizations with your data.

Getting Started with D3.js

D3.js is a JavaScript library for creating visualizations like charts, maps, and more on the web.

D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards. – Wikipedia

Unlike many other data visualization libraries that provide ready made charts, D3 gives you lots of creative freedom as you have total control over the visualizations you create. D3 also uses web technologies like HTML, CSS, SVG and JavaScript.

In addition to the fact that D3 uses these familiar technologies, it has several other benefits:

D3 is extremely fast,
It encourages code reusability
It supports large datasets and provides an easy way of loading and transforming data
It's good for creating visualizations with rich interactions

How to Set Up a D3 Environment

D3 works in all modern browsers, and at the time of writing this article, D3.js is on version 7 (v7).

To use the latest version of D3 you have to link to it on your web page like this:

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

However for the purposes of teaching, all examples in this article are on Codepen, so you can edit the live examples.

How to Select Elements in D3

When you're coding in JavaScript and you need to modify elements on a page, you need to select those elements. D3.js works the same way, and provides us with two methods to select DOM elements:

d3.select()
d3.selectAll()

Both of this selector methods will take in any CSS selector and return the element that matches the specified selector. If no element matches the selector it will return an empty selection.

The d3.select() method will select the first element that matches in the DOM (from top to bottom).

d3.select("#d3_p").style("color", "blue");

<div class="d3_example">
    <cite class="d3_example-text">Example outputcite>
<p id="d3_p"> hello world 1p>
div>

If there are multiple elements that match the specified selector, d3.select() will match the first one it finds.

class="d3_example">
    <cite class="d3_example-text">Example outputcite>
<p id="d3_p-all"> hello world 1p>
<p id="d3_p-all"> hello world 2p>
<p id="d3_p-all"> hello world 3p>
<p id="d3_p-all"> hello world 4p>

The d3.selectAll() method works very similarly to d3.select() – but instead it selects ALL elements that match the selector:

d3.selectAll
(".d3_p").style("color", "blue");

<div class="d3_example">
    <cite class="d3_example-text">Example outputcite>
<p class="d3_p"> hello world 1p>
<p class="d3_p"> hello world 2p>
<p class="d3_p"> hello world 3p>
<p class="d3_p"> hello world 4p>
div>

How to Modify Elements in D3

After you have selected your DOM elements, D3 provides the following methods to modify them:

| Method   |      Usage      |  Example |  
|---|---|---|
| `.attr()` |  Update selected element attribute | `d3.select("p").attr("name", "fred")` | 
| `..classed()` | Assigns or unassigns the specified CSS class names on the selected elements   |   `d3.select("p").classed("radio", true);` |
| `.style()`  | Updates the style property |    `d3.select("p").style("color", "blue");` |
| `.property()` | Used to set an element property |    `d3.select('input').property('value', 'hello world')` |
| `.text()`  | Updates selected element text content |    `d3.select('h1').text('Learning d3.js')` |
| `.html()` | Sets the inner HTML to the specified value on all selected elements |    `d3.select('div').html('h1>learning d3.js')` |
| `.append()`  | Appends a new element as the last child of the selected element |    `d3.select("div").append("p")` |
| `.insert()`  | Works the same as the `.append()` method, except you can specify another element to insert before |    `d3.select("div").insert("p", "h1")` |
| `.remove()`  | Removes selected element from the DOM  | `d3.select("div").remove("p")` |

Don't worry if all these doesn't make sense right away – we will soon be using all these methods in our examples.

Each of the above DOM manipulation methods takes in a constant value or a function as a parameter which gives rise to creating Dynamic Properties.

The function takes in two properties: the first is the data which is conventionally called d in d3.js, and the other is the index.

d3.selectAll("circle").attr('cx', ((d, i) => i * 100))

class="d3_example">
    <cite class="d3_example-text">Example outputcite>
<svg id="d3_svg_demo1">
  <g transform="translate(50, 40)">
    <circle r="30" />
    <circle r="30" />
    <circle r="30" />
    g>
svg>

As you can see above, within this function we can apply any logic to manipulate the data and output.

D3 is Data Driven

D3.js itself is data-driven, which means it gets its super powers from data. D3 supports different types of data like arrays, CSV, XML, TSV, JSON, and so on.

This data can come from a local file in your working directory or can be fetched from an API.

Data Joins in D3

D3's data join lets us join the specified data to the selected element(s). To create a data join, you can use the .data() method:

let fruits = ['Apple', 'Orange', 'Mango']

d3.selectAll(".d3_fruit").data(fruits).text((d) => d)

<p class="d3_fruit">p>

<div class="d3_example">
    <cite class="d3_example-text">Example outputcite>
<p class="d3_fruit">p>
div>

Let's see what's going on here and why we got only one output instead of three.

So far, we have:

3 data points in our Fruits Array
1 p element in our selection

D3 just assigns the first fruit (Apple) in our array to the only selection p it got and forgets about the rest.

A quick fix for this is to manually create the other 2 p elements and just move on with your life. But most of the time you don't actually know how many items are in your array of data that is fetched from an external API.

To solve this problem, the latest versions of D3 provides us with a .join() method. It appends, removes, and reorders elements as necessary to match the specified data. Let's try it with our previous example to see what happens:

let fruits = ['Apple', 'Orange', 'Mango']

d3.select(".d3_fruit")
    .selectAll("p")
    .data(fruits)
    .join("p") // the join method
        .attr("class", "d3_fruit")
        .text((d) => d)

<div class="d3_fruit">div>

<div class="d3_example">
    <cite class="d3_example-text">Example outputcite>
<div class="d3_fruits">div>
div>

Let's break this down a bit:

Select the div wrapper d3_fruit
Select all the p elements even when there are no p elements in the div - this returns an empty selection
.data(fruits) - Binds the fruits array to the empty selection
.join("p") - This methods creates all the p elements for each item in our Array
.attr("class", "d3_fruit") - We set a class for each p element that was created
.text((d) => d) - Sets the text of each created p based on the fruits Array

Data Loading in D3

We have seen what data is to D3 and how to join data to our selections. But so far we have only used our own self-created data let fruits = ['Apple', 'Orange', 'Mango'].

In a real world scenario this is not usually the case – you sometimes have to fetch data from an API or a local file.

D3 has some methods to load various types of files:

d3.json
d3.csv
d3.xml
d3.tsv
d3.text

When using any of these methods, the syntax is generally the same:

// async await
const data = await d3.csv("/path/to/file.csv");
console.log(data);

// or
d3.json("/path/to/file.json").then((data) => {  console.log(data); })

Let's see this in action by loading data from an actual external JSON file.

For this example I have a JSON file that contains all the info about Nigeria and all its states:

const el = d3.select("#d3_svg_demo2");

d3.json("https://raw.githubusercontent.com/iamspruce/intro-d3/main/nigeria-states.json").then(({data}) => {
    el
     .selectAll("p")
     .data(data)
     .join("p")
      .text((d) => d.Name)
});



<div class="d3_example" id="d3_svg_demo2">
    <cite class="d3_example-text">Example outputcite>
    <p>p>
    <p>p>    
    <p>p>    
    <p>p>    
    <p>p>    
    ... + 31 others
div>

Using the above method you can fetch any data in D3.

Scales in D3

Thus far, you've learned how to load and use data in D3.js. Now we need to learn about Scales. This can be the most confusing part to learn for most folks and it's also the most important concept of D3.

In the last example we just looked at above, we loaded JSON data from an API and for each State in Nigeria we appended the name to a p element. That JSON file also contains the population of each state and some other info.

The population of each state ranges from the lowest at 2 million to the highest at 16 million. To correctly represent that data on a bar chart, for example, you need to create a bar chart with a height of 16000000px.

Just imagining that, you'd probably agree that it would be a very long bar chart. That's where d3.scale comes in.

The d3.scale function takes in data as input and returns a visual value in pixels. d3.scale needs to be set with a domain and a range. The domain sets a LIMIT for the data we are trying to represent visually.

const x_scale = d3.scaleLinear()
    .domain([10, 500])
    .range([2000000, 16000000]);

Let's break this down a bit:

d3.scaleLinear() - we tell D3 we are going to use the scaleLinear
.domain([10, 500]) - we set the domain (Limit) from 10 to 500
.range([2000000, 16000000]) - we set our minimum value to 2 million and maximum to 16 million which means we map out 2 million to 10px and 16 million to 500px

Now if we have a city with a population of about 8000000(half of 15 million) it would map out to a pixel value of 250px(half of 500).

It is important to point out that D3 has various form of Scales. The one you decide to use we be determined by the type of data you are trying to represent.

When you're working with data that represents dates, use d3.scaleTime
When you're creating bar charts, use d3.scaleBand
For other scales, refer to d3.scale

How to Create a Bar Chart with D3.js

Now let's apply everything we've learned to create a real world bar chart with D3.

For this example we are going to continue building from the example code in the data loading section of this tutorial:

const el = d3.select("#d3_svg_demo2");

d3.json("https://raw.githubusercontent.com/iamspruce/intro-d3/main/nigeria-states.json").then(({data}) => {
    el
     .selectAll("p")
     .data(data)
     .join("p")
      .text((d) => d.Name)
});

First let's create the scales for our bar chart:

const width = 960, height = 500;
const x_scale = d3.scaleBand().range([0, width])
const y_scale = d3.scaleLinear().range([height, 0])

What's going on here:

First we defined our x scale (horizantal scale) with a minimum of 0 and maximum of our SVG width
Secondly we set our y scale (vertical scale) to range from 0 to our SVG height

Next we need to select our SVG element in the document:

const svg = d3.select("#d3_demo")
    .attr("width", width)
    .attr("height", height)

Here we selected our SVG element and set the height and width to our specified height and width. Next let's fetch the JSON data from our API:

d3.json("https://raw.githubusercontent.com/iamspruce/intro-d3/main/nigeria-states.json").then(({ data }) => {
    data.forEach((d) => (d.Population = +d.info.Population))
})

If this doesn't look familiar please re-read the data loading section. Because of the way our JSON data is structured I destructed { data } from the API.

The fetched data comes in as a string but we need the Population field to be a number. So using the JavaScript + operator we convert each Population field to a number:

data.forEach((d) => (d.Population = +d.info.Population))

Next we need to set the domain of our scales – and now that we have fetched our data we can do that:

x_scale.domain(data.map((d) => d.Name);
y_scale.domain([0, d3.max(data, (d) => d.Population)]);

Let's see what's going on here:

x_scale.domain(data.map((d) => d.Name) - The x scale is a band scale so we set the domain to the name of states (36 states)
y_scale.domain([0, d3.max(data, (d) => d.Population)]) - The y scale is a linear scale so we set the minimum value to 0. And rather than setting the maximum value ourselves, we let D3 do that for us by using the d3.max() method.

NOTE: with the d3.max() method we loop through the provided data and always return the maximum value of the specified field (Population in our case).

Lastly we need to add the rectangles so we can see our bar chart:

svg
 .selectAll("rect")
 .data(data)
 .join("rect")
  .attr("class", "bar")
  .attr("x", (d) => x_scale(d.Name))
  .attr("y", (d) => y_scale(d.Population))
  .attr("width", x_scale.bandwidth())
  .attr("height", (d) => height - y_scale(d.Population));

Okay this isn't something new right? If this is still new please re-read the data join section of this tutorial. But there are some things we are seeing for the first time:

.attr("x", (d) => x_scale(d.Name)) - We set the x (horizontal) position of each rect created according to the generated scale. Same for the y (vertical position .attr("y", (d) => y_scale(d.Population)).
.attr("width", x_scale.bandwidth()) - here we set the width of each rect. Of course we can set this to any number we like, but using x_scale.bandwidth() D3 automatically sizes the rect for us to match the width of our SVG.
.attr("height", (d) => height - y_scale(d.Population)) - lastly we set the height of each rect to the SVG height and then subtract the height generated by the y_scale(d.Population), making sure each rect is represented correctly.

Here is the full code put together in one place:

const width = 960, height = 500;

const x_scale = d3.scaleBand().range([0, width]).padding(0.1);
const y_scale = d3.scaleLinear().range([height, 0]);

const svg = d3.select("#d3_demo")
    .attr("width", width)
    .attr("height", height);

d3.json("https://raw.githubusercontent.com/iamspruce/intro-d3/main/nigeria-states.json")
    .then(({ data }) => {

     data.forEach((d) => (d.Population = +d.info.Population));

     // Scale the Domain
     x_scale.domain(data.map((d) => d.Name));
     y_scale.domain([0, d3.max(data, (d) => d.Population)]);

     // add the rectangles for the bar chart
     svg
      .selectAll("rect")
      .data(data)
      .join("rect")
      .attr("class", "bar")
      .attr("x", (d) => x_scale(d.Name))
      .attr("y", (d) => y_scale(d.Population))
      .attr("width", x_scale.bandwidth())
      .attr("height", (d) => height - y_scale(d.Population));
    });

And here's the output:

%[https://codepen.io/Spruce_khalifa/pen/porxVVd]

And there you have it, a very basic D3.js bar chart. But if you showed that bar chart to a colleague or friend, they would probably ask you "what's going on here, what are we looking at?" That would lead us to another topic – the Axis.

Axis Component in D3

The axis component renders human-readable reference marks for scales. – D3 docs

To create these human readable reference marks, the d3.axis makes uses the d3.scale function to determine the number of ticks to generate.

To create different orientations for our axis, D3 provides four methods:

d3.axisTop
d3.axisBottom
d3.axisLeft
d3.axisRight

Let's see an example of these:

let svg = d3.select("#d3_demo8").attr('width', 200).attr('height', 200)
let scale = d3.scaleLinear().domain([0, 100]).range([0, 200]);


let bottom_axis = d3.axisBottom(scale);

svg.append("g").call(bottom_axis);

<svg id="d3_demo">
svg>

<div class="d3_example d3_no_pad" id="d3_svg_demo2">
    <cite class="d3_example-text">Example outputcite>
<svg id="d3_demo8">svg>
div>

To make all this work, you only need to pass in your existing d3.scale function. Let's apply this to our previous example.

The first thing we need to do is to set up the D3 margin convention.

D3 Margin Convention

The margin convention is just a way of adding margins to our graphics so as to have space to add our Axis.

To create the margin, first create an object with a property for each of the four sides:

const margin = { top: 20, right: 30, bottom: 55, left: 70 }

Then you need to define the width and height for our SVG. For a responsive graphic we set the width to the document body:

const width = document.querySelector("body").clientWidth;
const height = 500;

Next we need to apply this width as a view box to our SVG element:

const svg = d3.select("#d3_demo").attr("viewBox", [0, 0, width, height])

Next we need to set the x_scale and y_scale to work with our new margins:

const x_scale = d3
    .scaleBand()
    .range([margin.left, width - margin.right])
    .padding(0.1);

const y_scale = d3.scaleLinear()
    .range([height - margin.bottom, margin.top]);

Next let's define our left and bottom axis – remember we only need to pass in our existing scale (the ones above):

let x_axis = d3.axisBottom(x_scale);

let y_axis = d3.axisLeft(y_scale);

Everything else is the same as our previous example except the last part where we add the Axis:

// append x axis
svg
 .append("g")
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(x_axis)
  .selectAll("text") // everything from this point is optional
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", ".15em")
  .attr("transform", "rotate(-65)");

// add y axis
svg
 .append("g")
  .attr("transform", `translate(${margin.left},0)`)
  .call(y_axis);

You can view the output and full code on Codepen.

How to Style it With CSS in D3

You'll notice that our bar chart is green in color – how come? Well, we added a class of bar to each bar in the chart:

.attr("class", "bar")

We can use that class to style our bar chart with CSS:

.bar {
  fill: green;
}

How to Create a World Map With D3.js

One of the things I personally love about D3 is its ability to handle geographic data. Unlike our former examples, which used JSON data format maps, now we'll use a special form of JSON data called GeoJSON.

You can find the GeoJSON data we are going to use here.

Like in our other examples, let's first select our SVG element in the document and also set up the margin convention:

const margin = { top: 5, right: 5, bottom: 5, left: 5 },
    width = document.querySelector("body").clientWidth,
    height = 500;

const svg = d3.select("#d3_demo").attr("viewBox", [0, 0, width, height]);

<body>
<svg id="d3_demo">svg>
body>

Next, to generate our map we'll need a projection to render spherical coordinates (in our data file) and a Path Generator to convert the projected coordinates to a SVG path which is then rendered on the screen:

let projection = d3.geoEquirectangular().center([0, 0]);

D3 provides a lot of projections (I only used this one because I like it). Now that we have chosen our projection, let's convert it to an SVG path. D3 handles the conversion for us when we use the d3.geoPath() method. This method takes in a projection (the one we defined above):

const pathGenerator = d3.geoPath().projection(projection);

We don't want to draw the map directly on the SVG because we are going to be adding animations and zooming later on. So we append a g element to the selected SVG:

let g = svg.append("g");

Then we'll load our data for the map:

d3.json("https://raw.githubusercontent.com/iamspruce/intro-d3/main/data/countries-110m.geojson")
  .then((data) => {
      console.log(data)
  });

If this doesn't make sense I suggest you re-read the data loading section.

Lastly let's use our pathGenerator to generate our paths:

 g.selectAll("path")
    .data(data.features)
    .join("path")
    .attr("d", pathGenerator);

Above we used D3 data join to append a path for each country and then set the d attribute to our pathGenerator:

.attr("d", pathGenerator);

And in case that isn't clear, it's the equivalent of writing this:

.attr('d', (d) => pathGenerator(d))

You can find the final code and live preview on Codepen.

How to Use Multiple Datasets in D3.js

Sometimes you'll want to visualize two datasets from different sources. For example I have a data file that contains the geographic data of Nigeria and another file that contains information about states in Nigeria.

In the data loading section of this tutorial, we only covered loading a single data set. Loading multiple datasets in D3 looks like this:

Promise.all([
    d3.json("https://raw.githubusercontent.com/iamspruce/intro-d3/main/data/nigeria_state_boundaries.geojson"),
    d3.json("https://raw.githubusercontent.com/iamspruce/intro-d3/main/data/nigeria-states.json")
]).then(([geoJSONdata, countryData]) => {
    console.log(geoJSONdata)
    console.log(countryData)
});

By adding all the D3 data loading methods d3.json() inside the Promise.all, the .then() callback will only get called when all the data have finished loading, although if one of the data file fails to load the callback will not be called and would result in an error.

Map with City Names

Now let's use the loading multiple datasets idea to create a map with city names.

For simplicity we are going to leave out the part of creating the map because we already covered that above. Now, we'll only focus on adding the cities names:

Once we have loaded the data we need to format it:

countryData.data.forEach((d) => {
 d.info.Longitude = +d.info.Longitude;
 d.info.Latitude = +d.info.Latitude;
});

Above we converted the longitudes and latitudes. Next we need to fit our map to our container. To do that you'll use the d3.fitSize() method:

projection.fitSize([width, height], geoJSONdata);

Lastly we need to add the city names:

g.selectAll("text")
 .data(countryData.data)
 .join("text")
  .attr("x", (d) => projection([d.info.Longitude, d.info.Latitude])[0])
  .attr("y", (d) => projection([d.info.Longitude, d.info.Latitude])[1])
  .attr("dy", -7)
  .style("fill", "black")
  .attr("text-anchor", "middle")
  .text((d) => d.Name);

And that's it! We have a map with name of cities (I might have added circles too, because I think it's cool). The full code is on Codepen.

Event Handling with D3.js

At the beginning of this tutorial we talked about selections, but one thing we didn't cover was event handling.

In D3 we can add or remove event handlers to or from selected document elements using the .on() method.

The .on() method accepts two arguments:

Event type (usually a string)
A callback function that is called when our event is fired

Event Types in D3

The D3 .on() event type can be any DOM event type, but the most common events with D3 are:

| Event Type  | Description  |
|---|---|
| zoom  | selection is being panned and zoomed  |
| click  | selection got clicked  |
| mouseover  | mouse pointer moves over a selection  |
| mouseout  | mouse pointer leaves a slection  |

Map with Panning and Zooming

To see how D3 event handling works let's add pan and zoom to our previously created map.

The first thing we need to do is to define the zoom function:

let zooming = d3
  .zoom()
  .scaleExtent([1, 8])
  .on("zoom", (event) => {
   console.log(event)
  })

Then the next thing we need to do is use the d3.zoom() method. We also set the scaleExtent([1,8]). We do this to set the limit of the zoom, otherwise you'll keep zooming to infinity. Now let's add the transformation to our map paths in the callback function:

.on("zoom", (event) => {
  // transform paths when zoomed
  g.selectAll("path").attr("transform", event.transform);

  // transform circles when zoomed
  g.selectAll("circle")
    .attr("transform", event.transform)
    .attr("r", 5 / event.transform.k);

  // transform text when zoomed
  g.selectAll("text")
    .attr("transform", event.transform)
    .style("font-size", `${18 / event.transform.k}`)
    .attr("dy", -7 / event.transform.k);
});

NOTE: The event.transform is a short hand for setting the translate('x','y') and scale (event.transform.k).

Lastly let's call the zooming function on our SVG selection:

svg.call(zooming)

You can find the full code and preview on Codepen.

Programmatic zooming in D3

Turns out in D3 we can control zooming programmatically, this let us create buttons that can be used to control the zoom behavior:

Let's add those buttons to our previous map:

<body>
 <div class="btn-group-vertical" role="group" aria-label="..." id="float-button-group">
  <button class="btn-default" id="zoomIn">
   <svg class="svg-icon" viewBox="0 0 20 20">
    <title>Zoom Intitle>
    ...svg icon
    svg>
  button>
  <button class="btn-default" id="zoomOut">
   <svg class="svg-icon" viewBox="0 0 20 20">
  <title>Zoom Outtitle>
  ...svg icon
    svg>
  button>
  <button class="btn-default" id="resetZoom">
   <svg class="svg-icon" viewBox="0 0 20 20">
    <title>Reset Zoomtitle>
    ...svg icon
    svg>
  button>
div>

<svg id="d3_demo">svg>
body>

The next step is to select those buttons and control the zoom behavior:

d3.select("#zoomIn").on("click", () => {
  svg.transition().call(zooming.scaleBy, 2);
});
d3.select("#zoomOut").on("click", () => {
  svg.transition().call(zooming.scaleBy, 0.5);
});
d3.select("#resetZoom").on("click", () => {
  svg.transition().call(zooming.scaleTo, 1);
});

What is scaleBy and scaleTo? scaleBy multiplies the current scale by our given value (2), while scaleTo sets the scale factor to our given value (1) which resets the zoom.

You can find the preview and full code on Codepen.

How to Add ToolTips in D3

Let's add ToolTips to our map. A tooltip shows more information about an item when the user hovers over that item.

Let's first create the tooltip:

let tooltip = d3
  .select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

Next let's add the tooltip when the circle is hovered over, and remove it when the mouse pointer leaves the circle:

g.selectAll("circle")
  ...
  .style("fill", "green")
  .on("mouseover", (event, d) => {
    tooltip.transition().duration(200).style("opacity", 0.9);
    tooltip.html(`Population: ${d.info.Population}` + `
Name: ${d.Name}
`)
    .style("left", event.pageX + "px")
    .style("top", event.pageY - 28 + "px");
  })
  .on("mouseout", (d) => {
    tooltip.transition().duration(500).style("opacity", 0);
  });

Here's the final code and preview (try hovering on the circles):

Conclusion

Congratulations D3 Ninja! You've made it this far. Hopefully you have learnt the basics of Data Visualization with D3.

Here are some next steps:

Check out the freeCodeCamp Data Visualization certification
Check out the docs and more on D3's officail website

If you created something wonderful with this, please feel free to tweet about it and tag me @sprucekhalifa. And don't forget to hit the follow button.

Oh and happy coding!

Charting the waters (pt. 2): a comparison of JavaScript charting libraries

freeCodeCamp — Thu, 24 Jan 2019 17:35:00 +0000

By Mandi Cai

A deep dive into D3.js, Dygraphs, Chart.js, and Google Charts

The code for the charts I created in the header image is up on GitHub.

When I began creating charts and visualizing data, the only things I knew were “Consider Canvas for large datasets” and “D3 is magic”. I had no idea that there existed an entire ecosystem of charting libraries. These libraries are free, available, and complete with examples and documentation.

More importantly, each library has its own pros and cons with regards to the variety of charts, learning curve, level of customization, and out-of-the-box interactivity. So how does one decide?

I’ll compare a few popular JavaScript charting libraries in this article, specifically D3.js, Dygraphs, Chart.js, and Google Charts. Expect to learn how to create a JavaScript chart, a high-level comparison across libraries of the aforementioned factors (variety of charts, customization, etc.), and the use case I perceive to be best suited to each charting library.

But first, a quick introduction to why visualizing data is becoming increasingly important. You’re welcome to skip to the side-by-side comparison (Ctrl+F “Let’s compare!”).

_Source: [Wait But Why](https://www.nytimes.com/interactive/2018/08/04/upshot/up-birth-age-gap.html" rel="noopener" target="_blank" title="">The Upshot, The Rhythm of Food, and Why chart and visualize data?

I’ve always thought of data visualizations as a better way to learn and engage an audience. Not everyone is a natural at absorbing information through text. My eyes glaze over when trying to extract numbers from a block of words. Text also assumes you’re familiar with the language it’s written in. I struggled with textbook readings in college. It’s plausible that non-native English speakers were having a hard time as well.

Alternatively, whenever I came across a beautiful, clarifying diagram amidst the piles of information, I immediately grasped the concepts and remembered them better too.

Our minds are not wired to quickly and thoroughly understand large chunks of text or piles of Excel rows. But what they do excel at is recognizing similarity, symmetry, connections between objects, and continuity, which are foundations of data visualization. Think Gestalt Principles.

_Gestalt Principles (Source: [FusionCharts](https://www.fusioncharts.com/blog/how-to-use-the-gestalt-principles-for-visual-storytelling-podv/" rel="noopener" target="blank" title="))

Here’s a snippet of some data from the Bureau of Labor Statistics about the unemployment rates across U.S. counties (represented by a FIPS code) in 2016.

_Source: [Bureau of Labor Statistics](https://www.bls.gov/lau/#tables" rel="noopener" target="blank" title=")

To spot trends or catch outliers, the average person would spend a significant amount of time staring at this data. They may scan each row and re-write figures on another sheet of paper. Not ideal.

But if we visualize the data as a geographic map, as Mike Bostock did in his Observable notebook:

_Source: [D3 Chloropleth](https://beta.observablehq.com/@mbostock/d3-choropleth" rel="noopener" target="blank" title=")

You can immediately see hotspots for higher unemployment. Instead of hours, you’ve now detected interesting patterns in seconds. That difference in time to understand can mean the difference between ditching a seemingly “incomprehensible” dataset, or alternatively, furthering your investigation. Creating accurate and accessible visualizations also allows viewers to catch inconsistencies or holes in the dataset, which holds the data more accountable.

The anatomy of a chart

Before jumping into the library comparison, I think the basic “anatomy” of a JavaScript chart warrants an overview. While working through these libraries, I noticed that all except for D3* adopted the same pattern for generating charts.

Import the charting library into the HTML.
Create a iv> with an ID identifier, such as “my-first-chart”.


Fetch and load data in the JS. You may also define the data directly in the JS. Make sure you’ve linked this JS file in the HTML.
Pass the data, the iv> container, and an options object to a chart generator function.

Some libraries, like Google Charts, require calling draw() to draw the generated chart.
Serve the code up on a Python server with http-server -c-1 -p 8000 and see your first chart at localhost:8000.


Examples

Basic Dygraphs example
Basic D3.js example
Basic Chart.js example
Basic Google Charts example

*D3 has been primarily used for charting, but it’s more of a collection of toolkits than your standard charting library. See this article for a better explanation.
Let’s compare!
When picking any library, I like to start with these evaluation questions:

What’s the learning curve? (quality of documentation, code complexity)
How much can I customize my charts?
Is the library actively supported?
What types of data does this library take?
What modes of interactivity are offered?
Does the library offer responsive charts?

Learning curve

Dygraphs, Chart.js, and Google Charts have relatively small learning curves. They are great if you need to whip up charts in a couple of hours.
D3 has the highest learning curve, and the reason for this is the fine-grain, low-level control it offers. It’s more of a well-written library of advanced helper functions. D3 can theoretically be used in conjunction with other charting libraries.
To explore a bit further, I created the same chart across all 4 libraries using Boston weather data from meteoblue. The code is up on GitHub.

Top row: D3, Dygraphs, Bottom row: Chart.js, Google Charts
…. and recorded the lines of code needed to make each chart:

The lines of code support the original comparison of learning curves. D3 needs significantly more lines to get a basic chart up and running but provides more opportunity for customization.
Customization

D3 shines in the customization arena. D3’s granularity and modularity is exactly why designers and developers favor it as the medium for stunning and unique visualizations. Chart.js and Google Charts offer numerous options that can be passed into a generator function, such as legend font size and thickness of a line.
Active development

I define library development as the frequency of releases and the responsiveness of library maintainers to opened issues and feedback for improvement. A supportive and large community of users is also a plus. Usage encourages healthy change and accountability as the JavaScript ecosystem evolves.
Looking at the respective GitHub repositories, I discovered releases and resolved issues for Dygraphs and Google Charts to be more sporadic than D3 and Chart.js. D3 will not reach a halt in development any time soon. Its creator and contributors recently released a major version (v5.0) in 2018. They still actively contribute to the visualization community. Chart.js’s latest release also occurred pretty recently in 2018. The release addressed issues and enhancements. They are documented thoroughly in the release notes.
Types of data

This speaks for itself. Fun fact: I used D3’s fetch library to fetch data. I used other libraries to chart it. D3 has fetch functions for almost all common data formats used in data visualization.
Interactivity

Dygraphs, Chart.js, and Google Charts all have some out-of-box interactivity features, like tool tips, zoom, and events. It’s difficult to introduce highly custom interactions because each library is so encapsulated. With D3, you accept that complicated and unique interactions are possible. The tradeoff is simple interactions, like a tool tip, must also be constructed from the ground up.
Responsiveness

Chart.js and D3 offer responsive charts out of the box (for D3, specify a viewBox instead of width and height for the svg container). Dygraphs and Google Charts need some additional work to create responsive charts, like adding position: relative to the chart container or redrawing the chart on $(window).resize().
Dygraphs responsive chart (inspect the chart containers to see the CSS classes)
Responsive Google Charts Stack Overflow thread
Best used for?
Last but not least, I’ve listed the use case that I think each library is best suited for:

All screenshots taken from each library’s respective examples section
D3 is worth investing time in if you a) need a highly custom visualization and/or b) want helper functions to use in conjunction with other libraries.
I enjoyed Dygraphs for time series because the user can pan over the series and see the date and corresponding point by default. You can also highlight specific periods of time and select ranges of time.
Chart.js allows you to create simple, aesthetically pleasing charts that pop into the page seamlessly on load.
Finally, Google Charts offered the most variety of out-of-the-box charts, compared to the other libraries. In addition to standard charts, Google Charts also supports geographic maps, tree maps, sankey diagrams, etc.
3, 2, 1 … recap!
We’ve covered the many reasons why data visualization is powerful, the basic structure and steps to create a chart using a charting library, and a play-by-play comparison of 4 popular JavaScript libraries.
The most important step after you’ve selected a library and generated some visualizations is to communicate, and then iterate. Show your charts to others and ask them what they can and cannot interpret. Listen to their feedback and keep tweaking your charts. They’re teaching tools, and teaching tools should constantly evolve with the content and the viewers.
Thank you for reading!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Code for the charts I created are up on GitHub.
Here are the presentation slides that led to this article.
If you want to read about Bokeh and D3, check out Charting the waters: between Bokeh and D3.
If you have any suggestions or feedback, drop a comment.



 Learn to create a line chart using D3.js 
freeCodeCamp — Wed, 02 May 2018 03:17:56 +0000
 By Sohaib Nehal
Use the power of D3.js to draw beautiful representations of your data.

Learn D3.js for free on Scrimba
D3.js is an open source JavaScript library used to create beautiful data representations which we can view in any modern browser. Using D3.js, we can create various kinds of charts and graphs from our data.
In this tutorial, we are going to create a line chart displaying the Bitcoin Price Index from the past six months. We will be pulling in data from an external API and rendering a line chart with labels and an axis inside the DOM.
We’ve also created a free D3.js course on Scrimba. Check it out here.
Getting started
First of all, we will import the D3.js library directly from the CDN inside our HTML.
  <head>    <link rel="stylesheet" href="index.css">  head>  <body>    <svg>svg>    <script src="https://d3js.org/d3.v4.min.js">script>  body>html>
We have also added an  tag inside our HTML to create the line chart inside it using D3.js
Let’s now move towards writing our JavaScript code. First of all, we want to load our data of the Bitcoin Price Index from an external API once the DOM has been loaded.
Fetch Data
var api = 'https://api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-04-01';
document.addEventListener("DOMContentLoaded", function(event) {   fetch(api)     .then(function(response) { return response.json(); })     .then(function(data) {          //DO SOMETHING WITH DATA       })});
In the code above, we are using the fetch method to get the data from an external API. We then parse it using the .json() method.
We now want to convert this data into key/value pairs so that they are in the format of date:price. For this, we are going to send our data to another function which will parse and return it in our desired form.
Parse Data
.....then(function(data) {          var parsedData = parseData(data) })
function parseData(data) {   var arr = [];   for (var i in data.bpi) {      arr.push(         {            date: new Date(i), //date            value: +data.bpi[i] //convert string to number         });   }   return arr;}
We pass our data to a function parseData which returns another array of objects. Each object contains a date and the price of bitcoin on that particular date.
Once we have the data in our required format, we will send this data to the drawChart function in which all of the remaining code will be written using D3.js to render the line chart.
.....then(function(data) {    var parsedData = parseData(data);   drawChart(parsedData);})
Select SVG element
In the drawChart function, we first of all select our SVG element and provide it with some styling.
function drawChart(data) {
   var svgWidth = 600, svgHeight = 400;   var margin = { top: 20, right: 20, bottom: 30, left: 50 };   var width = svgWidth - margin.left - margin.right;   var height = svgHeight - margin.top - margin.bottom;
   var svg = d3.select('svg')     .attr("width", svgWidth)     .attr("height", svgHeight);...
In the code above, we are setting the width and height of the SVG container by first selecting it using the select() method and then using the attr() method to assign the attributes.
We have also defined margins and are using their values in calculating the width and height attributes of the SVG container. These margin values will help us later in positioning and displaying our chart correctly.
Using CSS, we have given borders to our SVG container:

So far, we have nothing inside our DOM yet:

Next up, we are going to create a group element to hold our line chart, axis, and labels.
Create and Transform Group Element
...var g = svg.append("g")   .attr("transform",       "translate(" + margin.left + "," + margin.top + ")"   );
Grouping elements helps organize similar or related elements together. Here, after rendering a group element, we provide it some transformation.
D3 gives us various options to transform our elements. In the code above, we are using the translate property to reposition our group element with margins on its left and top.
Add Scales
Now, we want to add scales to our chart.
var x = d3.scaleTime().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);
As we know, our data consists of dates and the value of Bitcoin on those dates. Therefore, we can assume that the x-axis would contain the dates and y-axis would contain values. That is how we can see the variation in the line chart with respect to time.
And so, in the code snippet above, we created a scale of type time on the x-axis and linear type on the y-axis. We are also providing these scales with the ranges as per the width and height of our SVG container.
Create a Line
Let’s now move towards defining our line by using the d3.line method. We will be defining the x and y attributes of the line by passing in anonymous functions and returning the date object and bitcoin value for that particular day.
var line = d3.line()   .x(function(d) { return x(d.date)})   .y(function(d) { return y(d.value)})   x.domain(d3.extent(data, function(d) { return d.date }));   y.domain(d3.extent(data, function(d) { return d.value }));
Append Axises
We are now going to append our left and bottom axes inside our group element for the line chart. The left axis will represent the value of bitcoin while the bottom axis displays the corresponding date.
g.append("g")   .attr("transform", "translate(0," + height + ")")   .call(d3.axisBottom(x))   .select(".domain")   .remove();
In the above code, we are appending a group element inside our main group and translating it at the very bottom our container. Then, we pass d3.axisBottom method in the call function where d3.axisBottom takes the parameter of x which is defined in the Add Scales section.
g.append("g")   .call(d3.axisLeft(y))   .append("text")   .attr("fill", "#000")   .attr("transform", "rotate(-90)")   .attr("y", 6)   .attr("dy", "0.71em")   .attr("text-anchor", "end")   .text("Price ($)");
Similar to the bottom axis, we append another group element and then call on it the d3.axisLeft method which takes the parameter of y. Then, we also style our axis by assigning it different attributes and a label.
If we save and refresh the page, we can see our axes being rendered inside the DOM:

Left and bottom axes
Append a Path
In the last step, we will be appending a path inside our main group element. This path will actually draw the line chart as per the values of the data.
We pass our dataset using the datum method and then set the attributes of fill color, stroke color, and width. In the end, we set the attribute of d which actually gives instruction to the SVG path about where to connect the points of the path.
g.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1.5).attr("d", line);
Here is the final result:

Line chart
Conclusion
Congratulations! We have successfully created the line chart using D3.js. You can check out the official documentation of D3.js to learn more about different charts and graphs you can create.
If you’re interested in learning more about D3.js, be sure to check out our free course on Scrimba.
_I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at sohaib.nehal@ymail.com or on Twitter @SohaibNehal. Thank you :-)
 


 Learn D3 in this free 10-part data visualization course 
freeCodeCamp — Thu, 12 Apr 2018 19:41:06 +0000
 By Per Harald Borgen

_Click here to get to the course._
D3.js is a JavaScript library which allows you to bring data to life using HTML, SVG, and CSS. Learning it will give you superpowers when it comes to extracting value from data, as you’ll basically be able to create any visualization you can think of.
However, it’s not the easiest library to learn, so getting started can be a bit tricky. That’s why we’ve teamed up with web developer and instructor Sohaib Nehal and created a free full-length course on it. Throughout the course, Sohaib will give you a soft introduction to the powerful library.
Let’s have a look at how it’s laid out!
The content
The course consists of 10 screencasts which in total last less than an hour. It starts off with the most basic concepts, like selection, manipulation, data loading, and more. This lays the groundwork for the various visualizations you’ll learn to create throughout the rest of the course.
#1: Course introduction

As usual with Scrimba courses, it begins with a quick walk-through of the course content, along with an intro to D3.js and the instructor.
#2: Selection and Manipulation

The first thing you need to learn is how to select and manipulate DOM elements with D3.js. The library is actually pretty powerful in terms of manipulating the DOM, so you could theoretically use it as a replacement for jQuery.
#3: Data Loading and Binding

As you’re going to create visualizations, it’s important to learn how to load data in and also how to bind it to the DOM. So in this lecture, you’ll learn that.
#4: Creating a simple bar chart

In the third lecture, you’ll learn how to build your very first visualization: a simple bar chart. The reason we’re introducing you to building stuff so early on is that it’s much more fun to create visualizations than simply talking about theory. So we think you’ll enjoy this lesson.
#5: Creating labels

The next step is to add labels to the bar chart, as you often would want to do this in real life. This is a short and simple lecture. Here, I’d recommend you to play around with the positions of the labels, as that’s a simple and fun way of interacting with the code.
#6: Scales
Scales are a critical concept in D3. They allow you to map your data to other relevant ranges, for example, the amount of space you have available. So in this lecture, you’ll learn about the scaleLinear() method:
var yScale = d3.scaleLinear()  
    .domain(\[0, d3.max(dataset)\])  
    .range(\[0, svgHeight\]);

#7: Axes

Axes are an integral part of any chart, and D3 provides you with a few simple methods for creating them. This lesson builds upon the last one, as it takes advantage of scales when creating the axes. It also sets you up for understanding the super-cool line chart you’ll learn in the final screencast of the course.
#8: Creating SVG elements

Even though you’ve already created SVG elements previously in the course, it’s such an important concept that it deserves its own lecture. In it, you’ll learn about the ,  , and  elements.
#9: Creating a pie chart

Pie charts are handy in many cases, so in this lecture, you’ll learn how to create one. D3 provides a simple API for doing this, so it shouldn’t be difficult for you at this point.
#10: Creating a line chart

Finally, you’ll learn how to create a line chart to visualize the Bitcoin price. To get the data, you’ll use an external API. This project will also tie together a lot of the concepts you’ve learned throughout the course, so it’s a great visualization to end with.
And that’s it! After going through these ten lessons, you should be well set up for starting to use D3.js in your job or for personal projects.
If you reach this point, we’d really appreciate if you’d give Sohaib a shout-out on Twitter!
The Scrimba format
Before you leave, let’s also have a quick look at the technology behind the course. It’s built using Scrimba, an interactive coding screencast tool. A “scrim” looks like normal video, however, it’s fully interactive. This means that you can edit the code inside the screencast.
Here’s a gif which explains the concept:

Pause the screencast → Edit the code → Run it! → See your changes
This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.
So what are you waiting for? Head over to Scrimba and take the free course today!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

_Click here to get to the advanced bootcamp._

D3.js - freeCodeCamp.org

Learn Interactive Data Visualization with Svelte and D3

Learn how to build security into AI

Watch the full course now on the freeCodeCamp YouTube channel (1-hour watch).

How to Visualize Weather Data with D3.js

Project Requirements

Getting Started

How to Set Up the Margins

How to Define the Scales

How to Add a Title and Labels

How to Create the Line Chart

How to Fetch Data from the Tomorrow.io Weather API

How to Add the Axes

Conclusion

D3.js Tutorial – Data Visualization for Beginners

Table of Contents

Who is this article for?

Getting Started with D3.js

How to Set Up a D3 Environment

How to Select Elements in D3

How to Modify Elements in D3

D3 is Data Driven

Data Joins in D3

Data Loading in D3

Scales in D3

How to Create a Bar Chart with D3.js

Axis Component in D3

D3 Margin Convention

How to Style it With CSS in D3

How to Create a World Map With D3.js

How to Use Multiple Datasets in D3.js

Map with City Names

Event Handling with D3.js

Event Types in D3

Map with Panning and Zooming

Programmatic zooming in D3

How to Add ToolTips in D3

Conclusion

Charting the waters (pt. 2): a comparison of JavaScript charting libraries

A deep dive into D3.js, Dygraphs, Chart.js, and Google Charts

The anatomy of a chart

Let’s compare!

Learning curve

Customization

Active development

Types of data

Interactivity

Responsiveness

Best used for?

3, 2, 1 … recap!

Learn to create a line chart using D3.js

Use the power of D3.js to draw beautiful representations of your data.

Getting started

Fetch Data

Parse Data

Select SVG element

Create and Transform Group Element

Add Scales

Create a Line

Append Axises

Append a Path

Conclusion

Learn D3 in this free 10-part data visualization course

The content

#1: Course introduction

#2: Selection and Manipulation

#3: Data Loading and Binding

#4: Creating a simple bar chart

#5: Creating labels

#6: Scales

#7: Axes

#8: Creating SVG elements

#9: Creating a pie chart

#10: Creating a line chart

The Scrimba format