D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
darrenjaworski
Full window
Github gist
OK Earthquakes IX
chart reading data from json earthquakes feed
it's scary
<!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://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&minmagnitude=2.0&minlongitude=-103&maxlongitude=-94&maxlatitude=37&minlatitude=33&starttime=1970-01-01', 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>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js