mhseiden/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
chart reading data from json earthquakes feed
it's scary

forked from darrenjaworski's block: OK Earthquakes IX

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

  <style>
  html {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  body {
    margin: 0;
  }

  .chart {
    width: 100%;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  text	{
    font-size: 18px;
  }

  .x.axis path {
    display: none;
  }

  #width {
    max-width: 70em;
    margin: auto;
  }

  </style>
</head>
<body>
    <div id="width">
      <div class="chart"></div>
    </div>

  <script>

  var margin = {
      top: 20,
      right: 40,
      bottom: 50,
      left: 60
    },
    width = document.getElementById("width").offsetWidth - margin.left - margin.right,
    height = (document.getElementById("width").offsetWidth * .5) - margin.top - margin.bottom;

  var color = d3.scale.ordinal()
    .range(["#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"]);

  var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

  var y = d3.scale.linear()
    .range([height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

  var svg = d3.select(".chart").append("svg")
    .attr("class", "eqchart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  d3.json('https://api.sigmacomputing.io/dl/api/v1/max/blockbuilder-sources/exports/usgs_earthquakes?filetype=json', ready);

  function ready(error, quakes) {

    if (error) {
      return console.warn(error);
    }

    var re = new RegExp('Oklahoma');

    quakes.features = quakes.features.filter(function(d){
      return re.test(d.properties.place);
    });

    totalPerYear = d3.nest()
      .key(function(d) { return new Date(d.properties.time).getFullYear(); })
      .rollup(function(leaves) {

        var brokenMag = d3.nest()
          .key(function(d) { return Math.round(d.properties.mag); })
          .rollup( function(innerLeaves) { return innerLeaves.length; })
          .entries(leaves);

        return { "total": leaves.length, "brokenMag": brokenMag }; })
      .entries(quakes.features);

    yMax = d3.max(totalPerYear, function(d) { return d.values.total; });
    magDomain = d3.extent(quakes.features, function(d){ return d.properties.mag; });
    xExtent = totalPerYear.map(function(d) { return d.key; });
    x.domain(xExtent);
    y.domain([0, yMax]);

    var colorDomain = [];
    var index = 0;

    for ( integer = Math.round( magDomain[0] ); integer < Math.round( magDomain[1] ) + 1; integer++ ) {

      colorDomain[index] = integer.toString();
      index += 1;

    };

    color.domain(colorDomain);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor", "end")
      .style("font-weight", "bold")
      .attr("dx", "-.5em")
      .attr("dy", ".5em")
      .attr("transform", "rotate(-45)" );

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Earthquake Count");

    totalPerYear.forEach(function(d) {
      var y0 = 0;
      d.year = d.values.brokenMag.map( function(name, i) { return { name: name, y0: y0, y1: y0 += +name.values }; });
    })

    var year = svg.selectAll(".year")
      .data(totalPerYear)
      .enter()
      .append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x(d.key) + ",0)"; });

    year.selectAll("rect")
      .data(function(d) { return d.year; })
      .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name.key); });

    var legend = svg.selectAll(".legend")
        .data(color.domain().slice().reverse())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(40," + i * 20 + ")"; });

    legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

    legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d; });

  };

  </script>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

	<style>
	html {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	body {
	margin: 0;
	}

	.chart {
	width: 100%;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	text {
	font-size: 18px;
	}

	.x.axis path {
	display: none;
	}

	#width {
	max-width: 70em;
	margin: auto;
	}

	</style>
	</head>
	<body>
	<div id="width">
	<div class="chart"></div>
	</div>

	<script>

	var margin = {
	top: 20,
	right: 40,
	bottom: 50,
	left: 60
	},
	width = document.getElementById("width").offsetWidth - margin.left - margin.right,
	height = (document.getElementById("width").offsetWidth * .5) - margin.top - margin.bottom;

	var color = d3.scale.ordinal()
	.range(["#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"]);

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var svg = d3.select(".chart").append("svg")
	.attr("class", "eqchart")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.json('https://api.sigmacomputing.io/dl/api/v1/max/blockbuilder-sources/exports/usgs_earthquakes?filetype=json', ready);

	function ready(error, quakes) {

	if (error) {
	return console.warn(error);
	}

	var re = new RegExp('Oklahoma');

	quakes.features = quakes.features.filter(function(d){
	return re.test(d.properties.place);
	});

	totalPerYear = d3.nest()
	.key(function(d) { return new Date(d.properties.time).getFullYear(); })
	.rollup(function(leaves) {

	var brokenMag = d3.nest()
	.key(function(d) { return Math.round(d.properties.mag); })
	.rollup( function(innerLeaves) { return innerLeaves.length; })
	.entries(leaves);

	return { "total": leaves.length, "brokenMag": brokenMag }; })
	.entries(quakes.features);

	yMax = d3.max(totalPerYear, function(d) { return d.values.total; });
	magDomain = d3.extent(quakes.features, function(d){ return d.properties.mag; });
	xExtent = totalPerYear.map(function(d) { return d.key; });
	x.domain(xExtent);
	y.domain([0, yMax]);

	var colorDomain = [];
	var index = 0;

	for ( integer = Math.round( magDomain[0] ); integer < Math.round( magDomain[1] ) + 1; integer++ ) {

	colorDomain[index] = integer.toString();
	index += 1;

	};

	color.domain(colorDomain);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.style("text-anchor", "end")
	.style("font-weight", "bold")
	.attr("dx", "-.5em")
	.attr("dy", ".5em")
	.attr("transform", "rotate(-45)" );

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Earthquake Count");

	totalPerYear.forEach(function(d) {
	var y0 = 0;
	d.year = d.values.brokenMag.map( function(name, i) { return { name: name, y0: y0, y1: y0 += +name.values }; });
	})

	var year = svg.selectAll(".year")
	.data(totalPerYear)
	.enter()
	.append("g")
	.attr("class", "g")
	.attr("transform", function(d) { return "translate(" + x(d.key) + ",0)"; });

	year.selectAll("rect")
	.data(function(d) { return d.year; })
	.enter().append("rect")
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.y1); })
	.attr("height", function(d) { return y(d.y0) - y(d.y1); })
	.style("fill", function(d) { return color(d.name.key); });

	var legend = svg.selectAll(".legend")
	.data(color.domain().slice().reverse())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(40," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });

	};

	</script>