Skip to content

Instantly share code, notes, and snippets.

@zekenie

zekenie/index.html

Forked from erikhazzard/index.html
Last active July 26, 2017 21:48
Show Gist options
  • Save zekenie/77c99ed3cc4f958930cad85945e41c1c to your computer and use it in GitHub Desktop.
Save zekenie/77c99ed3cc4f958930cad85945e41c1c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.background {
fill: none;
pointer-events: all;
}
#states {
fill: #aaaaaa;
}
#states .active {
fill: #ff0000;
fill-opacity: .5;
}
#state-borders {
fill: none;
stroke: #ffffff;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
path.link {
fill: none;
stroke: #666666;
stroke-width: 1.5px;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.route {
fill: none;
stroke: blue;
stroke-width: 3px;
}
</style>
<body>
<h2>
<span>NASA Centers</span>
</h2>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 1000,
height = 600,
centered;
var projection = d3.geo.albersUsa()
.scale(1070)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var places = {
GSFC: [-76.852587, 38.991621],
KSC: [-80.650813, 28.524963]
};
var route = {
type: "LineString",
coordinates: [
places.GSFC,
places.KSC
]
};
// Setup groups
// --------------------------------------
// Add groups for arcs and images. If arcs are added before images, they
// will appear under the images.
// order is important
var stateGroup = g.append('g');
var arcGroup = g.append('g');
var imageGroup = g.append('g');
var pointGroup = g.append('g');
// Also, text needs to be added to the `g` group
var point = pointGroup.append("g")
.attr("class", "points")
.selectAll("g")
.data(d3.entries(places))
.enter().append("g")
.attr("transform", function(d) { return "translate(" + projection(d.value) + ")"; });
point.append("text")
.attr("y", 5)
.attr("dx", "1em")
.text(function(d) { return d.key; });
d3.json("us.json", function(error, us) {
// draw states
stateGroup.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path)
.on("click", clicked);
stateGroup.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("id", "state-borders")
.attr("d", path);
d3.csv("nasacenters.csv", function(error, data) {
// Draw images after drawing paths.
imageGroup.selectAll("image").data([0])
.data(data)
.enter()
.append("image")
.attr("xlink:href", "nasalogo.png")
.attr("width", "30")
.attr("height", "30")
.attr("x", function(d) {
return projection([d.Origin_Lng, d.Origin_Lat])[0]-15;
})
.attr("y", function(d) {
return projection([d.Origin_Lng, d.Origin_Lat])[1]-15;
})
// --- Helper functions (for tweening the path)
var lineTransition = function lineTransition(path) {
path.transition()
//NOTE: Change this number (in ms) to make lines draw faster or slower
.duration(0)
.attrTween("stroke-dasharray", tweenDash)
.each("end", function(d,i) {
////Uncomment following line to re-transition
//d3.select(this).call(transition);
//We might want to do stuff when the line reaches the target,
// like start the pulsating or add a new point or tell the
// NSA to listen to this guy's phone calls
//doStuffWhenLineFinishes(d,i);
});
};
var tweenDash = function tweenDash() {
//This function is used to animate the dash-array property, which is a
// nice hack that gives us animation along some arbitrary path (in this
// case, makes it look like a line is being drawn from point A to B)
var len = this.getTotalLength(),
interpolate = d3.interpolateString("0," + len, len + "," + len);
return function(t) { return interpolate(t); };
};
// you can build the links any way you want - e.g., if you have only
// certain items you want to draw paths between
// Alterntively, it can be created automatically based on the data
var links = [];
for(var i=0, len=data.length-1; i<len; i++){
// (note: loop until length - 1 since we're getting the next
// item with i+1)
links.push({
type: "LineString",
coordinates: [
[ data[i].Origin_Lng, data[i].Origin_Lat ],
[ data[i].Destination_lng, data[i].Destination_Lat ]
],
weight: data[i].Approximate_Annual_Volume,
});
}
// Standard enter / update
var pathArcs = arcGroup.selectAll(".arc")
.data(links);
//enter
pathArcs.enter()
.append("path").attr({
'class': 'arc'
}).style({
fill: 'none',
});
var widthScale = d3.scaleLinear()
.domain([1, 68])
.range([1, 6]);
//update
pathArcs.attr({
//d is the points attribute for this path, we'll draw
// an arc between the points using the arc function
d: path
})
.style({
stroke: '#0000ff',
'stroke-width': function(obj) {
console.log(arguments)
return widthScale(obj.weight + "px");
}
})
// Uncomment this line to remove the transition
.call(lineTransition);
//exit
pathArcs.exit().remove();
});
});
function clicked(d) {
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
g.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });
g.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px");
}
</script>
</body>
</html>
Raw
nasacenters.csv
Plant Origin State Origin City Origin Zip Origin_Lat Origin_Lng Dest Country Dest State Dest City Dest Zip Dest_Lat Dest_Lng Norm DZip Approximate_Annual_Volume Miles V ~ Days R2™ Score R™ Score
Niles IL Niles 60714 42.0326335 -87.8107561 USA IL Hoopeston 60942 40.4683209 -87.6383797 60 12 136 0.2 75
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA TX Hawkins 75765 32.6764252 -95.2475518 75 68 141 0.2 4 75
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA CA Chico 95928 39.703129 -121.8334868 95 4 179 0.3 3 3.5
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA CA Williams 95987 39.1274525 -122.3107517 95 3 179 0.3 2 2
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA PA Breinigsville 18031 40.5527911 -75.6557206 18 48 183 0.3 4 75
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA CA Modesto 95354 37.6346973 -120.9704234 95 9 221 0.4 3 2.5
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA OH Medina 44256 41.1524413 -81.8631302 44 8 236 0.4 1 1
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA NJ Hillside 07205 40.695062 -74.223802 07 12 254 0.4 4 75
Niles IL Niles 60714 42.0326335 -87.8107561 USA IL Fort Madison 52627 40.6471631 -91.3469247 52 50 267 0.4 3 75
Niles IL Niles 60714 42.0326335 -87.8107561 USA IN Austin 47102 38.7556739 -85.7974141 47 50 278 0.5 2 3
Niles IL Niles 60714 42.0326335 -87.8107561 USA IL Centralia 62801 38.5284799 -89.1316987 62 12 290 0.5 3 75
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA AR Fort Smith 72903 35.3447622 -94.3667907 72 1 292 0.5 4 3.5
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA TX Pasadena 77507 29.6343793 -95.0702794 77 7 293 0.5 3 2
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA CA Watsonville 95076 36.9199564 -121.7423434 95 10 312 0.5 3 2.75
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA AR Siloam Springs 72761 36.1585967 -94.4593791 72 53 342 0.6 4 75
Dawsonville GA Dawsonville 30534 34.412912 -84.1435136 USA VA Dublin 24084 37.1069309 -80.6842271 24 8 367 0.6 3 4
Niles IL Niles 60714 42.0326335 -87.8107561 USA KY Bowling Green 42101 37.1184213 -86.5400674 42 50 433 0.7 4 75
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA CA Ontario 91761 34.0348144 -117.5848025 91 20 472 0.8 1 1
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA CA Cabazon 92230 33.9155838 -116.7850009 92 34 501 0.8 2 2
Dawsonville GA Dawsonville 30534 34.412912 -84.1435136 USA OH Westerville 43082 40.1625447 -82.8963604 43 4 541 0.9 1 1.5
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA IL Champaign 61822 40.1539406 -88.3433623 61 10 604 1.0 1 1.5
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA MO Hannibal 63401 39.705018 -91.4241426 63 47 718 1.2 4 3
Dawsonville GA Dawsonville 30534 34.412912 -84.1435136 USA IL West Chicago 60185 41.8959291 -88.2169027 60 4 738 1.2 1 1
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA WI Greenville 54942 44.2953936 -88.5371958 54 5 760 1.3 2 2
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA TN Red Boiling Springs 37150 36.5582244 -85.8281458 37 25 772 1.3 2 2
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA AL Birmingham 35217 33.586822 -86.7718017 35 10 811 1.4 3 3
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA IA Cedar Rapids 52406 41.92 -91.68 52 5 862 1.4 3 3
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA AZ Tucson 85747 32.1114393 -110.7360863 85 8 875 1.5 4 75
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA AZ Tucson 85747 32.1114393 -110.7360863 85 12 914 1.5 4 75
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA TN Newport 37821 35.9613014 -83.1863358 37 4 929 1.5 1 2
Niles IL Niles 60714 42.0326335 -87.8107561 USA TX Fort Worth 76106 32.8128038 -97.3462545 76 50 995 1.7 1 2
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA WI Kenosha 53140 42.638141 -87.8255007 53 6 1043 1.7 1 1.5
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA FL Zephyrhills 33542 28.2333268 -82.1768018 33 10 1066 1.8 0 75
Brunswick GA Brunswick 31525 31.3262391 -81.5377013 USA IL Pecatonica 61063 42.2935137 -89.341667 61 14 1116 1.9 1 2
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA WI Manawa 54949 44.4885931 -88.9222277 54 5 1158 1.9 1 2
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA CA Calexico 92231 32.6826471 -115.5799503 92 37 1219 2.0 1 2
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA TX Garland 75042 32.9174964 -96.679851 75 8 1335 2.2 1 1
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA TX Fort Worth 76106 32.8128038 -97.3462545 76 5 1376 2.3 1 2
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA TX Pasadena 77507 29.6343793 -95.0702794 77 10 1471 2.5 1 1.5
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA PA Milton 17847 41.0198678 -76.8028933 17 3 1471 2.5 1 1
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA CA Modesto 95357 37.6644618 -120.8843434 95 21 1624 2.7 1 2.5
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA NV Sparks 89431 39.5401545 -119.7483949 89 1 1635 2.7 0 3.5
Fort Worth TX Fort Worth 76106 32.8128038 -97.3462545 USA CA Williams 95987 39.1274525 -122.3107517 95 14 1768 2.9 1 2.5
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA IL Hoopeston 60942 40.4683209 -87.6383797 60 1 1958 3.3 1 1
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA NC Fletcher 28732 35.4393566 -82.4536115 28 6 2436 4.1 1 2.5
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA CA Anaheim 92801 33.8469812 -117.9541894 92 8 2537 4.2 1 1
Sparks NV Sparks 89434 39.5351309 -119.5803605 USA GA Lyons 30436 32.1645345 -82.2583297 30 4 2569 4.3 1 3.5
Tyrone PA Tyrone 16686 40.6575364 -78.2248291 USA CA American Canyon 94503 38.1876611 -122.2427 94 8 2652 4.4 1 1.5
Display the source blob
Display the rendered blob
Raw
us.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment