diff --git a/PIE.md b/PIE.md index 89dcf46..e27f00f 100644 --- a/PIE.md +++ b/PIE.md @@ -1,7 +1,22 @@ # Creating a Pie Chart +## Introduction + +In this section we'll be using animations to make our graphs move. This can give your visualizations a more polished and professional feel. By the end of this section, you'll be able to: + +1. Create an ordinal scale +1. Create a color scale +1. Add paths for each pie segment +1. Generate an arc creating function +1. Format the data for the arc +1. Adjust the position of the pie +1. Make a donut graph +1. Remove parts of the pie + ## Set Up +As always, we'll need an `index.html` file: + ```html @@ -21,6 +36,28 @@ ## Set Config Vars +At the bottom of the `` tag, we're referencing an `app.js` file. Let's create that file, and add the following to it: + +```javascript +var WIDTH = 360; +var HEIGHT = 360; +var radius = Math.min(WIDTH, HEIGHT) / 2; + +var dataset = [ + { label: 'Bob', count: 10 }, + { label: 'Sally', count: 20 }, + { label: 'Matt', count: 30 }, + { label: 'Jane', count: 40 } +]; +console.log(dataset); +``` + +To be sure it's working and linked up properly, we've added the `console.log(dataset)` at the bottom. Let's open up `index.html` and view the developer console to make sure everything is hooked up the way it should be: + +![](https://i.imgur.com/Oy0fiTl.png) + +Once we're sure, it's working, remove the `console.log(dataset);`: + ```javascript var WIDTH = 360; var HEIGHT = 360; @@ -36,7 +73,9 @@ var dataset = [ ## Create an Ordinal Scale -An ordinal scale maps discrete values (can't be interpolated) to discrete values. +An ordinal scale maps a discrete value to some other value. A discrete value is something can't be divided. In the past, we've used values like numbers that can be divided up and interpolated. Interpolated just means that for any two numbers, we can find other numbers in between them. For instance, given 10 and 5, we can find values between them (e.g. 6, 8.2, 7, 9.9, etc). Now we want to map values that can't be interpolated, the `label` properties in our dataset (`Bob`, `Sally`, `Matt`, `Jane`). What values lie between `Bob` and `Sally`? How about between `Bob` and `Matt`? There are none. These are just strings, not numerical values that can be divided up and interpolated. + +What we want to do, is map these discrete values to other values. Here's an example of how to do this with an ordinal scale: ```javascript var mapper = d3.scaleOrdinal(); @@ -48,25 +87,37 @@ console.log(mapper('Sally')); console.log(mapper('Zagthor')); ``` -You cannot invert ordinal scales: +The previous code should produce the following: + +![](https://i.imgur.com/0WHlYsx.png) + +**NOTE** When working with ordinal scales, you'll need to list all values for both domain and range. Even if one set is numerical (in the previous case, the range), you'll still need to list each value. If we had just listed the min/max for the range, omitting `63`, D3 would have no idea what value to map `Sally` to. After all, how close is `Sally` to `Bob` as a value? How close is `Sally` to `Zagthor` as a value? There's no way to calculate that distance, since they're all strings of text, not numbers. + +One thing that's surprising, is that you can't invert ordinal scales: ```javascript console.log(mapper.invert(45)); ``` +![](https://i.imgur.com/Bvugomc.png) + +D3 can only go in one direction: from domain to range. + ## Create the color scale to map labels to colors -D3 comes with lots of pre-made color schemes: +Now we want to map the `label` properties of our data set to colors, instead of random numbers like in the previous section. We can come up with our own color scheme, or choose one of D3's set of colors: - https://github.com/d3/d3-scale/blob/master/README.md#category-scales - https://github.com/d3/d3-scale-chromatic#categorical -They're just arrays: +If we want to, we can see that these color schemes are just arrays: ```javascript console.log(d3.schemeCategory10) ``` +![](https://i.imgur.com/SstV7Wl.png) + Consequently, we can use them when setting a range: ```javascript @@ -74,7 +125,7 @@ var colorScale = d3.scaleOrdinal(); colorScale.range(d3.schemeCategory10); ``` -We can generate an array of labels for the domain using JavaScript's map function: +We can generate an array of labels for the domain using JavaScript's native map function: ```javascript colorScale.domain(dataset.map(function(element){ @@ -82,9 +133,30 @@ colorScale.domain(dataset.map(function(element){ })); ``` +Here's our code so far: + +```javascript +var WIDTH = 360; +var HEIGHT = 360; +var radius = Math.min(WIDTH, HEIGHT) / 2; + +var dataset = [ + { label: 'Bob', count: 10 }, + { label: 'Sally', count: 20 }, + { label: 'Matt', count: 30 }, + { label: 'Jane', count: 40 } +]; + +var colorScale = d3.scaleOrdinal(); +colorScale.range(d3.schemeCategory10); +colorScale.domain(dataset.map(function(element){ + return element.label; +})); +``` + ## Set up the svg -Standard: +This is pretty standard: ```javascript d3.select('svg') @@ -94,6 +166,8 @@ d3.select('svg') ## Add paths for each pie segment +Let's add `path` elements for each element in our dataset: + ```javascript var path = d3.select('g').selectAll('path') .data(dataset) @@ -104,9 +178,13 @@ var path = d3.select('g').selectAll('path') }); ``` +If we examine our elements in the developer tools, we'll see the paths were added, and each path has a fill value, as determined by `colorScale(d.label)`, which is mapping the label of each data object to a color: + +![](https://i.imgur.com/K9SSrf5.png) + ## Generate an arc creating function -Next we want to do something like this: +The paths have fill colors, but no shape. If you'll recall, `` elements take a `d=` attribute which determines how they're drawn. We want to set something up like this which will somehow map datum to a `d=` string: ```javascript .attr('d', function(datum){ @@ -147,12 +225,14 @@ var pie = d3.pie() .sort(null); //don't sort the values ``` -`pie` is a function that takes an array of values as a param and returns an array of objects that are formatted for our `arc` function +our `pie` variable is a function that takes an array of values as a param and returns an array of objects that are formatted for our `arc` function ```javascript console.log(pie(dataset)); ``` +![](https://i.imgur.com/eLkzxCA.png) + We can use this when attaching data to our paths: ```javascript @@ -180,15 +260,69 @@ var path = d3.select('g').selectAll('path') }); ``` +Our code so far: + +```javascript +var WIDTH = 360; +var HEIGHT = 360; +var radius = Math.min(WIDTH, HEIGHT) / 2; + +var dataset = [ + { label: 'Bob', count: 10 }, + { label: 'Sally', count: 20 }, + { label: 'Matt', count: 30 }, + { label: 'Jane', count: 40 } +]; + +var mapper = d3.scaleOrdinal(); +var colorScale = d3.scaleOrdinal(); +colorScale.range(d3.schemeCategory10); +colorScale.domain(dataset.map(function(element){ + return element.label; +})); + +d3.select('svg') + .attr('width', WIDTH) + .attr('height', HEIGHT); + +var arc = d3.arc() + .innerRadius(0) //to make this a donut graph, adjust this value + .outerRadius(radius); + +var pie = d3.pie() + .value(function(d) { return d.count; }) //use the 'count' property each value in the original array to determine how big the piece of pie should be + .sort(null); //don't sort the values + +var path = d3.select('g').selectAll('path') + .data(pie(dataset)) + .enter() + .append('path') + .attr('d', arc) + .attr('fill', function(d) { + return colorScale(d.data.label); //use .data property to access original data + }); +``` + +Produces this: + +![](https://i.imgur.com/lNGj6Hg.png) + ## Adjust the position of the pie -The pie starts at (0,0), so we can move the group containing the pie: +Currently, we only see the lower right quarter of the pie graph. This is because the pie starts at (0,0), but we can move the group containing the pie like so: ```javascript -var container = d3.select('g') +d3.select('svg') + .attr('width', WIDTH) + .attr('height', HEIGHT); +var container = d3.select('g') //add this line and the next: .attr('transform', 'translate(' + (WIDTH / 2) + ',' + (HEIGHT / 2) + ')'); //pie center is at 0,0 ``` +Now it looks like this: + +![](https://i.imgur.com/kxm6VRA.png) + ## Make a donut graph If you want the pie to have a hole at the center, just adjust the inner radius of the `arc()` function: @@ -199,24 +333,28 @@ var arc = d3.arc() .outerRadius(radius); ``` +Now we get this: + +![](https://i.imgur.com/f5eIwY0.png) + ## Remove parts of the pie -First let's add ids to our data to make removing easier: +We want to make it possible to click on a section of the pie, and it will be removed. First let's add ids to our data to make removing easier: ```javascript var dataset = [ - { id: 1, label: 'Abulia', count: 10 }, - { id: 2, label: 'Betelgeuse', count: 20 }, - { id: 3, label: 'Cantaloupe', count: 30 }, - { id: 4, label: 'Dijkstra', count: 40 } + { id: 1, label: 'Bob', count: 10 }, + { id: 2, label: 'Sally', count: 20 }, + { id: 3, label: 'Matt', count: 30 }, + { id: 4, label: 'Jane', count: 40 } ]; ``` Now let's use those ids when we map data to paths: ```javascript -var path = container.selectAll('path') - .data(pie(dataset), function(datum){ +var path = d3.select('g').selectAll('path') + .data(pie(dataset), function(datum){ //attach datum.data.id to each element return datum.data.id }) ``` @@ -224,7 +362,7 @@ var path = container.selectAll('path') Let's save a record of what the data is currently set to (we'll use this later): ```javascript -var path = container.selectAll('path') +var path = d3.select('g').selectAll('path') .data(pie(dataset), function(datum){ return datum.data.id }) @@ -233,7 +371,7 @@ var path = container.selectAll('path') .attr('d', arc) .attr('fill', function(d) { return colorScale(d.data.label); - }) + })//watch out! remove the semicolon here .each(function(d) { this._current = d; }); //add this ``` @@ -244,7 +382,7 @@ path.on('click', function(clickedDatum, clickedIndex){ }); ``` -Remove the selected data from the dataset array: +Remove the selected data from the dataset array, using JavaScript's native filter function: ```javascript path.on('click', function(clickedDatum, clickedIndex){ @@ -269,7 +407,11 @@ path.on('click', function(clickedDatum, clickedIndex){ }); ``` -Add the transition: +Now, if we click on the orange segment, we should get this: + +![](https://i.imgur.com/iuLEraU.png) + +Let's close the donut and add a transition: ```javascript path.on('click', function(clickedDatum, clickedIndex){ @@ -287,9 +429,13 @@ path.on('click', function(clickedDatum, clickedIndex){ .attrTween('d', function(d) { //tween the d attribute var interpolate = d3.interpolate(this._current, d); //interpolate from what the d attribute was and what it is now this._current = interpolate(0); //save new value of data - return function(t) { + return function(t) { //re-run the arc function: return arc(interpolate(t)); }; }); }); ``` + +Now, when we click the orange segment, the donut closes smoothly: + +![](https://i.imgur.com/gh8lnEN.png)