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

We are going to change the colors of the bars before playing the animation. Colors can be a great way of helping the reader understand if a shape is being added or removed. Currently, the bars will always remain the same color regardless of what happens. The second thing we will do is animate the labels properly. They are experiencing the same issue we had with the bars.

## Transitioning colors

Let’s start with the color of the bars. We are going to update the functions we passed into the `join()` function. We will chain some `attr()` functions to change the fill.

ctr.selectAll('rect')
  .data(newDataset)
  .join(
    (enter) => enter.append('rect')
      .attr('width', d => d3.max([0, xScale(d.x1) - xScale(d.x0) - padding]))
      .attr("height", 0)
      .attr('x', d => xScale(d.x0))
      .attr("y", dimensions.ctrHeight)
      .attr('fill', '#b8de6f'),
    (update) => update,
    (exit) => exit.attr('fill', '#f39233')
      .transition(exitTransition)
      .attr('y', dimensions.ctrHeight)
      .attr('height', 0)
      .remove()
  )
  .transition(updateTransition)
  .attr('width', d => d3.max([0, xScale(d.x1) - xScale(d.x0) - padding]))
  .attr("height", d => dimensions.ctrHeight - yScale(yAccessor(d)))
  .attr('x', d => xScale(d.x0))
  .attr("y", d => yScale(yAccessor(d)))
  .attr('fill', '#01c5c4')

We will start with the first function. At the end of the chain, we are modifying the `fill`. The color is the following: `#b8de6f`

This hex code will give us the color green. Green is a color associated with the activity of adding new shapes. We are going to use this color to show the reader that new data is being added. For shapes being removed, we are using the following color: `#f39233`

We are changing the color before the transition because we want the colors to change immediately. It does not make sense for the bars to change to orange once the shapes are removed. 

This hex code will turn the bars into orange. Let’s give things a test.

We are going to change the colors of the bars before playing the animation. Colors can be a great way of helping the reader understand if a shape is being added or removed. Currently, the bars will always remain the same color regardless of what happens. The second thing we will do is animate the labels properly. They are experiencing the same issue we had with the bars.

# Transitioning colors

Let’s start with the color of the bars. We are going to update the functions we passed into the `join()` function. We will chain some `attr()` functions to change the fill.

Transitions can be enhanced by adding color to help the reader understand what is being added or removed.

Overview

SVG Basics

D3 Fundamentals

Drawing a Scatter Plot

Scales

Animations & Interactivity

Even More Charts!

Conclusion

Tweaking the Bars and Labels

Transitioning colors