xxxxxxxxxx<html lang="en"> <head> <meta charset="UTF-8"> <title>Geo</title> <script src="https://d3js.org/d3.v3.js"></script> <link rel="stylesheet" type="text/css" href="map_and_scatter_d2.css"> </head> <body> <div id = "plot"> Ranks </div> <div id = "pop"> Pop <div id = "tooltip" class="hidden"> <p><center><strong><span id="city"> </span></strong></center></p> <p>Population: <span id="popvalue"> </span></p> </div> <div id = "tooltip2" class="hidden"> <p><center><strong><span id="city2"> </span></strong></center></p> <p>Ratio: <span id="value2"> </span></p> </div> <br> <div id ="bck" style="width:700px;height:500px"> <svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg"> <defs> <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse"> <path d="M 8 0 L 0 0 0 8" fill="none" stroke="lightblue" stroke-width="0.5"/> </pattern> <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"> <rect width="80" height="80" fill="url(#smallGrid)"/> <path d="M 80 0 L 0 0 0 80" fill="none" stroke="lightblue" stroke-width="0.5"/> </pattern> </defs> <rect width="100%" height="100%" fill="url(#grid)" /> </svg> </div> <script type="text/javascript"> // Global D3 variables: var dataset; var padding = 45; var h = 500; var w = 700; var projection = d3.geo.albersUsa() .translate([w/2,h/2]) .scale([900]); var svg = d3.select("body").select("svg") var population; var path = d3.geo.path() .projection(projection); d3.json("us-states.json", function(json){ svg.selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .attr({ "fill": "#B0B0B0", "stroke": "White", "stroke-width": 0.3, "opacity": 1 }); d3.csv("cities_pop.csv", function(data){ console.log(data); var rScale = d3.scale.linear() .domain([0, d3.max(data, function(d){ return parseFloat(d.estimate_2014); })]) .range([5,15]); var circleXCoord; var circleYCoord; dataset = data; svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d){ return d.city_shrt; }) .attr("opacity", 0) svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr({ "cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord}, "cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord}, "r": function (d) { return rScale(parseFloat(d.estimate_2014));} }) .style({ "fill": "#43a2ca", "opacity": 0, "stroke-width":0.7, "stroke":"white", }) .transition() .duration(1000) .ease("circle") .style("opacity", 1) svg.selectAll("circle").on("mouseover", function(d) { //Get this bar's x/y values, then augment for the tooltip var xPosition = parseFloat(d3.select(this).attr("cx")); var yPosition = parseFloat(d3.select(this).attr("cy")); //Update the tooltip position and value d3.select("#tooltip") .style("left", xPosition + "px") .style("top", yPosition + "px") d3.select("#tooltip") .select("#popvalue") .text(d.estimate_2014); d3.select("#tooltip") .select("#city") .text(d.city); //Show the tooltip d3.select("#tooltip").classed("hidden", false); }) .on("mouseout", function() { //Hide the tooltip d3.select("#tooltip").classed("hidden", true) }); }); }); </script> <script> d3.select("#pop") .on("click", function(){ d3.selectAll("path") .transition() .delay(10) .duration(1000) .attr({ "stroke-width": 0.5, "opacity": 1 }); d3.selectAll("text") .attr("opacity", 0); d3.selectAll("g") .attr("opacity", 0); var rScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d){ return parseFloat(d.estimate_2014); })]) .range([5,15]); var circleXCoord; var circleYCoord; svg.selectAll("circle") .transition() .delay(300) .duration(1000) .ease("circle") .style({ "fill": "#43a2ca", "stroke": "white", "opacity": 1, "stroke-width": 0.7 }) .attr({ "cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord}, "cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord}, "r": function (d) { return rScale(parseFloat(d.estimate_2014));} }) svg.selectAll("circle").on("mouseover", function(d) { //Get this bar's x/y values, then augment for the tooltip var xPosition = parseFloat(d3.select(this).attr("cx")); var yPosition = parseFloat(d3.select(this).attr("cy")); //Update the tooltip position and value d3.select("#tooltip") .style("left", xPosition + "px") .style("top", yPosition + "px") d3.select("#tooltip") .select("#popvalue") .text(d.estimate_2014); d3.select("#tooltip") .select("#city") .text(d.city); //Show the tooltip d3.select("#tooltip").classed("hidden", false); }) .on("mouseout", function() { //Hide the tooltip d3.select("#tooltip").classed("hidden", true) }); ; }); </script> <script>//PLOTTING THE SCATTERPLOT d3.select("#plot") .on("click", function(){ d3.selectAll("path") .transition() .delay(10) .duration(1000) .attr({ "stroke-width": 0, "opacity": 0 }); var xScale = d3.scale .linear() .domain([1,d3.max(dataset, function(d){ return d.ratio_rank; })]) .rangeRound([0+padding,w-padding]); var yScale = d3.scale .linear() .domain([0, d3.max(dataset, function(d){ return d.post_rank; })]) .rangeRound([h-padding,0+padding]); var rScale = d3.scale .linear() .domain([0, d3.max(dataset, function(d){ return d.num; })]) .rangeRound([2,10]); // Creating axes var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); d3.selectAll("circle") .transition() .delay(10) .duration(1000) .attr({ cx: function(d) {return xScale(d.ratio_rank);}, cy: 100, "r": function(d) {return rScale(d.num);} }) .style("fill", "White") .style("stroke", "lightblue") .style("stroke-width", 2.5); svg.selectAll("text") .transition() .delay(1000) .attr({ x: function(d, i) {return xScale(d.ratio_rank)-12;}, y: 70, "opacity": 1, //For the Y-coordinate, I've simple printed the text outside of the circle radius //by subtracting the circle radius from the returned value. "font-size": "13px", "fill": "MidnightBlue", "font-family": "arial" }); svg.append("g") .attr("class", "axis") .attr("transform", "translate(0,"+ 150+")") .call(xAxis); /* svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + padding+",0)") .call(yAxis); */ svg.selectAll("circle").on("mouseover", function(d) { //Get this bar's x/y values, then augment for the tooltip var xPosition = parseFloat(d3.select(this).attr("cx")); var yPosition = parseFloat(d3.select(this).attr("cy")); //Update the tooltip position and value d3.select("#tooltip2") .style("left", xPosition + "px") .style("top", yPosition + "px") .select("#value2") .text(d.ratio.toString().substr(0,4)); console.log("bueno!"); d3.select("#tooltip2") .select("#city2") .text(d.city); //Show the tooltip d3.select("#tooltip2").classed("hidden", false); }) .on("mouseout", function() { //Hide the tooltip d3.select("#tooltip2").classed("hidden", true) }); }) ; </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js