This graphic compares the energy released by earthquakes of different magnitudes.
There are two zoom behaviors: SVG geometric zooming for the circles (zoom) and SVG semantic zooming for the labels (labelZoom). Circles are colored with colorbrewer.
Last active
August 29, 2015 14:18
-
-
Save JasonBernert/086a8198aad4c7adf311 to your computer and use it in GitHub Desktop.
SVG geometric and semantic zooming
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| text { | |
| font-family: Helvetica, Arial, "Lucida Grande", sans-serif; | |
| font-weight:500; | |
| } | |
| .overlay { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .circle-border { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/colorbrewer.v1.min.js"></script> | |
| <script> | |
| var data = [{"magnitude":3,"description":""}, | |
| {"magnitude":4,"description":""}, | |
| {"magnitude":5,"description":""}, | |
| {"magnitude":5.6,"description":"Oklahoma, 2011"}, | |
| {"magnitude":6.3,"description":"Christchurch Earthquake (New Zealand), 2011"}, | |
| {"magnitude":6.4,"description":"Vancouver Earthquake (Canada), 2011"}, | |
| {"magnitude":6.6,"description":"San Fernando Earthquake, 1971"}, | |
| {"magnitude":6.7,"description":"Northridge Earthquake (California), 1994"}, | |
| {"magnitude":6.9,"description":"San Francisco Bay Area Earthquake 1989"}, | |
| {"magnitude":7,"description":"Haiti Earthquake, 2010"}, | |
| {"magnitude":8.1,"description":"México City Earthquake (Mexico), 1985"}, | |
| {"magnitude":8.5,"description":"Sumatra Earthquake (Indonesia), 2007"}, | |
| {"magnitude":8.8,"description":"Chile Earthquake, 2010"}, | |
| {"magnitude":9,"description":"Japan Earthquake, 2011"}]; | |
| function calculateEnergy(M){ | |
| var exponent = 11.8 + (1.5 * M); | |
| var E = Math.pow(10, exponent); | |
| var scaler = 10000000000000; | |
| return Math.round(E / scaler); | |
| }; | |
| function getRadius(A){ | |
| var radius = Math.sqrt( A / Math.PI ); | |
| return Math.round(radius * 10) / 10; | |
| }; | |
| var width = 960; | |
| height = 500; | |
| var color = d3.scale.linear() | |
| .domain([0, data.length]) | |
| .range(["#982935", "#fed976"]); | |
| var y = d3.scale.linear() | |
| .domain([0, height]) | |
| .range([height, 0]); | |
| var zoomVariable = d3.behavior.zoom() | |
| .center([100, height]) | |
| .y(y) | |
| .scaleExtent([0.0003, 1]) | |
| .on("zoom.foo", labelZoom) | |
| .on("zoom.bar", zoom); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .call(zoomVariable); | |
| svg.append("rect") | |
| .attr("class", "overlay") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var circle = svg.selectAll("circle") | |
| .data(data.reverse()) | |
| .enter().append("circle") | |
| .attr("cx", 100) | |
| .attr("cy", function(d) { return height - (getRadius(calculateEnergy(d.magnitude))); }) | |
| .attr("r", function(d) { return getRadius(calculateEnergy(d.magnitude)); }) | |
| .attr("fill",function(d,i){ return color(i); }) | |
| .style("stroke-width", 1.5) | |
| .style("stroke", "#fff"); | |
| var labelsContainer = d3.select("svg").append('g'); | |
| var labels = labelsContainer.selectAll("text") | |
| .data(data.reverse()) | |
| .enter().append("text") | |
| .attr("x", 100) | |
| .attr("y", height - 6 ) | |
| .attr("transform", function(d) { return "translate(0," + "-" + ((getRadius(calculateEnergy(d.magnitude)) * 2)) + ")"; }) | |
| .attr("dx", -8) | |
| .attr("font-weight", 500) | |
| .attr("fill-opacity", 1) | |
| .text(function(d){ | |
| if(d.description){ | |
| return "Magnitude " + d.magnitude + " - " + d.description | |
| } else { | |
| return "Magnitude " + d.magnitude} | |
| }); | |
| function zoom() { | |
| svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); | |
| circle.style("stroke-width", 1.5 / d3.event.scale + "px"); | |
| } | |
| function labelZoom() { | |
| labels.attr("transform", labelTransform); | |
| labels.attr("fill-opacity", labelOpacity); | |
| } | |
| function labelTransform(d) { | |
| return "translate(" + 0 + "," + ( y ((getRadius(calculateEnergy(d.magnitude))) * 2) - height ) + ")"; | |
| } | |
| function labelOpacity(d){ | |
| if ( (Math.abs(y((getRadius(calculateEnergy(d.magnitude))) * 2) - height) / 100 ) > 1) { | |
| return 1 | |
| } if ( (Math.abs(y((getRadius(calculateEnergy(d.magnitude))) * 2) - height) / 100 ) < 0.05) { | |
| return 0 | |
| } else { | |
| return (Math.abs(y((getRadius(calculateEnergy(d.magnitude))) * 2) - height) / 100 ) ; | |
| }; | |
| } | |
| // DISABLE PAN | |
| svg.call(zoomVariable) | |
| .on("mousedown.zoom", null) | |
| .on("touchmove.zoom", null) | |
| .on("touchend.zoom", null); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment