Skip to content

Commit a6c0298

Browse files
mbostockmbostock
committed
Add W3Conf talk slides.
1 parent b5b7e1d commit a6c0298

59 files changed

Lines changed: 32835 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎talk/20111116/airports-all.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link type="text/css" rel="stylesheet" href="style.css"/>
5+
<style type="text/css">
6+
7+
#states path {
8+
fill: #ccc;
9+
stroke: #fff;
10+
}
11+
12+
path.cell {
13+
fill: none;
14+
pointer-events: all;
15+
stroke: brown;
16+
}
17+
18+
circle {
19+
fill: black;
20+
}
21+
22+
</style>
23+
</head>
24+
<body>
25+
<h2>
26+
<span>U.S. airports</span>, 2008<br>
27+
Voronoi diagram
28+
</h2>
29+
<script type="text/javascript" src="d3/d3.js"></script>
30+
<script type="text/javascript" src="d3/d3.csv.js"></script>
31+
<script type="text/javascript" src="d3/d3.geo.js"></script>
32+
<script type="text/javascript" src="d3/d3.geom.js"></script>
33+
<script type="text/javascript">
34+
35+
var w = 1280,
36+
h = 800;
37+
38+
var projection = d3.geo.azimuthal()
39+
.mode("equidistant")
40+
.origin([-98, 38])
41+
.scale(1400)
42+
.translate([640, 360]);
43+
44+
var path = d3.geo.path()
45+
.projection(projection);
46+
47+
var svg = d3.select("body").insert("svg:svg", "h2")
48+
.attr("width", w)
49+
.attr("height", h);
50+
51+
var states = svg.append("svg:g")
52+
.attr("id", "states");
53+
54+
var cells = svg.append("svg:g")
55+
.attr("id", "cells");
56+
57+
d3.json("us-states.json", function(collection) {
58+
states.selectAll("path")
59+
.data(collection.features)
60+
.enter().append("svg:path")
61+
.attr("d", path);
62+
});
63+
64+
d3.csv("airports.csv", function(airports) {
65+
var positions = [];
66+
67+
airports.forEach(function(airport) {
68+
positions.push(projection([+airport.longitude, +airport.latitude]));
69+
});
70+
71+
// Compute the Voronoi diagram of airports' projected positions.
72+
var polygons = d3.geom.voronoi(positions);
73+
74+
var g = cells.selectAll("g")
75+
.data(airports)
76+
.enter().append("svg:g");
77+
78+
g.append("svg:path")
79+
.attr("class", "cell")
80+
.attr("d", function(d, i) { return "M" + polygons[i].join("L") + "Z"; })
81+
.on("mouseover", function(d, i) {
82+
d3.select("#footer span").text(d.name);
83+
d3.select("#footer .hint").text(d.city + ", " + d.state);
84+
});
85+
86+
g.append("svg:circle")
87+
.attr("cx", function(d, i) { return positions[i][0]; })
88+
.attr("cy", function(d, i) { return positions[i][1]; })
89+
.attr("r", 1.5);
90+
});
91+
92+
</script>
93+
</body>
94+
</html>

‎talk/20111116/airports.csv‎

Lines changed: 3377 additions & 0 deletions
Large diffs are not rendered by default.

