Created
August 19, 2013 16:26
-
-
Save tyranja/6271027 to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3: Loading GeoJSON data and generating SVG paths</title> | |
| <script type="text/javascript" src="../d3/d3.v3.js"></script> | |
| <style type="text/css"> | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: 100px; | |
| padding: 5px; | |
| color: white; | |
| font: 14px sans-serif; | |
| background: #222; | |
| border: 0px; | |
| border-radius: 2px; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| //Width and height | |
| var w = 1200; | |
| var h = 800; | |
| var color_germany = d3.scale.category10(); //builtin range of colors | |
| //Define default path generator | |
| var path = d3.geo.path() | |
| .projection(d3.geo.mercator() | |
| .center([10.93, 52.21]) | |
| .scale(16000) | |
| .translate([w/2, h/2])); | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| //Create SVG element | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Load in GeoJSON data | |
| d3.json("country_germany_states.json", function(json) { | |
| //Bind data and create one path per GeoJSON feature | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .on("mouseover", function(d) { | |
| div | |
| .transition() | |
| .duration(200) | |
| .style("opacity", .9); | |
| div | |
| .html(d.properties.NAME_1) | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| div | |
| .transition() | |
| .duration(500) | |
| . style("opacity", 0); | |
| }) | |
| .style("fill", function(d, i) { return color_germany(i); }) | |
| .style("stroke", 'rgb(256,256,256)'); | |
| d3.csv("berlin.csv", function(data) { | |
| svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) { | |
| return projection([d.lon, d.lat])[0]; | |
| }) | |
| .attr("cy", function(d) { | |
| return projection([d.lon, d.lat])[1]; | |
| }) | |
| .attr("r", 5) | |
| .style("fill", "yellow") | |
| .style("opacity", 0.75); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment