Interactions

Let's start talking about adding interactions to our charts!

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Lesson Transcript

  • [00:00 - 00:18] One of the best parts about creating charts with D3 is when you're on the web you get to make your charts as interactive as you want. So this includes clicking to get more detail, hovering to get tooltips, clicking and dragging to zoom into certain parts of the chart, even zooming in and zooming out.

  • [00:19 - 00:41] There's basically no end to the number of interactions you can add to your chart and that can really add to how the user interacts with it. So getting more detail, getting less detail, looking at specific data points, these are all things that are really exclusively things you can do when you're looking at a chart in a web browser.

  • [00:42 - 00:54] So in this module we're going to talk about how to add those different interactions and we're going to talk about the fundamentals so that you can take this knowledge and do basically anything you can imagine with your charts. Let's dive in.

  • [00:00 - 00:18] One of the best parts about creating charts with D3 is when you're on the web you get to make your charts as interactive as you want. So this includes clicking to get more detail, hovering to get tooltips, clicking and dragging to zoom into certain parts of the chart, even zooming in and zooming out.

    [00:19 - 00:41] There's basically no end to the number of interactions you can add to your chart and that can really add to how the user interacts with it. So getting more detail, getting less detail, looking at specific data points, these are all things that are really exclusively things you can do when you're looking at a chart in a web browser.

    [00:42 - 00:54] So in this module we're going to talk about how to add those different interactions and we're going to talk about the fundamentals so that you can take this knowledge and do basically anything you can imagine with your charts. Let's dive in.