‎talk/20111116/airports.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link type="text/css" rel="stylesheet" href="style.css"/>
5+
<style type="text/css">
6+
7+
#states path {
8+
fill: #ccc;
9+
stroke: #fff;
10+
}
11+
12+
path.arc {
13+
pointer-events: none;
14+
fill: none;
15+
stroke: #000;
16+
display: none;
17+
}
18+
19+
path.cell {
20+
fill: none;
21+
pointer-events: all;
22+
}
23+
24+
circle {
25+
fill: steelblue;
26+
fill-opacity: .8;
27+
stroke: #fff;
28+
}
29+
30+
#cells.voronoi path.cell {
31+
stroke: brown;
32+
}
33+
34+
#cells g:hover path.arc {
35+
display: inherit;
36+
}
37+
38+
</style>
39+
</head>
40+
<body>
41+
<h2>
42+
<span>U.S. commercial airports</span>, 2008<br>
43+
great arcs and symbol map
44+
</h2>
45+
<div style="position:absolute;bottom:0;font-size:18px;">
46+
<input type="checkbox" id="voronoi"> <label for="voronoi">show Voronoi</label>
47+
</div>
48+
<script type="text/javascript" src="d3/d3.js"></script>
49+
<script type="text/javascript" src="d3/d3.csv.js"></script>
50+
<script type="text/javascript" src="d3/d3.geo.js"></script>
51+
<script type="text/javascript" src="d3/d3.geom.js"></script>
52+
<script type="text/javascript">
53+
54+
var w = 1280,
55+
h = 800;
56+
57+
var projection = d3.geo.azimuthal()
58+
.mode("equidistant")
59+
.origin([-98, 38])
60+
.scale(1400)
61+
.translate([640, 360]);
62+
63+
var path = d3.geo.path()
64+
.projection(projection);
65+
66+
var svg = d3.select("body").insert("svg:svg", "h2")
67+
.attr("width", w)
68+
.attr("height", h);
69+
70+
var states = svg.append("svg:g")
71+
.attr("id", "states");
72+
73+
var circles = svg.append("svg:g")
74+
.attr("id", "circles");
75+
76+
var cells = svg.append("svg:g")
77+
.attr("id", "cells");
78+
79+
d3.select("input[type=checkbox]").on("change", function() {
80+
cells.classed("voronoi", this.checked);
81+
});
82+
83+
d3.json("us-states.json", function(collection) {
84+
states.selectAll("path")
85+
.data(collection.features)
86+
.enter().append("svg:path")
87+
.attr("d", path);
88+
});
89+
90+
d3.csv("flights-airport.csv", function(flights) {
91+
var linksByOrigin = {},
92+
countByAirport = {},
93+
locationByAirport = {},
94+
positions = [];
95+
96+
var arc = d3.geo.greatArc()
97+
.source(function(d) { return locationByAirport[d.source]; })
98+
.target(function(d) { return locationByAirport[d.target]; });
99+
100+
flights.forEach(function(flight) {
101+
var origin = flight.origin,
102+
destination = flight.destination,
103+
links = linksByOrigin[origin] || (linksByOrigin[origin] = []);
104+
links.push({source: origin, target: destination});
105+
countByAirport[origin] = (countByAirport[origin] || 0) + 1;
106+
countByAirport[destination] = (countByAirport[destination] || 0) + 1;
107+
});
108+
109+
d3.csv("airports.csv", function(airports) {
110+
111+
// Only consider airports with at least one flight.
112+
airports = airports.filter(function(airport) {
113+
if (countByAirport[airport.iata]) {
114+
var location = [+airport.longitude, +airport.latitude];
115+
locationByAirport[airport.iata] = location;
116+
positions.push(projection(location));
117+
return true;
118+
}
119+
});
120+
121+
// Compute the Voronoi diagram of airports' projected positions.
122+
var polygons = d3.geom.voronoi(positions);
123+
124+
var g = cells.selectAll("g")
125+
.data(airports)
126+
.enter().append("svg:g");
127+
128+
g.append("svg:path")
129+
.attr("class", "cell")
130+
.attr("d", function(d, i) { return "M" + polygons[i].join("L") + "Z"; })
131+
.on("mouseover", function(d, i) { d3.select("h2 span").text(d.name); });
132+
133+
g.selectAll("path.arc")
134+
.data(function(d) { return linksByOrigin[d.iata] || []; })
135+
.enter().append("svg:path")
136+
.attr("class", "arc")
137+
.attr("d", function(d) { return path(arc(d)); });
138+
139+
circles.selectAll("circle")
140+
.data(airports)
141+
.enter().append("svg:circle")
142+
.attr("cx", function(d, i) { return positions[i][0]; })
143+
.attr("cy", function(d, i) { return positions[i][1]; })
144+
.attr("r", function(d, i) { return Math.sqrt(countByAirport[d.iata]); })
145+
.sort(function(a, b) { return countByAirport[b.iata] - countByAirport[a.iata]; });
146+
});
147+
});
148+
149+
</script>
150+
</body>
151+
</html>

‎talk/20111116/bar-code.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
5+
<link type="text/css" rel="stylesheet" href="style.css"/>
6+
</head>
7+
<body>
8+
<h2>
9+
source excerpt<br>
10+
bar chart
11+
</h2>
12+
<pre style="font-size:32px;"><code>var data = [63, 39, 31, 53, 25, 32, 175, 69, 51],
13+
x = d3.scale.linear()…, // data ↦ width
14+
y = d3.scale.ordinal()…; // index ↦ y
15+
16+
// Data ↦ Element
17+
var rect = svg.selectAll("rect")
18+
.data(data);
19+
20+
// Data Attributes ↦ Element Attributes
21+
rect.enter().append("svg:rect")
22+
.attr("width", function(d, i) { return x(d); })
23+
.attr("y", function(d, i) { return y(i); })
24+
.attr("height", y.rangeBand());</code></pre>
25+
<script type="text/javascript" src="hijs/hi.js"></script>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)