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

Let's use the `d3.bin()` function to help us create bins. It is going to help us format our data. Let’s pick up where we left off. 

# The `d3.bin()` function

We will write the code for the bins below the `xScale` variable in the script section.

// Create Scale
const xScale = d3.scaleLinear()
  .domain(d3.extent(dataset, xAccessor))
  .range([0, dimensions.ctrWidth])
  .nice()

const bin = d3.bin()
  .domain(xScale.domain())
  .value(xAccessor)
  .thresholds(10)

We have a variable called `bin`. Its value is the `d3.bin()` function. The `d3.bin()` function will return a function that can format data. This allows us to reuse the function for more than one dataset. Before we pass our data onto the `bin()` function, it will need to know more information about our data. First, it needs to know the domain by chaining the `domain()` function.

The `bin()` function needs to know the smallest and largest values in our dataset AKA the domain. We already provided the domain to the `xScale` function so we can pass in the same code we passed into the `domain()` function of the `xScale` function. However, there is an alternative solution available. We can access the original scale via the `domain()` function.

The `xScale` function does not have to be used as a function. It is also an object where we can grab information about the current scale. Rather than recalculating the domain, we can call the `domain()` function to return the domain used for the scale. We use the same domain because the `bin()` function will help us spread the rectangles across the x-axis. Therefore, we should provide it with the domain for the x-axis. 

The `domain()` function will return an array where the first item is the lowest and the second item is the highest number. 

```javascript
.value(xAccessor)
```

The next function we are chaining is called `value()`. The `value()` function will tell D3 which property it should group the data with. The metric we are drawing with this chart is the humidity. We should tell D3 how it should access the humidity within our data. Luckily, we already have a function that does that. We can pass in the `xAccessor` function.

```javascript
.thresholds(10)
```

There is one last function we are chaining called `threshold()`. The `threshold()` function allows us to specify how many bins or groups D3 should return. This function expects a number. For this example, we're passing in `10`. 

One thing to keep in mind is that the value for the `threshold()` function is taken in as a recommendation. We may not see the data distributed into ten groups. D3 will try its best to create the number of groups we asked for. 

The function is ready. We can run our data through it to format the data.

The ‘d3.bin()’ function will help us with formatting our data into distributed buckets.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Creating Bins

The `d3.bin()` function

Creating Bins

The d3.bin() function

The `d3.bin()` function