Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Linked Views

When one chart isn't enough, you can link multiple charts together. With D3.js, you can keep them all in sync, so they all update when the user interacts with any one.

4.2 Linked Views

Hi and welcome back to Learn Data Visualization With D3.js. In this lesson I want to show you how you can connect different charts to interact with each other. If you have a lot of different data sets that share common targets, like companies or countries, you might want to highlight the data for this company or country in all graphs and charts. When you hover over it in one of them, it'll clearly display which data belongs to it in the others. This can be done by using d3-dispatch events. Let's create an example. It's going to be a map of US states as well as the age distribution for each state in a pie chart. Again, here's some boilerplate HTML and JavaScript. This time, I have to include top adjacent because we're working with geodata. The first thing I'm going to create is a dispatch object. The arguments for percent events that will be handled. In our case it's load, or when the data is loaded, and change, when the selection of a state changes. I'm also going to create static reference to the different age groups as it's easier. Now, we have to load the US json file that's called us.json. When that's complete, I'm also going to load that us-age csv file. I gotta used some clever logic to both at the same time. But since they are all on my local machine, this will suffice. Since the csv loader will only load strings we have to convert the data to numbers. And I also want to calculate the total value of people. Luckily, this can be done all in one step. Finally, after we have the geo and age data, we can create a map for lookup. And then file the load event passing in the age and map data. We can watch for this event with the dispatch.on function. The event can be more specific than just load with the ,center, so it will handle just load events and load.map. Since the data is an obelisk projection, I have to create this for the US. I can also parse in some translation to move it to the right side of the map, and a scale. To draw the path, we can call d3.geoPath. Parsing in the projection. Now, that this is going to be a collection of state path. It's important to have them individually so we can hover over them. The data will be a top adjacent feature of the US state objects. The data set also has count the information but that's too detailed for our use case. It could be an interesting visualization to color the counties by average age if you have the data for it. Now, to get the individual states, I have to access the features property. Otherwise, the whole US would be a single path. We're going to add a class of state to color the paths. And use the geopath to draw it. Additionally, I'm going to add an event handler that handles the mouse enter event. It will use the dispatch object to call the change event to update the selected state. Next is the pie chart. We will get it created on the load.pie event. First, we need a radius, and I'm going with an eighth of the width or height. Then there is the pie element that doesn't get sorted. The arc is exactly the same as we used in the lesson about pie charts as is the color scale. To move the chart to the center of the left half, I'm using a group element. Now, for the chart itself. I'm going to pass in just the group data since we have not selected a state yet. I'm also passing in the color scale. Finally, we have to set some internals as we need an initial value. I can call each to set to start and endAngle to 0 for each group. It's important to use a normal function here to be in the scope of the parts. I'm not going to add labels, as it quite complicated to do dynamically. What I'm going to introduce, new element, a legend. I'm going to add a group for each legend item, and move it down by 15 pixels each time. Then I'm going to add a rectangle that represents the color of the label. It's 10 by 10 and uses the color scale. To get up a level, and be at the group again, I'm using select with a function that fetches the parent node of the current node, which is the rectangle. An arrow function would not work here, either because I need the correct scope to reference the ranked angle with this. Finally, I'm adding a text element that will show the group's label. To finish it off and make use of the space in the center of the circle, I'm going to add another text label that represents the total population of the selected state. Now, comes the fun part. We are going to add a change event listener for the dispatch object to switch the data around. It will receive the correct age data for a selected state. First of all I'm going to update the population label. I'm going to add some RegExp to add a thousand separators to it. Then, we need to update the data of the path object which represents the pie chart. I'm going to call pie.value to tell the data accessor to drop the value from the received data set d. Then, I'm going to call up the groups data. To make it look nicer, we are going to add some transition. I'm using attrtween to set interpolate data. Again, it's important to use the null function here to get the correct scope. Otherwise, we couldn't access the correct value for _current. In this case, I'm using d3's interpolate function to interpolate between the internal current data we stored, and the new data. Then we can set the new to the current. Since we are setting a path, I need to return a factory that calls arc with the interpolation data and that's it. Let's have a look. As you can see, we have a legend on the left, and a map on the right. Let's hover over a state, for instance, California. The chart appears to have nice animation since everything started at 0 before. It also shows the total population and colors the state in navy blue but that's just CSS. When I change the state, the values update and the chart moves to the correct distribution. Let's recap what you've learned. D3.dispatch, is used to handle and call events that can be used to update your charts. Dispatch.call will fire the event while dispatch.on handles it. Events can be coarse or fine-grained by using a .syntax. Firing an update event will be handled by update.map and update.pie. This was the final lesson of this course. All that's left for you is to watch the conclusion for further resources. See you there.

Back to the top