Post on 07-Apr-2020
transcript
Data-Driven Documents:A JavaScript Library
By Zachary Boulanger
About meUndergraduate (Class of 2017)
Studying Computer Science,Minors in German and Multidisciplinary Design
Completed the Multidisciplinary Design Program in 2016
Front-End Developer on the ProQuest Search Visualization team
http://zachboulanger.me/
OutlineJS/D3 Introduction
D3 Features
Example Walkthrough
JavaScript - What is it?Dynamic, weakly-typed scripting
language
Can be Object-Oriented, Functional, Procedural, etc
HTML DOM (Document Object Model)
Tree-like structure of a web pageVery important for D3!
http://www.w3schools.com/js/js_htmldom.asp
JavaScript - Why/How is it used?Mainly used in Web Dev, also in App Dev
Mainly Client-Side, also Server-Side
Very powerful and widely used, but need to be carefulSecurity, load times, etc very important to think about
Many frameworks and libraries!jQuery, Node.js, Bootstrap, D3, etc
D3.js - According to https://d3js.org/JavaScript Library combining:
powerful visualization componentsa data-driven approach to DOM manipulation
Extremely fast
Supports large data sets and dynamic behaviors for interaction/animation
Basically, allows you to easily and dynamically create HTML, SVGs, and CSS to fit your data
D3.js - What can it do?Create charts and visualizations based on your data
Anything from simple html tables to complex interactive zooming bubble charts with SVGs
Allows you to create may similar HTML structures at once
E.g. create many divs with the same CSS class to house your content/data
Similar to creating a function to contain code that you reuse a lot
D3.js - Examples
http
://bl
.ock
s.or
g/m
bost
ock/
f85f
fb3a
5ac5
1859
8043
http
://bl
.ock
s.or
g/m
bost
ock/
ca5b
03a3
3affa
4160
321
D3.js - Examples
http
://bl
.ock
s.or
g/m
bost
ock/
b2fe
e5da
e985
55cf
78c9
e4c5
074b
87c3
http
://bl
.ock
s.or
g/m
bost
ock/
6fea
d6d1
378d
6df5
ae77
bb6a
719a
fcb2
D3.js - ExamplesMany other examples on the site!
All show the (possibly interactive) example and code
See more here:
https://github.com/d3/d3/wiki/Gallery
Example Walkthrough - basics“Normal” Javascript:
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}
D3 Equivalent:
d3.selectAll("p").style("color", "white");
Example Walkthrough - basicsThis code:1. Selects the “body” html tag2. Selects all “p” tags in body (if there are any)3. Defines the data points (array of ints)4. Applies this text value to each p tag,
creating more p tags if there aren’t enough
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d +
"!"; });
Example Walkthrough - Animated Pie Chart
http://bl.ocks.org/dbuezas/9306799
*Note: This will be a web-based tutorial
Example Walkthrough - Animated Pie ChartI highly suggest getting the walkthrough code from the website:
http://bl.ocks.org/dbuezas/9306799
And then following along with the tutorial as I explain, that way you don’t have to try and write it all out while also listening.
Example Walkthrough - Animated Pie Chart1. Create a new file: index.html
a. This can be done by opening your text editor of choice, e.g. notepad
b. Make sure to save as .html not .txt
2. Add in this basic html webpage templatea. Mostly just template stuff for nowb. We add in our randomize button, the only
HTML we’ll hardcode
c. We also add in the D3 js library to use
3. Note: This uses version 3 of D3.a. They have just released version 4, and
while some things are different, v3 still exists and this example will still work
<!DOCTYPE html>
<style>
</style>
<body>
<button class="randomize">randomize</button>
<script src=
"http://d3js.org/d3.v3.min.js"></script>
<script>
</script>
</body>
Example Walkthrough - Animated Pie Chart1. Add this code between the script tags:2. The first chunk goes into the body tag and
adds in an SVG object, then a g object within that.
a. Note: D3 will still execute the code, even though it’s in a variable. The variable allows us to save our spot, like a bookmark, so that our later code can reference this area.
3. We then add in three more g objects and give each of them a class.
a. If you were to look at our site now, you would see nothing, but could view source and see the objects we created as html.
<script>
var svg = d3.select("body")
.append("svg")
.append("g");
svg.append("g")
.attr("class", "slices");
svg.append("g")
.attr("class", "labels");
svg.append("g")
.attr("class", "lines");
</script>
Example Walkthrough - Animated Pie Chart1. Underneath our last code, add this
2. The first chunk is just some variable declaration for later.
3. The next part allows us to create the “pie”.a. D3.layout contains all the pre-made charts
and such, e.g. pie, pack, tree, etc
b. We save our place again with a variable for reference later
c. We override the default value function to match the way our data will be set up (more info on this later)
<script>
...
var width = 960,
height = 450,
radius = Math.min(width, height) / 2;
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
</script>
Example Walkthrough - Animated Pie Chart<script>
...
var arc = d3.svg.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.4);
var outerArc = d3.svg.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
svg.attr("transform", "translate(" + width / 2 + ","
+ height / 2 + ")");
var key = function(d){ return d.data.label; };
var color = d3.scale.ordinal()
.domain(["Lorem ipsum", "dolor sit", "amet",
"consectetur", "adipisicing", "elit", "sed",
"do", "eiusmod", "tempor", "incididunt"])
.range(["#98abc5", "#8a89a6", "#7b6888",
"#6b486b", "#a05d56", "#d0743c",
"#ff8c00"]);
</script>
Example Walkthrough - Animated Pie Chart<script>
...
function randomData (){
var labels = color.domain();
return labels.map(function(label){
return { label: label, value: Math.random()
}
});
}
change(randomData());
d3.select(".randomize")
.on("click", function(){
change(randomData());
});
</script>
Example Walkthrough - Animated Pie Chart<script>
...
function change(data) {
/* ------- PIE SLICES -------*/
var slice =
svg.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice.enter()
.insert("path")
.style("fill", function(d) { return
color(d.data.label); })
.attr("class", "slice");
slice.transition().duration(1000)
.attrTween("d", function(d) {
this._current = this._current || d;
var interpolate =
d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
})
slice.exit()
.remove();
Example Walkthrough - Animated Pie Chart
...
/* ------- TEXT LABELS -------*/
var text =
svg.select(".labels").selectAll("text")
.data(pie(data), key);
text.enter()
.append("text")
.attr("dy", ".35em")
.text(function(d) {
return d.data.label;
});
function midAngle(d){
return d.startAngle + (d.endAngle -
d.startAngle)/2;
}
Example Walkthrough - Animated Pie Charttext.transition().duration(1000)
.attrTween("transform", function(d) {
this._current = this._current || d;
var interpolate =
d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * (midAngle(d2) <
Math.PI ? 1 : -1);
return "translate("+ pos +")";
};
})
.styleTween("text-anchor", function(d){
this._current = this._current || d;
var interpolate =
d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ?
"start":"end";
};
});
text.exit()
.remove();
Example Walkthrough - Animated Pie Chart/* ------- SLICE TO TEXT POLYLINES -------*/
var polyline =
svg.select(".lines").selectAll("polyline")
.data(pie(data), key);
polyline.enter()
.append("polyline");
polyline.transition().duration(1000)
.attrTween("points", function(d){
this._current = this._current || d;
var interpolate =
d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
var d2 = interpolate(t);
var pos = outerArc.centroid(d2);
pos[0] = radius * 0.95 *
(midAngle(d2) < Math.PI ? 1 : -1);
return [arc.centroid(d2),
outerArc.centroid(d2), pos];
};
});
polyline.exit()
.remove();
};
</script>
</body>
Example Walkthrough - Animated Pie ChartThat doesn’t look right…
We need CSS!
Example Walkthrough - Animated Pie Chart<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial,
sans-serif;
width: 960px;
height: 500px;
position: relative;
}
svg {
width: 100%;
height: 100%;
}
path.slice{
stroke-width:2px;
}
polyline{
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
</style>
Example Walkthrough - Animated Pie Chart
We did it! (Click “randomize” to see the animation in action)
Thank you!Any Questions?