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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Advanced Chart Types

In this lesson, we’re going to look at some examples of advanced chart types that can be displayed with D3.js.

Related Links

4.1 Advanced Chart Types

Hi, and welcome back to Learn Data Visualization with D3.js. In this lesson, I want to show you a few advanced chart types and how you can use them. One of those types is maps. D3 has a whole micro library D3 Geo, dedicated to working with geography data. I'm not going to build an example this time as it can take quite some time to preprocess data to make it usable. But I have a good example for you. Even better, this example contains all the code you have to use to prepare the data if you want. It shows the population density of California for the year 2014. It's officially government data that is standardized up to a point. For instance, the preparation script uses d3.geoAlbers, which is a US-centric projection of the United States as a cone, that is used by the US Census Bureau and the US Geological Survey. There are of course other projections like the Mercator projection, that is typically used in a nautical context, or other common types. The geoPath function of D3 is used to render a generated path using Geo's JSON as a standardized way of describing geometry data. Additionally, the example also uses topojson, which is also capable of storing topology data. Moving onto another diagram that I've seen a lot of times during elections in countries that have more than two parties. It's a Sankey diagram, and it visualizes the flow between nodes. Going back to the election example, it's often used to visualize where voters of one party in the previous election went to in the current one. D3 does all of it for you. Here, you can see an example of the possible UK energy production and consumption in 2050. On the left, you have the different sources of energy, and on the right, you have the consumers. In between are transformations or other steps, like the thermal generation of energy or the grid. It shows the flow of energy while also respecting the relative volume. And all you have to do in D3 is to call d3.sankey with your data, a collection of nodes and the links between them. D3 will generate the nodes for you as well as the links between them. Not much code for such a complicated chart. My final example of an advanced chart that shows what's really possible with D3.js is the force-directed tree. It's essentially a tree structure generated from a table with D3 that stratify. This generates a list of nodes and links between them. The display is handled by a force simulation that's done entirely in D3. It knows about the links and it fires a tick event to draw the nodes and links. Those draw calls are done in a 2D context of a canvas. There is no SVG element here as you can see. The example is also using d3.drag for interaction, calling various methods to simulate the forces. This shows exactly that D3 is more than just a simple charting library. It's just a massive amount of features that are very well thought out. In the next lesson, we are going to look at linking different charts together so you can enhance your data views. See you there.

Back to the top