Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 23, 2016 20:56
Show Gist options
  • Save anonymous/c43d21b8c5a1f981c245a050904e3a4c to your computer and use it in GitHub Desktop.
Save anonymous/c43d21b8c5a1f981c245a050904e3a4c to your computer and use it in GitHub Desktop.
Download ZIP
D3 US Color Map // source http://jsbin.com/ruracuzeve
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>D3 US Color Map</title>
<style id="jsbin-css">
body {
background:black;
}
#states {
fill: #aaa;
stroke: #fff;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
/* stroke-dasharray: 20,10,5,5,5,10; */
}
</style>
</head>
<body>
<script src="https://libraries.cdnhttps.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
<div id="map"></div>
<script id="jsbin-javascript">
//set global vars for width\height and set to window.innerWidth\innerHeight
var width = window.innerWidth;
var height = window.innerHeight;
//add url for usa.json
var url = "https://gist.githubusercontent.com/Bijesse/3bc074f9852d0380de5596b13de183da/raw/30a198b958b7a5e48cc9576e0b01809a786a329d/usa.json"
//use d3.select() to append an svg element to body and define a width\height
var svg = d3.select("#map").append("svg").attr("width", width).attr("height", height);
//add a projection for d3.geo.albersUsa()
var projection = d3.geo.albersUsa().scale(1070).translate([width / 2, height / 2])
//add a geo path generator with it's projection method
var path = d3.geo.path().projection(projection)
//add a convenience method to pull in json data and populate the map
d3.json(url, function(err, us) {
svg
.attr("id","states")
.selectAll("path")
.data(us.features)
.enter().append("path")
.attr("d",path)
//gives each region color
.attr("fill",function(d,i){
if(d.properties.region === "South"){return "red"}
else if(d.properties.region === "West"){return "blue"}
else if(d.properties.region === "Midwest"){return "yellow"}
else{return "green"}
})
//when you click on a state you get the wikipedia page for it in a new tab
.on("click", function(d){
var wiki = d.properties.wikipedia;
window.open(wiki, "_blank");
//console.log(d.properties.wikipedia);
})
})
console.log(width);
</script>
<script id="jsbin-source-css" type="text/css">body {
background:black;
}
#states {
fill: #aaa;
stroke: #fff;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
/* stroke-dasharray: 20,10,5,5,5,10; */
}</script>
<script id="jsbin-source-javascript" type="text/javascript">//set global vars for width\height and set to window.innerWidth\innerHeight
var width = window.innerWidth;
var height = window.innerHeight;
//add url for usa.json
var url = "https://gist.githubusercontent.com/Bijesse/3bc074f9852d0380de5596b13de183da/raw/30a198b958b7a5e48cc9576e0b01809a786a329d/usa.json"
//use d3.select() to append an svg element to body and define a width\height
var svg = d3.select("#map").append("svg").attr("width", width).attr("height", height);
//add a projection for d3.geo.albersUsa()
var projection = d3.geo.albersUsa().scale(1070).translate([width / 2, height / 2])
//add a geo path generator with it's projection method
var path = d3.geo.path().projection(projection)
//add a convenience method to pull in json data and populate the map
d3.json(url, function(err, us) {
svg
.attr("id","states")
.selectAll("path")
.data(us.features)
.enter().append("path")
.attr("d",path)
//gives each region color
.attr("fill",function(d,i){
if(d.properties.region === "South"){return "red"}
else if(d.properties.region === "West"){return "blue"}
else if(d.properties.region === "Midwest"){return "yellow"}
else{return "green"}
})
//when you click on a state you get the wikipedia page for it in a new tab
.on("click", function(d){
var wiki = d.properties.wikipedia;
window.open(wiki, "_blank");
//console.log(d.properties.wikipedia);
})
})
console.log(width);</script></body>
</html>
Raw
jsbin.ruracuzeve.css
body {
background:black;
}
#states {
fill: #aaa;
stroke: #fff;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
/* stroke-dasharray: 20,10,5,5,5,10; */
}
Raw
jsbin.ruracuzeve.js
//set global vars for width\height and set to window.innerWidth\innerHeight
var width = window.innerWidth;
var height = window.innerHeight;
//add url for usa.json
var url = "https://gist.githubusercontent.com/Bijesse/3bc074f9852d0380de5596b13de183da/raw/30a198b958b7a5e48cc9576e0b01809a786a329d/usa.json"
//use d3.select() to append an svg element to body and define a width\height
var svg = d3.select("#map").append("svg").attr("width", width).attr("height", height);
//add a projection for d3.geo.albersUsa()
var projection = d3.geo.albersUsa().scale(1070).translate([width / 2, height / 2])
//add a geo path generator with it's projection method
var path = d3.geo.path().projection(projection)
//add a convenience method to pull in json data and populate the map
d3.json(url, function(err, us) {
svg
.attr("id","states")
.selectAll("path")
.data(us.features)
.enter().append("path")
.attr("d",path)
//gives each region color
.attr("fill",function(d,i){
if(d.properties.region === "South"){return "red"}
else if(d.properties.region === "West"){return "blue"}
else if(d.properties.region === "Midwest"){return "yellow"}
else{return "green"}
})
//when you click on a state you get the wikipedia page for it in a new tab
.on("click", function(d){
var wiki = d.properties.wikipedia;
window.open(wiki, "_blank");
//console.log(d.properties.wikipedia);
})
})
console.log(width);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment