- chart reading data from json earthquakes feed
- it's scary
forked from darrenjaworski's block: OK Earthquakes IX
Last active
February 22, 2017 18:55
-
-
Save mhseiden/63bef93768139dcb6e112c8221bbc4ef to your computer and use it in GitHub Desktop.
OK Earthquakes IX
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
| license: mit |
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> | |
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment