Gain insights into creating interactive web data visualizations with D3.js. Learn about SVGs, selections, advanced scatter plots, scales, animations, and interactivity to transform data into meaningful insights.

In this course, you will learn to create your own interactive data visualizations for the web with D3.js, a very popular JavaScript library. 

Starting with the fundamentals, you'll learn about SVG, selections, classes, and styles, as well as displaying data. This will give you the base to start working with more advanced concepts. 

Once you’ve got the basics out of the way, you will start practicing drawing various scatter plots, where you’ll learn all the best practices for creating stunning visualizations.

Lastly, you will dive into scales and one of the more fun parts: adding animation and interactivity.

By the time you finish this course, you will have a powerful new library to add to your resume, and you’ll be able to transform data into meaningful insights.

Master D3.js for Data Visualization

In this lecture, we are going to talk about the issue with our chart. Presently, there are 365 bars in the chart.

body{
  background-color: #f7f7f7;
}

#chart{
  margin: 25px auto;
  width: 800px;
}

.bar-labels{
  text-anchor: middle;
  font-size: 16px;
  font-family: sans-serif;
}

select {
  margin: 25px auto 0;
  display: block;
  font-size: 20px;
}

.mean-line {
  stroke: #d62828;
  stroke-dasharray: 6;
  stroke-width: 2px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Histogram</title>
  
</head>

<body>
  <div id="chart"></div>

  <script src="https://d3js.org/d3.v6.min.js"></script>
  
</body>

</html>

async function draw() {
  // Data
  const dataset = await d3.json('/udata/1kL2GBJw8VB/data-4-1.json')

  const xAccessor = d => d.currently.humidity

  // Dimensions
  let dimensions = {
    width: 800,
    height: 400,
    margins: 50
  };

  dimensions.ctrWidth = dimensions.width - dimensions.margins * 2
  dimensions.ctrHeight = dimensions.height - dimensions.margins * 2

  // Draw Image
  const svg = d3.select('#chart')
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height)

  const ctr = svg.append("g") // <g>
    .attr(
      "transform",
      `translate(${dimensions.margins}, ${dimensions.margins})`
    )

  // Scales
  const xScale = d3.scaleLinear()
    .domain(d3.extent(dataset, xAccessor))
    .range([0, dimensions.ctrWidth])
    .nice()

  // Draw Bars
  ctr.selectAll('rect')
    .data(dataset)
    .join('rect')
    .attr('width', 5)
    .attr("height", 100)
    .attr('x', d => xScale(xAccessor(d)))
    .attr("y", 0)
}

draw()

codemirror

Some of them overlap one another. That is not necessarily the problem. The problem is that each bar represents one value. Histograms are not charts that display a single value. The goal of a histogram is to show frequency within a dataset.

Let’s look at our dummy example to understand how a histogram works again. 

```javascript
[10, 10, 10, 10, 30, 50, 50, 80, 80, 100]
```

In this example, we have an array of ten numbers ranging from 10 to 100. 

A histogram will show how many times a number appears within a range. The ranges are written on the x-axis. The first bar is for the range of 10 to 30. The y-axis tells us how many numbers appear within a given range. According to the chart, five numbers appear between 10 and 30. 

A histogram is essentially showing us how frequently a value appears for each bucket. One thing you will notice is how many buckets there are. There are a total of five buckets despite there being 10 numbers in the array. Typically, there will always be fewer buckets than there are items in an array.

## Unformatted data

So, our problem becomes clear. **The data is unformatted.** It is not that the data is incomplete. This is a common problem you will come across. The data you have can be complete, but it may not be formatted in the way you wouldd want it to. 

We are attempting to loop through 365 items in an array. However, that is not what we should be looping through. Instead, the data should be grouped based on frequencies. Then, we want to be able to loop through the groups.

That leads us to the question, what is the preferred format for data when we draw histograms? Here is an example of what the data would look like if it was correctly formatted. 

A histogram will show how many times a number appears within a range. The ranges are written on the x-axis. The first bar is for the range of 10 to 30. The y-axis tells us how many numbers appear within a given range. According to the chart, five numbers appear between 10 and 30. 

A histogram is essentially showing us how frequently a value appears for each bucket. One thing you will notice is how many buckets there are. There are a total of five buckets despite there being 10 numbers in the array. Typically, there will always be fewer buckets than there are items in an array.

# Unformatted data

So, our problem becomes clear. **The data is unformatted.** It is not that the data is incomplete. This is a common problem you will come across. The data you have can be complete, but it may not be formatted in the way you wouldd want it to. 

We are attempting to loop through 365 items in an array. However, that is not what we should be looping through. Instead, the data should be grouped based on frequencies. Then, we want to be able to loop through the groups.

That leads us to the question, what is the preferred format for data when we draw histograms? Here is an example of what the data would look like if it was correctly formatted. 

The problem with our histogram is that it isn't formatted properly.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Understanding the Problem