Skip to content

Instantly share code, notes, and snippets.

@cpopolo
Last active December 4, 2015 07:06
Show Gist options
  • Save cpopolo/10b2acfe349044a3081c to your computer and use it in GitHub Desktop.
Save cpopolo/10b2acfe349044a3081c to your computer and use it in GitHub Desktop.
Module 4 - Store Electricity geo plotted ... with issues.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mercator projection</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style type="text/css">
body {
background-color: gray;
}
h1 {
font-family: "Droid Sans";
font-size: 32px;
text-align: center;
}
p {
font-family: "Droid Sans";
font-size: 14px;
text-align: center;
}
svg {
background-color: white;
}
rect.background {
fill: #fafafe;
}
.orange {
fill: orange;
}
path {
stroke-width: 1px;
stroke: black;
}
circle.wfdata {
fill: yellow;
opacity: 0.6;
stroke: black;
stroke-width: 0.5px;
}
circle.wfdata:hover {
fill: orange;
opacity: 1;
}
#container {
position: relative;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
border-radius: 20px 20px 0 0;
box-shadow: 4px 4px 13px 6px #ccc;
}
</style>
</head>
<body style="background: #fff;">
<div id="container">
<h1>An equal area projection, with some rotation and mouseover.</h1>
<p>Electricity by Store, West Region</p>
<p>Scrollwheel to zoom in/out; mouseover stores for description</p>
<p>States are encoded with a colorscale based on Lon x Lat; North and West is lighter than South and East</p>
</div>
<script type="text/javascript">
function changeColor() {
d3.select(this).transition().duration(300).attr("fill","red");
};
function resetColor() {
d3.select(this).transition().duration(500).attr("fill",function(d) {
return colors(+d.properties.latitude * +d.properties.longitude);
});
};
function bounceMe() {
d3.select(this).transition().duration(100).attr("r",function(d) {
return 1.5 * Math.sqrt(+d.WC2015AVG)/6;
}).transition().duration(50).attr("r", function(d) {
return 1.0 * Math.sqrt(+d.WC2015AVG)/6;
});
}
</script>
<script type="text/javascript">
//Width and height
var w = 900;
var h = 900;
var pi = 3.14;
//Define map projection
var projection = d3.geo.conicEqualArea()
.scale(1070)
.center([ -113, 24 ])
.rotate([0,15])
.translate([ w*2/5, h*2/4 ])
//.scale([ w*4/6 ]);
;
var colors = d3.scale.quantize()
.range(['#f7fcfd','#e5f5f9','#ccece6','#99d8c9','#66c2a4','#41ae76','#238b45','#006d2c','#00441b']);
//Define path generator
var path = d3.geo.path()
.projection(projection)
;
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([h, 3 * h])
.on("zoom", zoomed);
//Create SVG
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
var g = svg.append("g")
.call(zoom);
g.append("rect")
.attr("class", "background")
.attr("width", w)
.attr("height", h);
var json2;
//Load in GeoJSON data
// d3.json("../data/countries/mapshaper_output_50simplified.json", function(json) {
d3.json("ne_10m_admin_1_states_provinces-USA-CAN-MEX.json", function(json) {
json2 = json;
colors.domain([
d3.min(json.features, function(d) { return +d.properties.latitude * +d.properties.longitude; }),
d3.max(json.features, function(d) { return +d.properties.latitude * +d.properties.longitude; })
]);
console.log(colors.domain());
//Bind data and create one path per GeoJSON feature
g.append("g")
.attr("id","states")
.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
//.attr("class","orange")
.attr("fill",function(d) {
return colors(+d.properties.latitude * +d.properties.longitude);
})
.on("mouseover",changeColor)
.on("mouseout",resetColor)
.on("click",clicked)
;
loadWf();
});
function loadWf() {
console.log("okay?");
d3.csv("wf-01-electricity-gpsv.csv", function(wfdata) {
console.log("here");
var circles = g.selectAll("#states circle")
.data(wfdata)
.enter()
.append("circle")
.attr("class","wfdata")
.attr("cx", function(d) {
//[0] returns the first coordinate (x) of the projected value
return projection([d.Glongitude, d.Glatitude])[0];
})
.attr("cy", function(d) {
//[1] returns the second coordinate (y) of the projected value
return projection([d.Glongitude, d.Glatitude])[1];
})
.attr("r", function(d) {
return Math.sqrt(+d.WC2015AVG)/6;
})
.on('mouseover',bounceMe)
.append("title")
.text(function(d) {
return "id=" + d.Glongitude + ' ' + d.Glatitude + ' ' + d.LocationNr + ' ' + d.LocationName;
})
//.style("fill", "blue")
//.style("opacity", 0.75);
});
}
function clicked(d) {
console.log("here in clicked");
var centroid = path.centroid(d),
translate = projection.translate();
projection.translate([
translate[0] - centroid[0] + w / 2,
translate[1] - centroid[1] + h / 2
]);
zoom.translate(projection.translate());
g.selectAll("path").transition()
.duration(100)
.attr("d", path);
}
function zoomed() {
console.log("here in zoomed");
projection.translate(d3.event.translate).scale(d3.event.scale);
g.selectAll("path").attr("d", path);
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment