About me Data-Driven Documents: A JavaScript...

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>


...

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>


...

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();


...

/* ------- TEXT LABELS -------*/

var text =

svg.select(".labels").selectAll("text")


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) {


var interpolate =




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){


var interpolate =





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")


polyline.enter()

.append("polyline");

polyline.transition().duration(1000)

.attrTween("points", function(d){


var interpolate =





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>


We did it! (Click “randomize” to see the animation in action)

Thank you!Any Questions?

About me Data-Driven Documents: A JavaScript...

Documents

Transcript of About me Data-Driven Documents: A JavaScript...