Last active
March 10, 2017 01:01
-
-
Save pbogden/eb4cafea0a3087fc1c2219c153dd2c63 to your computer and use it in GitHub Desktop.
Class 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
d3.legend = function() { | |
// Defaults | |
var t = [0, 0], | |
cb = null, | |
colors = d3.scaleOrdinal() | |
.domain(["A", "B", "C", "D"]) | |
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b"]); | |
var box = 38, | |
padding = 2, | |
dx = box + padding; | |
function legend(selection) { | |
selection.each(function() { | |
var legend = d3.select(this).selectAll(".legend") | |
.data( colors.domain().slice().reverse() ) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(" + t[0] + "," + (t[1] + i * dx) + ")"; }); | |
legend.append("rect") | |
.attr("x", 0 ) | |
.attr("width", box) | |
.attr("height", box) | |
.style("fill", colors); | |
legend.append("text") | |
.attr("x", - 2 * padding ) | |
.attr("y", box / 2) | |
.attr("dy", ".35em") | |
.style("text-anchor", "end") | |
.style("font-size", "0.8em") | |
.text(function(d) { return d; }); | |
if (typeof cb == "function") cb(); | |
}) | |
} | |
legend.translate = function(_) { | |
if (!arguments.length) return t; | |
t = _; | |
return legend; | |
}; | |
legend.colors = function(_) { | |
if (!arguments.length) return colors; | |
colors = _; | |
return legend; | |
}; | |
legend.cb = function(_) { | |
if (!arguments.length) return cb; | |
cb = _; | |
return legend; | |
}; | |
return legend; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>Class 3</title> | |
<style> | |
body { | |
position: absolute; | |
margin: 0px; | |
} | |
svg { | |
background-color: #4682b4; | |
} | |
.info { | |
font-family: sans-serif; | |
color: #000; | |
position: absolute; | |
top: 450px; | |
left: 800px; | |
} | |
path { | |
fill: #555555; | |
stroke: #eeeeee; | |
} | |
path.quake { | |
fill: crimson; | |
} | |
</style> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v2.min.js"></script> | |
<script src="d3.legend.js"></script> | |
<body> | |
<script> | |
var width = 960, height = 500; | |
var data; // declare a global variable | |
var colors = d3.scaleOrdinal() | |
.domain( ["A", "B", "C", "D"] ) | |
.range(["#fe9929", "#ec7014", "#cc4c02", "#8c2d04"]); | |
var legend = d3.legend() | |
.translate([ width / 4 , height / 4 ]) | |
.colors(colors) | |
.cb(function() { console.log("Done!"); }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.on("mousemove", mousemoved); | |
var layer1 = svg.append('g') | |
var layer2 = svg.append("g") | |
layer2.call(legend); | |
var info = d3.select("body").append("div") | |
.attr("class", "info"); | |
var projection = d3.geoAlbersUsa(); | |
var path = d3.geoPath() | |
.projection(projection); | |
// Read and plot the earthquake data | |
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"; | |
d3.json(usgs, plotQuakes); | |
// Read and plot the state & county boundaries | |
var url = "https://umbcvis.github.io/classes/class-03/us.json" | |
d3.json(url, plotStates); | |
function plotQuakes(error, json) { | |
if (error) return console.log(error); | |
// Global variable, data, will be visible in the console | |
data = json; | |
// Extract an array of feature objects, one for each earthquake | |
var features = json.features; | |
// Plot the earthquakes | |
layer2.selectAll("path.quake") | |
.data(features) | |
.enter().append("path") | |
.attr("class", "quake") | |
.attr("d", path) | |
} | |
function plotStates(error, json) { | |
if (error) return console.log(error); | |
// Create array of GeoJSON features -- this defines the global variable "data" | |
var features = topojson.feature(json, json.objects.us).features; | |
// Plot the features | |
layer1.selectAll("path") | |
.data(features) | |
.enter() | |
.append("path") | |
.attr("d", path); | |
} | |
function mousemoved() { | |
info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale())); | |
} | |
function formatLocation(p, k) { | |
var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f"); | |
return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " " | |
+ (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E"); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment