1. [Zhu Chapter 7, Murray Chapter 11]
01/11/2019
Unit 4.0 Pie charts
[Zhu Chapter 7, Murray Chapter 11]
01/11/2019
Unit 4 - Pie charts
F21DV Unit 4 Pies

2. D3 layout and shape generators
Layout Generators
Bundle
Chord
Cluster
Force
Histogram
Pack
Partition
Pie
Stack
Tree
Treemap
Shape Generators
d3.svg.line - create a new line generator
d3.svg.line.radial - create a new radial line generator
d3.svg.area - create a new area generator
d3.svg.area.radial - create a new radial area generator
d3.svg.arc - create a new arc generator
d3.svg.symbol - create a new symbol generator
d3.svg.chord - create a new chord generator
d3.svg.diagonal - create a new diagonal generator
d3.svg.diagonal.radial - create a new radial diagonal generator
01/11/2019
Unit 4 - Pie charts

3. Reference: Zhu’s book Chapter 7 “Using the arc generator”
Chapter 9 “Building a pie chart”
Live examples
01/11/2019
Unit 4 - Pie charts

4. Overview
01/11/2019
Unit 4 - Pie charts

5. We know that d3 likes to iterate through tables (arrays of objects)
{……} i 1 2 3 4 5 6 7 8 9 i d
{……} 1
{……} 2
{……} 3
{……} 4
{……} 5
{……} 6
{……}
01/11/2019
Unit 4 - Pie charts

6. So how do we map to a pie chart?
{……} i 1 2 3 4 5 6 7 8 9 d
{……} i 1 2 3 4 5 6
01/11/2019
Unit 4 - Pie charts

7. Info to draw one arc? d {start, end} i startAngle endAngle innerRadius
outerRadius
innerRadius d
{start, end} i
01/11/2019
Unit 4 - Pie charts

8. Info for many arcs d {start, end} i 1 2 3 4 5 6 01/11/20191 2 3 4 5 6
01/11/2019
Unit 4 - Pie charts

9. D3 help Pie Layout generator Arc shape generator User’s data d3 GUP
10% i 1
20% 2
30% 3 4 5 6 d
{start, end} i 1 2 3 4 5 6
d3 GUP
SVG code
Arc shape generator
01/11/2019
Unit 4 - Pie charts

10. First: Arc Generaotor
01/11/2019
Unit 4 - Pie charts

