xxxxxxxxxx<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> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://d3js.org/topojson.v1.min.js