Skip to content

Instantly share code, notes, and snippets.

@qaisarmehmood
Forked from anonymous/index.html
Created February 23, 2017 22:28
Show Gist options
  • Save qaisarmehmood/a58b2523a5257bf4476db91fd1090ff3 to your computer and use it in GitHub Desktop.
Save qaisarmehmood/a58b2523a5257bf4476db91fd1090ff3 to your computer and use it in GitHub Desktop.
class 3 - states // source http://jsbin.com/bozutezomo
<!DOCTYPE html>
<meta charset="utf-8">
<title>class 3 - states</title>
<style>
body {
position: absolute;
margin: 0px;
}
svg {
background-color: none;
}
.info {
font-family: sans-serif;
color: blue;
position: absolute;
top: 450px;
left: 800px;
}
path.quake, circle.quake {
fill: crimson;
fill-opacity: 0.4;
}
path.state {
fill: none;
stroke: #000;
}
path {
fill: none;
stroke: black;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<body>
<script>
var width = 960, height = 500;
var data; // declare a global variable
var data2;
var info = d3.select("body").append("div")
.attr("class", "info");
var projection = d3.geoAlbersUsa();
var path = d3.geoPath()
.projection(projection);
// If you use this URL, you won't need your own copy of the data.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var layer1 = svg.append("g");
var layer2 = svg.append("g");
var quakes = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson";
var url = "https://umbcvis.github.io/classes/class-03/us.json";
d3.json(url, plotStates);
d3.json(quakes, plotQuakes);
function plotStates(error, json)
{
// Create array of GeoJSON features -- this defines the global variable "data"
data = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); });
// Put your code here
// Plot the features
layer2.selectAll("path.state")
.data(data)
.enter()
.append("path")
.attr("class", "state")
.attr("d", path)
}
function plotQuakes(error, json)
{
data2 = json;
var features = data2.features;
// Put your code here
// Plot the features
layer1.selectAll("path.quake")
.data(features)
.enter().append("path")
.attr("class", "quake")
.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>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<meta charset="utf-8">
<title>class 3 - states</title>
<style>
body {
position: absolute;
margin: 0px;
}
svg {
background-color: none;
}
.info {
font-family: sans-serif;
color: blue;
position: absolute;
top: 450px;
left: 800px;
}
path.quake, circle.quake {
fill: crimson;
fill-opacity: 0.4;
}
path.state {
fill: none;
stroke: #000;
}
path {
fill: none;
stroke: black;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"><\/script>
<script src="https://d3js.org/topojson.v2.min.js"><\/script>
<body>
<script>
var width = 960, height = 500;
var data; // declare a global variable
var data2;
var info = d3.select("body").append("div")
.attr("class", "info");
var projection = d3.geoAlbersUsa();
var path = d3.geoPath()
.projection(projection);
// If you use this URL, you won't need your own copy of the data.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var layer1 = svg.append("g");
var layer2 = svg.append("g");
var quakes = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson";
var url = "https://umbcvis.github.io/classes/class-03/us.json";
d3.json(url, plotStates);
d3.json(quakes, plotQuakes);
function plotStates(error, json)
{
// Create array of GeoJSON features -- this defines the global variable "data"
data = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); });
// Put your code here
// Plot the features
layer2.selectAll("path.state")
.data(data)
.enter()
.append("path")
.attr("class", "state")
.attr("d", path)
}
function plotQuakes(error, json)
{
data2 = json;
var features = data2.features;
// Put your code here
// Plot the features
layer1.selectAll("path.quake")
.data(features)
.enter().append("path")
.attr("class", "quake")
.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>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment