Pie Chart Concepts in D3.js

Paulo Dichone | Android, Java, Flutter Developer and Teacher
A free video tutorial from Paulo Dichone | Android, Java, Flutter Developer and Teacher
Software Engineer - Android, Java, Flutter, Dart and Teacher
4.4 instructor rating • 13 courses • 115,028 students

Learn more from the full course

d3.js - Complete Developer Data Visualization Guide

Bring Data to life with D3.Js Data Visualization Library. Master JavaScript, HTML, CSS and Build Stunning Data Visuals

17:20:01 of on-demand video • Updated February 2020

  • Web Development and D3 JS Data Visualization with Firebase
  • Build Data-Driven Visualizations
  • Learn HTML, CSS and JavaScript
  • Create D3 JS Projects with Firebase Backend
English [Auto] So for us stoners and how to create pie charts we need to understand the pieces that come together in the creation of a pie chart in Day 3. Now let's go back to the basics. What do we talk about a pie chart. It's easier to conceptualize this idea by looking at a very simple circle. You could look at this circle and think of perhaps a pizza right. So a pizza you go ahead and cut into little pieces right. And you have these pieces of pizza as we have seen this many many times. Right now the main thing to understand here is that in order for us to create these pieces that constitute in this case the pie chart there are a few things that have to happen. First of all you have to understand that there is indeed a center of course right there in the center of the circle. So if we pick the middle there and we go ahead and start abstracting out a few sides or a few pieces of this pie if you will you'll notice that we will end up with just one piece as such and you can see that in the middle now we have an angle so the angle here allows the opening and the closing of our piece of pizza if you will. OK. So the smaller the angle obviously the smaller will our piece be the other important piece of course is the actual arc. So the arc is the completion of our angle opening. Right. And now inside there we can see the actual chart if you will. So these are the pieces that systematically are used to create a pie chart. So first of all you need to have an angle. And then of course you have to have a way in which you can create that arc. The beauty here is that D3 has already functions that we can call to create all of that. Now you may ask. OK so how do we figure out the angle for instance but that is a very important piece. Right. Well D3 allows us to get the data that we are receiving from a data source CSP a or anything else out there and we are able to then take that data source a row or a column and then map into our angle so that we can actually create angles that will be translated into opening and closing as you can see there so that then we can create the arc and have it all working right now. This may seem a little bit complicated but real it isn't thanks to DFAT not Let's go ahead and actually get our hands dirty here so we can actually see what's happening.