xxxxxxxxxx
<html>
<head>
<style type="text/css">
body {
font: 300 36px "Helvetica Neue";
height: 640px;
margin: 80px 160px 80px 160px;
overflow: hidden;
position: relative;
width: 960px;
}
a:link, a:visited {
color: #777;
text-decoration: none;
}
a:hover {
color: #666;
}
blockquote {
margin: 0;
}
blockquote:before {
content: "“";
position: absolute;
left: -.4em;
}
blockquote:after {
content: "”";
position: absolute;
}
body > ul {
margin: 0;
padding: 0;
}
h1 {
font-size: 64px;
}
h1, h2, h3 {
font-weight: inherit;
margin: 0;
}
h2, h3 {
text-align: right;
font-size: inherit;
position: absolute;
bottom: 0;
right: 0;
}
h2 {
font-size: 24px;
position: absolute;
}
h3 {
bottom: -20px;
font-size: 18px;
}
.invert {
background: #1f1f1f;
color: #dcdccc;
}
.invert h2, .invert h3 {
color: #7f9f7f;
}
.string, .regexp {
color: #f39;
}
.keyword {
color: #00c;
}
.comment {
color: #777;
font-style: oblique;
}
.number {
color: #369;
}
.class, .special {
color: #1181B8;
}
body > svg {
position: absolute;
top: -80px;
left: -160px;
}
.states {
fill: #ccc;
}
.state-borders {
fill: none;
stroke: #fff;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
}
.airport-arcs {
display: none;
fill: none;
stroke: #000;
}
.airport-cell {
fill: none;
pointer-events: all;
}
.airports circle {
fill: steelblue;
stroke: #fff;
pointer-events: none;
}
.airport:hover .airport-arcs {
display: inline;
}
svg:not(:hover) .airport-cell {
stroke: #000;
stroke-opacity: .2;
}
</style>
</head>
<body>
<h2>
<span>U.S. commercial airports</span>, 2008<br>
great arcs and symbol map
</h2>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript">
var width = 1280,
height = 800;
var projection = d3.geo.albersUsa()
.scale(1400)
.translate([640, 340]);
var path = d3.geo.path()
.projection(projection);
var voronoi = d3.geom.voronoi()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.clipExtent([[0, 0], [width, height]]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "us.json")
.defer(d3.csv, "airports.csv")
.defer(d3.csv, "flights.csv")
.await(ready);
function ready(error, us, airports, flights) {
var airportById = d3.map(),
positions = [];
airports.forEach(function(d) {
airportById.set(d.iata, d);
d.outgoing = [];
d.incoming = [];
});
flights.forEach(function(flight) {
var source = airportById.get(flight.origin),
target = airportById.get(flight.destination),
link = {source: source, target: target};
source.outgoing.push(link);
target.incoming.push(link);
});
airports = airports.filter(function(d) {
if (d.count = Math.max(d.incoming.length, d.outgoing.length)) {
d[0] = +d.longitude;
d[1] = +d.latitude;
var position = projection([d[0], d[1]]);
if (position) {
d.x = position[0];
d.y = position[1];
} else {
d.x = d[0];
d.y = d[1];
}
return true;
}
});
voronoi(airports)
.forEach(function(d) { d.point.cell = d; });
svg.append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("class", "states")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "state-borders")
.attr("d", path);
var airport = svg.append("g")
.attr("class", "airports")
.selectAll("g")
.data(airports.sort(function(a, b) { return b.count - a.count; }))
.enter().append("g")
.attr("class", "airport");
airport.append("path")
.attr("class", "airport-cell")
.attr("d", function(d) { return d.cell.length ? "M" + d.cell.join("L") + "Z" : null; })
.on("mouseover", function(d, i) { d3.select("h2 span").text(d.name); });
airport.append("g")
.attr("class", "airport-arcs")
.selectAll("path")
.data(function(d) { return d.outgoing; })
.enter().append("path")
.attr("d", function(d) { return path({type: "LineString", coordinates: [d.source, d.target]}); });
airport.append("circle")
.attr("transform", function(d) { return "translate(" + projection(d) + ")"; })
.attr("r", function(d, i) { return Math.sqrt(d.count); });
}
d3.select("input[type=checkbox]").on("change", function() {
cells.classed("voronoi", this.checked);
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/queue.v1.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js
https://d3js.org/topojson.v1.min.js