July 27, 2017 data visualization meetup presentation

1. Scrollytelling
1
using d3.js

2. 2
WTF is
Scrolly-
telling?

3. Scrolling is a continuation
and clicking is a decision
Joshua Porter
3

4. 4

5. 5

6. 6

7. 7
Triggers a
function
when our
content is
in the
viewport

8. 8
https://d3js.org/

9. D3 based
Chart libraries
9
C3.js
NVD3
Dimple.js
Rickshaw

10. The world’s first bar chart
10

11. Whatever can be
expressed in numbers,
may be represented by
lines.
William Playfair
11

12. Gestalt
Principles
12

13. 13
All data
in D3
are arrays

14. Arrays & Conditionals
14
//data
["dog", "cat", "mouse" ].map( (d,i) => d == "mouse" ? "MONKEY" : d); //=> ["dog", "cat", "MONKEY"]
[2,4,6,8,10].map( (d,i) => d < 8 ? d * 3 : d); //=> [6,12,18,8,10]
[2,4,6,8,10].map( (d,i) => d / 2); //=> [1,2,3,4,5]
//index
["dog", "cat", "mouse"].map( (d,i) => i == 0 ? "pig" : d); //=> ["pig", "cat", "mouse"]
[2,4,6,8,10].map( (d,i) => i < 1 ? "snake" : d ); //=> ["snake", 4,6,8,10]
[2,4,6,8,10].map( (d,i) => i > 3 ? d * 2 : d); //=> [2,4,6,8,20]

15. File Types
15
an XMLHttpRequest.
a text file.
a JSON blob.
an HTML document fragment.
an XML document fragment.
a comma-separated values (CSV) file.
a tab-separated values (TSV) file.

16. 16
fatalities.csv
Year,Large Trucks,Pedestrians
1975,2757,4305
1976,3071,4893
script.js
//data is an array of objects!
d3.csv("fatalities.csv", function(error, data) {
data.filter( d => d["Large Trucks"] );
});
//returns ONLY the Large Trucks column
2757
3071

17. 17
fatalities.tsv
Year Large Trucks
Pedestrians
1975 2757 4305
1976 3071 4893
script.js
//data is an array of objects!
d3.tsv("fatalities.tsv", function(error, data) {
data.filter( d => d["Pedestrians"] );
});
//returns ONLY the Pedestrian column
4305
4893

18. Attributes
18
d3.select('rect.yellow')
.attr('x',
150)
.attr('y',
400)
.attr('wid
th', 6)
.attr('hei
ght', 6)
d3.select('rect.white')
.attr('x',
250)
.attr('y',
250)
.attr('wid
th', 12)
.attr('hei
ght', 6)
d3.select('rect.orange')
.attr('x',
400)
0
500px
500px
SVG

19. Select
19
d3.select('h1')
.style('transform' ,
'uppercase')
.style('font-size' , '24px')
.style('color' , 'green')
.style('margin-bottom',
'30px')
d3.selectAll('p')
.style('color' , 'red')
.style('padding-bottom' ,
'10px')
d3.select('body')
.append('div')
.text('Yo Yo!')
.style('background' ,
'black')
.style('color' , 'white')
HELLO
Lorem ipsum dolor sit amet, est percipit forensibus
argumentum et, id mel tale mundi aliquid.
Lorem ipsum dolor sit amet, est percipit forensibus
argumentum et, id mel tale mundi aliquid.
Lorem ipsum dolor sit amet, est percipit forensibus
argumentum et, id mel tale mundi aliquid.
Yo Yo!

20. Joining Data
3 Steps
20
What element we want?
.selectAll()
How many elements?
.data().enter()
Append element
.append()

21. Joins
21
//creates an array of 5 numbers
let our_data = d3.range(5);
//creates 5 <div> elements
d3.selectAll('div')
.data(our_data).enter
()
.append('div')
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//creates an array of 1
let our_data = d3.range(1);
//creates 1 <g> elements
let groups = d3.selectAll('g')
.data(our_data).e
nter()
.append('g')
//creates 1 element each
groups.append('rect')
groups.append('circle')
groups.append('text')
<g>
<rect></rect>
<circle></circle>
<text></text>
</g>
//creates an array of 4 numbers
let our_data = d3.range(4);
//creates 5 <g> elements
let groups = d3.selectAll('g')
.data(our_data).e
nter()
.append('g')
//creates 5 <rect> elements
groups
.append('rect')
<g><rect></rect></g>
<g><rect></rect></g>
<g><rect></rect></g>
<g><rect></rect></g>

22. Transitions
22
//index.html
<div></div>
<div></div>
<div></div>
<div></div>
//script.js
d3.selectAll('div')
.transition()
.delay( (d,i) => 500 * i )
.duration(600)
.ease('elastic')
.style('width' , '300px')

23. D3 Easing
23

24. Resources
▪ http://mobilev.is/ - Mobile visualization
▪ https://pudding.cool/process/responsive-scrollytelling/ - Responsive scrolling
▪ https://pudding.cool/process/how-to-implement-scrollytelling/ - Scrolling libraries
▪ https://www.dashingd3js.com/table-of-contents - D3 tutorials
▪ http://vallandingham.me/scroll_talk/examples/ - Jim Vallandingham
▪ https://www.youtube.com/watch?v=fYQGgaE_b4I - Jim Vallandingham
24

25. Live coding time!
http://blockbuilder.org/baronwatts/2a50ae537d7c46670aa5eb30254ef751
25