A hack reworking Mike Bostock's US county choropleth map to show responses by zip code from the USGS' site from the 2010-11-05 3.2 quake near Piedmont, CA via Yahoo! Pipes.
-
-
Save johan/1343564 to your computer and use it in GitHub Desktop.
California earthquake responses by zip code
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> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <title>USGS responses by zip to the 2010-11-05 3.2 earthquake near Piedmont, CA</title> | |
| <script src="http://mbostock.github.com/d3/d3.js?2.5.0"></script> | |
| <script src="http://mbostock.github.com/d3/d3.geo.js?2.5.0"></script> | |
| <script src="http://mbostock.github.com/d3/d3.csv.js?2.5.0"></script> | |
| <link href="http://mbostock.github.com/d3/talk/20111018/style.css" rel="stylesheet"/> | |
| <link href="http://mbostock.github.com/d3/talk/20111018/colorbrewer/colorbrewer.css" rel="stylesheet"/> | |
| <style type="text/css"> | |
| #ca-zipcodes path { | |
| stroke: #fff; | |
| stroke-width: .125px; | |
| } | |
| /*#ca-zipcodes { | |
| outline: 1px solid pink; | |
| }*/ | |
| #states path { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| svg { outline: 1px solid red; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="body"> | |
| <div id="footer"> | |
| USGS Earthquake comments, 2011 | |
| <div class="hint">use the menu to change the color scale</div> | |
| <div><select> | |
| <optgroup label="Colors by Cynthia Brewer."> | |
| <option value="YlGn">YlGn</option> | |
| <option value="YlGnBu">YlGnBu</option> | |
| <option value="GnBu">GnBu</option> | |
| <option value="BuGn">BuGn</option> | |
| <option value="PuBuGn">PuBuGn</option> | |
| <option value="PuBu">PuBu</option> | |
| <option value="BuPu">BuPu</option> | |
| <option value="RdPu">RdPu</option> | |
| <option value="PuRd">PuRd</option> | |
| <option value="OrRd">OrRd</option> | |
| <option value="YlOrRd">YlOrRd</option> | |
| <option value="YlOrBr">YlOrBr</option> | |
| <option value="Purples">Purples</option> | |
| <option value="Blues" selected>Blues</option> | |
| <option value="Greens">Greens</option> | |
| <option value="Oranges">Oranges</option> | |
| <option value="Reds">Reds</option> | |
| <option value="Greys">Greys</option> | |
| </optgroup> | |
| </select></div> | |
| </div> | |
| </div> | |
| <script src="y_pipes.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
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
| var usgs_dir = 'http://earthquake.usgs.gov/earthquakes/dyfi/events/nc/' | |
| , usgs_evt = '71676251' // 2010-11-05 3.2 quake near Piedmont, CA, USA | |
| , usgs_csv = '/us/cdi_zip.txt' | |
| , usgs_url = usgs_dir + usgs_evt + usgs_csv | |
| ; | |
| var path = d3.geo.path() | |
| .projection(d3.geo.albersUsa() | |
| .scale(1400) | |
| .translate([680, 360])); | |
| var svg = d3.select("#body").append("svg:svg") | |
| .attr("class", "Blues") | |
| .attr("width", 960) | |
| .attr("height", 500) | |
| .append('svg:g') | |
| .attr("transform", "scale(1.9) translate(-100 -198)") | |
| ; | |
| var zipcodes = svg.append("svg:g") | |
| .attr("id", "ca-zipcodes"); | |
| var states = svg.append("svg:g") | |
| .attr("id", "states"); | |
| load_csv(usgs_url, show, { header_cb: parse_header, line_cb: parse_line }); | |
| function parse_header(name, n) { | |
| return ({ '# Columns: ZIP/Location': 'zip' | |
| , 'CDI': 'cdi' | |
| , 'No. of responses': 'responses' | |
| , 'Epicentral distance': 'dist' | |
| , 'Latitude': 'lat' | |
| , 'Longitude': 'lng' | |
| , 'Suspect?': 'suspect' | |
| , 'City': 'city' | |
| , 'State': 'state' | |
| })[name]; | |
| } | |
| function parse_line(val, n) { | |
| return ([ String // zip | |
| , String // cdi | |
| , Number // responses | |
| , Number // dist | |
| , Number // lat | |
| , Number // lng | |
| , Number // suspect | |
| , String // city | |
| , String // state | |
| ])[n](val); | |
| } | |
| function show(csv) { | |
| function sum(arr) { return d3.sum(arr, function(d){ return d.responses; }); } | |
| function padded_zip(d) { return pad(d.zip); } | |
| var pad = d3.format("05d") | |
| , data = d3.nest().key(padded_zip).rollup(sum).map(csv) | |
| , values = d3.values(data).sort() | |
| , quantize = d3.scale.quantile().domain([0, 15]).range(values); | |
| window.data = data; // for ease of inspection | |
| d3.json("zips-ca.json", function(json) { | |
| zipcodes.selectAll("path") | |
| .data(json.features) | |
| .enter().append("svg:path") | |
| .attr("class", function(d) { | |
| return "q" + quantize(data[pad(d.id)] || 0) + "-9"; | |
| }) | |
| .attr("d", path) | |
| .append("svg:title") | |
| .text(function(d) { | |
| var no = data[pad(d.id)] || 0; | |
| return d.id + ": " + no + " responses"; | |
| }); | |
| }); | |
| } | |
| d3.json("us-ca.json", function(json) { | |
| states.selectAll("path") | |
| .data(json.features) | |
| .enter().append("svg:path") | |
| .attr("d", path); | |
| }); | |
| d3.select("select").on("change", function() { | |
| d3.selectAll("svg").attr("class", this.value); | |
| }); |
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
| // Loads a csv file cross-domain from anywhere via Yahoo! Pipes | |
| function load_csv(url, cb, opts) { | |
| function format(raw) { | |
| // Y| rows are listed as objects with col_1, ... col_n properties; arrayify | |
| function rollup(row) { | |
| for (var c = 1, col, arr = []; row.hasOwnProperty(col = 'col_'+ c); c++) | |
| arr.push(row[col]); | |
| return col_cb ? arr.map(col_cb) : arr; | |
| } | |
| function object(arr) { | |
| function stow(val, idx) { data[headers[idx]] = val; } | |
| var data = {}; | |
| arr.forEach(stow); | |
| return data; | |
| } | |
| var col_cb = opts.header_cb | |
| , headers = rollup(raw.value.items[0]); | |
| col_cb = opts.line_cb; | |
| return raw.value.items.slice(1).map(rollup).map(object); | |
| } | |
| var pipe = 'a1aa6137151bc86851b7b65373f95bce' | |
| , nth = load_csv.nth = (load_csv.nth || 0) + 1 | |
| , name = 'cb' + nth.toString(36) | |
| , skip = encodeURIComponent(opts.skip_lines || 0) | |
| , head = encodeURIComponent(opts.hdr_line_no || 0) | |
| , purl = 'http://pipes.yahoo.com/pipes/pipe.run?_id='+ pipe | |
| + '&_render=json&_callback=load_csv.' + name | |
| + '&u=' + encodeURIComponent(url) +'&x='+ skip +'&c='+ head | |
| , load = document.createElement('script'); | |
| load_csv[name] = function(json) { | |
| delete load_csv[name]; | |
| document.head.removeChild(load); | |
| cb(format(json)); | |
| }; | |
| load.src = purl; | |
| document.head.appendChild(load); | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment