Created
September 28, 2015 18:10
-
-
Save iblind/83cc429a50268958bdd3 to your computer and use it in GitHub Desktop.
Grid fade-out
This file contains 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
| city | num | population_ranking | estimate_2014 | lat | lon | ratio_rank | city_shrt | ratio | |
|---|---|---|---|---|---|---|---|---|---|
| Dallas | 1581 | 9 | 1,281,047 | 32.769582 | -96.791764 | 1 | DAL | 12.34146757 | |
| Phoenix | 1356 | 6 | 1,537,058 | 33.462898 | -112.076986 | 2 | PHX | 8.822048355 | |
| San Diego | 1168 | 8 | 1,381,069 | 32.745467 | -117.154215 | 3 | SDG | 8.457216837 | |
| Chicago | 1938 | 3 | 2,722,389 | 41.864933 | -87.625039 | 4 | CHI | 7.118747541 | |
| Philadelphia | 940 | 5 | 1,560,297 | 39.962926 | -75.159232 | 5 | PHIL | 6.024494055 | |
| Houston | 1021 | 4 | 2,239,558 | 29.748644 | -95.362839 | 6 | HOU | 4.55893529 | |
| San Antonio | 624 | 7 | 1,436,697 | 29.409079 | -98.489685 | 7 | SAN | 4.343295768 | |
| New York | 2669 | 1 | 8,491,079 | 40.71455 | -74.007124 | 8 | NYC | 3.143298985 | |
| Los Angeles | 718 | 2 | 3,928,864 | 34.037002 | -118.234578 | 9 | LA | 1.827500265 |
This file contains 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>Geo</title> | |
| <script src="http://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="http://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> |
This file contains 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
| body{ | |
| font-family:Arial, Helvetica, sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| } | |
| #tooltip { | |
| position: absolute; | |
| width: 200px; | |
| height: 50px; | |
| padding: 10px; | |
| background-color: white; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.4); | |
| -moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.4); | |
| box-shadow: 4px 4px 10px rgba(0,0,0,0.4); | |
| pointer-events: none; | |
| z-index: 10; | |
| opacity: 0.9; | |
| } | |
| #tooltip.hidden { | |
| display: none; | |
| } | |
| #tooltip p { | |
| margin: 0; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 12px; | |
| line-height: 16px; | |
| } | |
| #tooltip2 { | |
| position: absolute; | |
| width: 200px; | |
| height: 50px; | |
| padding: 10px; | |
| background-color: white; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.4); | |
| -moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.4); | |
| box-shadow: 4px 4px 10px rgba(0,0,0,0.4); | |
| pointer-events: none; | |
| z-index: 10; | |
| opacity: 1; | |
| } | |
| #tooltip2.hidden { | |
| display: none; | |
| } | |
| #tooltip2 p { | |
| margin: 0; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 12px; | |
| line-height: 16px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment