JasonBernert/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>