11. An arc SVG Path Examples startAngle endAngle outerRadius innerRadius
Reference (0, 0)
[from
SVG Path Examples
01/11/2019
Unit 4 - Pie charts

12. SVG path = defined by “data path”
[from
Data Path examples
01/11/2019
Unit 4 - Pie charts

13. Good News: d3.svg.arc( ) Parameters Arc shape generator innerRadius
startAngle
endAngle
outerRadius
innerRadius
Arc shape generator
Parameters
innerRadius
outerRadius
Arguments
startAngle
endAnge
SVG code
01/11/2019
Unit 4 - Pie charts

14. Good News: d3.svg.arc( ) d3.svg.arc Factory method mjcArc() parameters
(inner & outer radii
mjcArc()
arguments
d = {start, end angles)
svg data path
01/11/2019
Unit 3

15. Create instance of arc generating function: mjcArc( )
Create & initialise generator function/object
startAngle
endAngle
outerRadius
innerRadius
01/11/2019
Unit 4 - Pie charts

16. Using your arc generator function
d={startAngle: 0.1,
endAngle: 0.2 };
mjcArc()
arguments
svg data path
01/11/2019
Unit 3

17. Using ‘mjcArc()’ on one Datum, d
d={startAngle: 0.1, endAngle: 0.2 };
mjcArc(d)
SVG Data Path: "M , A200, , , L0,0Z"
01/11/2019
Unit 4 - Pie charts

18. Use in attr method to set the SVG “path data” d

19. Use with d3 GUP
01/11/2019
Unit 4 - Pie charts

20. Use with D3 Data Join, Enter Pattern
But, first, create a degrees to radians helper function
d2r()
degrees
radians
01/11/2019
Unit 4 - Pie charts

21. Create dataset Stick all data into a dataset One row per arc
01/11/2019
Unit 4 - Pie charts

22. D3 GUP pattern
01/11/2019
Unit 4 - Pie charts

23. One example Datum, d
d =
01/11/2019
Unit 4 - Pie charts

24. Iterating through the table:
01/11/2019
Unit 4 - Pie charts

25. Documentation https://github.com/mbostock/d3/wiki/SVG-Shapes#arc
01/11/2019
Unit 4 - Pie charts

26. How does the Arc shape generator function work?
01/11/2019
Unit 4 - Pie charts

27. How does d3.svg.arc( ) work?
Common pattern in D3 so worth learning.
“A shape generator, such as that returned by d3.svg.arc, is both an object and a function.
That is: you can call the shape like any other function, say svgPathCode = arcShape(d,i)
but this function behaves like an object in that it the shape has additional setter (/getter) methods that change its parameters.” e.g. arcShape().innerRadius(r1)
01/11/2019
Unit 4 - Pie charts

28. How does d3.svg.arc( ) work?
It follows D3’s method chaining pattern
where setter methods return the shape function itself,
allowing multiple setters to be invoked in a concise statement.”
01/11/2019
Unit 4 - Pie charts

29. Very similar to d3 selections
Except that a selection is an array of DOM elements
And the array has attached methods
D3 selection
D3 shape generator
[[array of DOM elements]]
.data( )
myArc( )
.innerRadius( )
.append( )
.outerRadius( )
.attr( )
.startAngle( )
* Note that methods are created by assigning functions to an object’s attributes
01/11/2019
Unit 4 - Pie charts

30. d3.svg.arc( ) source code
01/11/2019

31. d3.svg.arc context
01/11/2019

32. d3.svg.arc( ) source code arc generator function
innerRadius Setter/getter
outerRadius Setter/getter
startAngle Setter/getter
endAngle Setter/getter
centroid Setter/getter
01/11/2019
Unit 4 - Pie charts

33. d3.svg.arc( ) generator function
This is the function that actually does all the work and generates the ‘path’ data e.g. below
01/11/2019
Unit 4 - Pie charts

34. d3.svg.arc( ) Setter/Getters
01/11/2019
d3.svg.arc( ) Setter/Getters
EXAMPLE innerRadius setter/getter
Getter: no arguments so return innerRadius
Setter: has argument v so set innerRadius and return arc object
01/11/2019
Unit 4 - Pie charts
F21DV Unit 4 Pies

35. d3.svg.arc( ) Setter/Getters
Note that the ‘arc’ generator object = the generator function ‘arc’ + getter/setter functions e.g. arc.innerRadius
And also note that it has access to its parent variables (innerRadius etc) in d3.svg.arc!
01/11/2019
Unit 4 - Pie charts

36. Use: First get the generator function
Note that in addition, setter functions are being used to set outerRadius and innerRadius in the above example
The generator/object is now assigned to variable ‘my_arc_generator’
Now we can use ‘my_arc_generator’ to generate the path data.
01/11/2019
Unit 4 - Pie charts

37. D3 Layout Generators
01/11/2019
Unit 4 - Pie charts

38. D3 Layout generators Layout generator Shape generator Data Parameters
SVG code
01/11/2019
Unit 4 - Pie charts

39. Pie Layout Generator Pie Layout generator Arc shape generator
User’s data d
10% i 1
20% 2
30% 3 4 5 6 d
{start, end} i 1 2 3 4 5 6
d3 GUP
SVG code
Arc shape generator
01/11/2019
Unit 4 - Pie charts

40. D3 Pie Layout Generator Pie Layout Generator [10, 20, 40, 30]
Source Data
[10, 20, 40, 30]
Table of arc data: one row (object) per arc
01/11/2019
Unit 4 - Pie charts

41. D3 Pie Layout Generator Pie Layout Generator Arc generator
Source Data
[10, 20, 40, 30]
dataset
d3 GUP
Arc generator
SVG code
01/11/2019
Unit 4 - Pie charts

42. Example: the Data
01/11/2019
Unit 4 - Pie charts

43. Create Arc & Pie generators
01/11/2019
Unit 4 - Pie charts

44. Create arc dataset
[10, 20, 40, 30]
01/11/2019
Unit 4 - Pie charts

45. GUP
01/11/2019
Unit 4 - Pie charts

46. Render Labels with GUP
01/11/2019
Unit 4 - Pie charts

47. Render Labels with GUP
01/11/2019
Unit 4 - Pie charts

48. e.g. table of objects that include field that we want as labels
More complex user data?
e.g. table of objects that include field that we want as labels
01/11/2019
Unit 4 - Pie charts

49. Example: table of objects
Two problems:
The arc ‘values’ are in the “quantity” attribute
We would like to use the “type” attribute as a label field
01/11/2019
Unit 4 - Pie charts

50. So what do we get out of the Layout generator?
Pie Layout Generator
i=0: {
"data":{"quantity":10,"type":"cars"},
"value":10,
"startAngle": ,
"endAngle": ,
"padAngle":0 }
i=1:{
"data":{"quantity":20,"type":"trucks"},
"value":20,
"startAngle": ,
"endAngle": ,
"padAngle":0}
i=2: {
"data":{"quantity":30,"type":"bikes"},
"value":30,
"startAngle":0,
"endAngle": ,
01/11/2019
Unit 4 - Pie charts

51. So what do we get out of the Layout generator?
i=0: {
"data":{"quantity":10,"type":"cars"},
"value":10,
"startAngle":5.2,
"endAngle":6.2,
"padAngle":0 }
i=1:{
"data":{"quantity":20,"type":"trucks"},
"value":20,
"startAngle":3.1,
"endAngle":5.28,
"padAngle":0}
i=2: {
"data":{"quantity":30,"type":"bikes"},
"value":30,
"startAngle":0,
"endAngle": ,
01/11/2019
Unit 4 - Pie charts

52. Note 1: Have to overwrite ‘value’ function
Overwrite ‘value’ function with our own
This anonymous function returns the ‘quantity’ attribute given the current object ‘d’ as input
01/11/2019
Unit 4 - Pie charts

53. Note 2: in Label GUP (rendering)
Have to access the user’s ‘type’ via the ‘data’ attribute
01/11/2019
Unit 4 - Pie charts

54. Summary
01/11/2019
Unit 4 - Pie charts

55. Summary Pie Layout Generator Arc generator [10, 20, 40, 30]
Source Data
[10, 20, 40, 30]
table
d3 GUP
Arc generator
SVG code
01/11/2019
Unit 4 - Pie charts

56. Summary Layout Generators Bundle Chord Cluster Force Histogram Pack
Partition
Pie
Stack
Tree
Treemap
Shape Generators
d3.svg.line - create a new line generator
d3.svg.line.radial - create a new radial line generator
d3.svg.area - create a new area generator
d3.svg.area.radial - create a new radial area generator
d3.svg.arc - create a new arc generator
d3.svg.symbol - create a new symbol generator
d3.svg.chord - create a new chord generator
d3.svg.diagonal - create a new diagonal generator
d3.svg.diagonal.radial - create a new radial diagonal generator
01/11/2019
Unit 4 - Pie charts

57. Lab
01/11/2019
Unit 4 - Pie charts

58. Experiments with d3.svg.arc
Download unit_4.zip
Open pie_snippet.js and follow the instructions
01/11/2019
Unit 4 - Pie charts

59. Encapsulated Pie Example
Open encapsulatedPie-LAB-START in FireFox
Examine the source of the main .html file and compare its structure with the diagram on the next page
01/11/2019
Unit 4 - Pie charts

60. Encapsulated Pie Example
01/11/2019
render(ds)
pie1
(structuredPie.js)
sourceDataset1 ds
rr1
(rawRender.js)
layoutData
(rawRender.js)
Uinit 1.5 The general update pattern

61. Add a hover behaviour
Open pieRenderer.js, examine the public functions and note that its structure is very similar to keyedBarchart.js of the previous lab
Locate the GUP_Arcs in UPDATE 2 (i.e. in pieRenderer.js).
Use the d3 “.on( )” method add a “mouseover” behaviour that prints the value of d.data to the console (hint: have a look at GUP_bars() in keyedBarchart.js).
01/11/2019
Unit 4 - Pie charts

62. Add Public Access to Hover callback
Add a new public setter function to keyedBarchart.js that allows you to overwrite the mouseover callback function. (hint: similar to click callback code in pieRenderer.js)
Locate the GUP_Arcs in UPDATE 2 (in pieRenderer.js).
Use the d3 “.on( )” method add a “mouseover” behaviour that prints the value of d.data to the console (hint: have a look at GUP_bars() in keyedBarchart.js).
Check that this works by defining and loading in a hover callback function from the main .html file that prints ‘hello’ or something to the console
01/11/2019
Unit 4 - Pie charts

63. Combining piecharts and barcharts
Copy the working version of keyedBarchart.js and keyedDataGenerator.js from the keyed barchart lab into your directory
Include these in your main .html file using something like:
Add a div: <div id=chart1DIV></div>
Add code to create an instance dg1 of a dataGenerator
Add code to create an instance chart1 of a barchart (link to #chart1DIV)
Add code to load and render dataGenerator data
Check that you can now see both the bar and pie charts
01/11/2019
Unit 4 - Pie charts

64. Interaction from pie to barchart
Create a callback function uses the fill colour of the active DOM element to change the colour of the barchart
Hint: to access the fill attribute of the SVG arc inside the callback you need to use something like:
Use the public function that you added to the pie chart renderer to load the new callback into the pie chart
var DOMelement = this;
var fill = DOMelement.getAttribute("fill")
01/11/2019
Unit 4 - Pie charts

65. Finally
Go to
Grab some different colour schemes (note .js format output)
Load into the .range of the color scale function
01/11/2019
Unit 4 - Pie charts

66. END
01/11/2019
Unit 4 - Pie charts