Browse files

added zooming + centering on country

  • Loading branch information...
1 parent 33828bf commit 139567d70c380ab70cc7ce8014bacbff9ff4b3af @seanslerner committed Jul 14, 2012
Showing with 75 additions and 12 deletions.
  1. +1 −1 earthquake.rb
  2. +73 −11 views/index.erb
  3. +1 −0 views/layout.erb
View
2 earthquake.rb
@@ -34,7 +34,7 @@ def scrape
get '/' do
erb :index
end
-
+
get '/earthquake-data.json' do
scrape.to_json
end
View
84 views/index.erb
@@ -1,21 +1,83 @@
-<svg width="1000" height="750"></svg>
+<style>
+
+.background {
+ fill: none;
+ pointer-events: all;
+}
+
+#states {
+ fill: #aaa;
+ stroke: #fff;
+ stroke-width: 1.5px;
+}
+
+#states .active {
+ fill: steelblue;
+}
+
+</style>
<script>
-var map = d3.select('svg').append("g").attr("class", "map");
+var width = 1000,
+ height = 750,
+ centered;
+
var projection = d3.geo.mercator()
- .scale([1000])
- .translate([550, 500]);
-var path = d3.geo.path().projection(projection);
+ .scale(width)
+ .translate([10, 100]);
-d3.json("countries.json", function(collection) {
- map.selectAll("path")
- .data(collection.features)
+var path = d3.geo.path()
+ .projection(projection);
+
+var svg = d3.select(".container").append("svg")
+ .attr("width", width)
+ .attr("height", height);
+
+svg.append("rect")
+ .attr("class", "background")
+ .attr("width", width)
+ .attr("height", height)
+ .on("click", click);
+
+var g = svg.append("g")
+ .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
+ .append("g")
+ .attr("id", "states");
+
+d3.json("countries.json", function(json) {
+ g.selectAll("path")
+ .data(json.features)
.enter().append("path")
- .attr("d", path);
+ .attr("d", path)
+ .on("click", click);
});
+function click(d) {
+ var x = 0,
+ y = 0,
+ k = 1;
+
+ if (d && centered !== d) {
+ var centroid = path.centroid(d);
+ x = -centroid[0];
+ y = -centroid[1];
+ k = 4;
+ centered = d;
+ } else {
+ centered = null;
+ }
+
+ g.selectAll("path")
+ .classed("active", centered && function(d) { return d === centered; });
+
+ g.transition()
+ .duration(1000)
+ .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
+ .style("stroke-width", 1.5 / k + "px");
+}
+
d3.json("/earthquake-data.json", function(collection) {
- d3.select("svg").selectAll("path")
+ g.selectAll("path#point")
.data(collection.features)
.enter().append("path")
.attr("id", "point")
@@ -32,7 +94,7 @@ d3.json("/earthquake-data.json", function(collection) {
})
.on('mouseout', function(d){
d3.select(this).attr('id', 'point');
- });
+ });;
});
</script>
View
1 views/layout.erb
@@ -17,6 +17,7 @@
}
.container {
background: white;
+ padding-left: 5px;
}
.map {
border: 1px solid black;

0 comments on commit 139567d

Please sign in to comment.