-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (105 loc) · 7.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html><html><head><title>Lets talk about ... d3.js by Nick</title><meta charset="utf-8"><script src="assets/vendor/slides.js"></script><link href="styles.css" rel="stylesheet" type="text/css"><link href="flex.css" rel="stylesheet" type="text/css"><script src="https://d3js.org/d3.v4.min.js"></script></head><body><section class="slides layout-regular template-default"><article><h2>Lets Talk about...</h2><h1> </h1></article><article><h2>Lets Talk about...</h2><h1>d3.js</h1></article><article><h1>What is d3.js?</h1></article><article><h2>What is d3.js?</h2><ul class="build"><li>D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.</li><li>Open source</li></ul></article><article><h2>What can you do with it?</h2></article><article data-src="assets/images/ex-1.png" class="image"></article><article data-src="assets/images/ex-2.png" class="image"></article><article data-src="assets/images/ex-3.png" class="image"></article><article><h2>Core concept</h2></article><article><h2>data binding</h2><ul><li>You don't work with DOM, you work with data</li><li>d3 binds your data to DOM elements</li><li>provides API to control adding, removing and updating of elements</li></ul></article><article><h2>Enter, Update, Exit</h2></article><article><h2>Enter</h2><ul><li>Triggers for new data items, that don't have a corresponding DOM element</li></ul></article><article> <h2>Enter</h2><pre class="h0">d3.select("#ex1")
.selectAll("span")
.data([4, 8, 15, 16, 23, 42])
.enter().append("span")
.text(d => `I’m number ${d}!`);</pre><div id="ex1" class="example"></div><script>d3.select("#ex1")
.selectAll("span")
.data([4, 8, 15, 16, 23, 42])
.enter().append("span")
.text(d => `I’m number ${d}!`);</script></article><article><h2>Update</h2><ul><li>Triggers for data elements, that already have a DOM element</li></ul></article><article><h2>Update</h2><pre class="h0">d3.select("#ex2")
.selectAll("span")
.data([4, 8, 15, 16, 23, 42])
.enter().append("span")
.text(d => `I’m number ${d}!`);
d3.select("#ex2")
.selectAll("span").data([4, 8, 15, 16, 23, 42])
.text(d => `I was here before, ${d}!`)</pre><div id="ex2" class="example"></div><script>d3.select("#ex2")
.selectAll("span")
.data([4, 8, 15, 16, 23, 42])
.enter().append("span")
.text(d => `I’m number ${d}!`);
d3.select("#ex2")
.selectAll("span")
.data([4, 8, 15, 16, 23, 42])
.text(d => `I was here before, ${d}!`)</script></article><article><h2>Exit</h2><ul><li>Triggers for data items, that don't have a corresponding data element </li></ul></article><article><h2>Exit</h2><pre class="h0">d3.select("#ex2")
.selectAll("span")
.data([4, 8, 15, 16, 23, 42])
.enter().append("span")
.text(d => `I’m number ${d}!`);
d3.select("#ex2")
.selectAll("span").data([4, 8, 15])
.exit()
.remove()</pre><div id="ex3" class="example"></div><script>d3.select("#ex3")
.selectAll("span")
.data([4, 8, 15, 16, 23, 42])
.enter().append("span")
.text(d => `I’m number ${d}!`);
d3.select("#ex3")
.selectAll("span").data([4, 8, 15])
.exit()
.remove()</script></article><article><h2>example</h2><ul><li><a href="https://bl.ocks.org/TheMcMurder/raw/4176a5eaed4df876c6db/">example</a></li></ul></article><article data-src="assets/memes/thats-all-folks.jpg" class="image"></article><article><h2>just kidding</h2></article><article><h2>How to build a plot</h2></article><article data-src="assets/memes/ikea.jpg" class="image"></article><article><h2>plot example</h2><ul><li>scales</li><li>axes</li><li>points(lines/bars/whatever)</li></ul></article><article><h2>scales</h2><ul><li>We need a way to convert our "values domain" to "plot range"</li><li>We have linear, pow and log scales, time scale, quantile and threshold scales</li></ul><pre class="h0">function convert(domain, range, value) {
return range[0] + (domain[1] - domain[0]) * range[1];
}</pre></article><article><h2>scales</h2><pre class="h0">const values = [4, 8, 15, 16, 23, 42];
const scale = d3.scaleLinear()
.domain([Math.min(...values), Math.max(...values)])
.range([0, 100]);
d3.select("#ex4").selectAll("span")
.data(values).enter().append("span")
.text(d => `I’m number ${scale(d)}!`);</pre><div id="ex4" class="example"></div><script>const values = [4, 8, 15, 16, 23, 42];
const scale = d3.scaleLinear().domain([Math.min(...values), Math.max(...values)]).range([0, 100]);
d3.select("#ex4")
.selectAll("span")
.data(values)
.enter().append("span")
.text(d => `I’m number ${scale(d)}!`);</script></article><article> <h2>axes<ul><li>Axes always correspond to the scale</li><li>d3 allows to easily manipulate amout of ticks, format, appearance and position of axes and ticks</li></ul></h2></article><article><h2>axes</h2><pre class="h0">const values = [4, 8, 15, 16, 23, 42];
const scale = d3.scaleLinear()
.domain([Math.min(...values), Math.max(...values)])
const axis = d3.axisBottom(scale);</pre><div id="ex5" class="example"></div><script>const axis = d3.axisBottom(scale);
d3.select("#ex5")
.append("svg")
.attr("viewBox", "0 0 150 100")
.attr("width", "400px")
.attr("height", "300px")
.append("g")
.attr("transform", "translate(0,30)")
.call(axis);</script></article><article><h2>actual plot</h2><ul><li>With d3 you can create any svg elements you want</li><li>most of the times it will be <rects/> for bar plots</li><li>for lines you have buildins to generate lines from points with different interpolation settings (beziers and other stuff)</li></ul></article><article><h2>Okay, let's do a bar plot</h2><pre class="h0">svg.append("g")
.selectAll('rect')
.data(values)
.enter().append('rect')
.attr('x', 0)
.attr('width', d => scale(d))
.attr('y', (d, i) => i * 5)
.attr('height', 3)
.fill('green');</pre></article><article><h2>Okay, we did it</h2><div id="ex6" class="example"></div><script>const color = d3.scaleOrdinal(d3.schemeCategory10);
const transition = d3.transition()
.delay(1000)
.duration(750)
.ease(d3.easeLinear);
const svg = d3.select("#ex6")
.append("svg")
.attr('viewBox', "0 0 100 150")
.attr("width", "1000px")
.attr("height", "800px");
svg.append("g")
.attr("transform", "translate(0, 30)")
.call(axis);
svg.append("g")
.selectAll('rect')
.data(values)
.enter().append('rect')
.attr('x', 0)
.attr('width', 0)
.attr('y', (d, i) => i * 5)
.attr('height', 3)
.attr('fill', (d, i) => color(i))
.transition(transition)
.attr('width', d => scale(d));
</script></article><article data-src="assets/memes/i-lied.png" class="image"></article><article><h2>I lied</h2></article><article><h2>transitions</h2><ul> <li>D3 has transition built-ints, they look similar to jQuery</li><li>Here's the one I used ;)</li></ul><pre class="h0">const transition = d3.transition()
.delay(1000)
.duration(750)
.ease(d3.easeLinear);
.data(...)
...
.attr('wdith', 0)
.transition(transition)
.attr('width', d => scale(d)); </pre></article><article><h2>That's all for today</h2></article><article><h2>Whats next?</h2><ul class="build"><li><a href="https://d3js.org/">Library website</a></li><li><a href="https://github.com/d3/d3/wiki/Gallery">Interactive examples!</a></li><li><a href="https://flowingdata.com/">Even cooler (interactivER) examples </a></li><li><a href="https://healqq.github.io/lets-talk-about---d3">Slides</a></li></ul></article><article class="section"><h1>Questions?</h1></article></section><script src="assets/scripts/main.js"></script></body></html>