Last active
November 30, 2015 03:44
-
-
Save c-johnson/7a1a292d224983783518 to your computer and use it in GitHub Desktop.
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 charset="utf-8"> | |
| <title>California Rainfall</title> | |
| <style> | |
| .subunit-California { | |
| fill: #ddc; | |
| stroke: red; } | |
| .subunit { | |
| fill: none; | |
| stroke: #999; | |
| stroke-size: 1px; } | |
| .voronoi { | |
| fill: none; | |
| fill-opacity: 0.5; | |
| stroke: white; | |
| stroke-width: .5px; } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="script.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 GeoFeature, RainThing, thing; | |
| window.noop = function() {}; | |
| window.polygon = function(d) { | |
| return "M" + d.border.join("L") + "Z"; | |
| }; | |
| RainThing = (function() { | |
| function RainThing() { | |
| this.width = 960; | |
| this.height = 1160; | |
| this.californication(); | |
| } | |
| RainThing.prototype.makeDisplay = function(type) { | |
| var display; | |
| display = d3.select("body").append(type).attr("width", this.width).attr("height", this.height); | |
| return display; | |
| }; | |
| RainThing.prototype.makePoint = function(id, coord) { | |
| return { | |
| "type": "Feature", | |
| "properties": { | |
| "GEO_ID": "0400000US06", | |
| "STATE": "06", | |
| "NAME": id, | |
| "LSAD": "", | |
| "CENSUSAREA": 155779.220000 | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": coord | |
| } | |
| }; | |
| }; | |
| RainThing.prototype.projectLineString = function(feature, projection) { | |
| var line; | |
| line = []; | |
| d3.geo.stream(feature, projection.stream({ | |
| polygonStart: noop, | |
| polygonEnd: noop, | |
| lineStart: noop, | |
| lineEnd: noop, | |
| point: function(x, y) { | |
| return line.push([x, y]); | |
| }, | |
| sphere: noop | |
| })); | |
| return line; | |
| }; | |
| RainThing.prototype.processPrecip = function(precipData) { | |
| var precipModel; | |
| precipModel = []; | |
| precipData.forEach(function(item) { | |
| var stationData; | |
| stationData = { | |
| id: item.id.trim(), | |
| name: item.name.trim(), | |
| precipBuckets: { | |
| oneHour: parseFloat(item.precipValues.oneHour.trim()), | |
| twoHour: parseFloat(item.precipValues.twoHour.trim()), | |
| threeHour: parseFloat(item.precipValues.threeHour.trim()), | |
| sixHour: parseFloat(item.precipValues.sixHour.trim()), | |
| twelveHour: parseFloat(item.precipValues.twelveHour.trim()), | |
| daily: parseFloat(item.precipValues.daily.trim()) | |
| } | |
| }; | |
| return precipModel.push(stationData); | |
| }); | |
| return precipModel; | |
| }; | |
| RainThing.prototype.californication = function() { | |
| var svg; | |
| svg = this.makeDisplay("svg"); | |
| return d3.json('USA-cali.json', (function(_this) { | |
| return function(geoCali) { | |
| return d3.csv('station-coords.csv', function(stationCoords) { | |
| return $.ajax({ | |
| url: "http://cjohnson.io/rain.js", | |
| jsonp: "callback", | |
| dataType: "jsonp" | |
| }).then(function(precipData) { | |
| var caliLineString, commonSet, fillBlue, finalCoords, geoStations, projection, projectionResult, self, stationData, usaPath, voronoi, voronoiData, voronoiResult; | |
| stationData = _this.processPrecip(precipData); | |
| commonSet = []; | |
| stationData.forEach(function(item) { | |
| return stationCoords.forEach(function(sCoord) { | |
| if (item.id === sCoord.id) { | |
| return commonSet.push($.extend(sCoord, item)); | |
| } | |
| }); | |
| }); | |
| finalCoords = stationCoords; | |
| fillBlue = d3.scale.linear().domain([0, 10]).range(["#fff", "#00f"]); | |
| projection = d3.geo.albersUsa().scale(3500).translate([1600, 400]); | |
| caliLineString = _this.projectLineString(geoCali, projection); | |
| voronoi = d3.geom.voronoi(); | |
| geoStations = new GeoFeature; | |
| finalCoords.forEach(function(station) { | |
| var coords, stationId; | |
| stationId = "station-" + station.id; | |
| coords = [parseFloat(parseFloat(station.long).toFixed(2)), parseFloat(parseFloat(station.lat).toFixed(2))]; | |
| return geoStations.features.push(_this.makePoint(stationId, coords)); | |
| }); | |
| usaPath = d3.geo.path(geoCali).projection(projection); | |
| svg.append("path").datum(geoCali).attr("d", usaPath); | |
| svg.selectAll(".subunit").data(geoCali.features).enter().append("path").attr("class", function(d) { | |
| return "subunit-" + d.properties.NAME; | |
| }).attr("d", usaPath); | |
| self = _this; | |
| projectionResult = finalCoords.map(function(coord) { | |
| return projection([+coord.long, +coord.lat]); | |
| }); | |
| voronoiResult = voronoi(projectionResult); | |
| voronoiData = voronoiResult.map(function(vertices, index) { | |
| var voronoiBorder; | |
| voronoiBorder = d3.geom.polygon(vertices).clip(caliLineString.slice()); | |
| return { | |
| id: finalCoords[index].id, | |
| name: finalCoords[index].name, | |
| precip: finalCoords[index].precipBuckets, | |
| border: voronoiBorder | |
| }; | |
| }); | |
| return svg.append("g").attr("class", "land").selectAll(".voronoi").data(voronoiData).enter().append("path").attr("class", "voronoi").style("fill", function(d) { | |
| var precipFactor; | |
| precipFactor = 5; | |
| d.initialColor = d.precip != null ? fillBlue(.2 + (d.precip.daily * precipFactor)) : fillBlue(.2); | |
| return d.initialColor; | |
| }).attr("d", polygon).on('mouseenter', function(d) { | |
| var precipFactor; | |
| precipFactor = 15; | |
| return this.style.fill = d.precip != null ? fillBlue(.2 + (d.precip.daily * precipFactor)) : fillBlue(.2); | |
| }).on('mouseleave', function(d) { | |
| return this.style.fill = d.initialColor; | |
| }); | |
| }); | |
| }); | |
| }; | |
| })(this)); | |
| }; | |
| return RainThing; | |
| })(); | |
| GeoFeature = (function() { | |
| function GeoFeature() { | |
| this.type = "FeatureCollection"; | |
| this.features = []; | |
| } | |
| return GeoFeature; | |
| })(); | |
| thing = new RainThing; | |
| //# sourceMappingURL=script.js.map |
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
| id | lat | long | |
|---|---|---|---|
| USC00040134 | 32.83583 | -116.7775 | |
| USW00094299 | 41.49139 | -120.56444 | |
| AMYC1 | 34.55917 | -115.74417 | |
| ANGC1 | 38.57306 | -122.44056 | |
| APLC1 | 34.53639 | -117.27889 | |
| ACV | 40.97806 | -124.10861 | |
| ARVC1 | 35.2 | -118.83333 | |
| ASHC1 | 36.49139 | -118.82528 | |
| USC00040372 | 38.42694 | -122.24833 | |
| AUBC1 | 38.90722 | -121.08389 | |
| AIDC1 | 33.33806 | -118.33056 | |
| AVX | 33.405 | -118.41583 | |
| ATEC1 | 35.99833 | -120.11806 | |
| BAFC1 | 35.41861 | -119.05083 | |
| BFL | 35.43444 | -119.05417 | |
| DNPC1 | 36.90917 | -119.08833 | |
| BARC1 | 34.89278 | -117.02194 | |
| DAG | 34.85361 | -116.78583 | |
| BUO | 33.92861 | -116.98139 | |
| BBLC1 | 34.24417 | -116.90389 | |
| BIH | 37.37111 | -118.35806 | |
| BLU | 39.2775 | -120.71028 | |
| BLH | 33.61861 | -114.71417 | |
| BOCC1 | 39.38861 | -120.09361 | |
| BDEC1 | 38.21194 | -119.01417 | |
| BORC1 | 35.00417 | -117.65028 | |
| BROC1 | 33.23139 | -116.41444 | |
| BRDC1 | 35.93028 | -120.86778 | |
| BPTC1 | 38.2575 | -119.22861 | |
| BRRC1 | 39.695 | -121.34528 | |
| BUR | 34.20056 | -118.3575 | |
| BTWC1 | 35.40472 | -119.47306 | |
| CCAC1 | 34.58222 | -119.98167 | |
| CLTC1 | 38.59611 | -122.60139 | |
| USW00023136 | 34.21667 | -119.08333 | |
| CZZ | 32.62333 | -116.47278 | |
| USW00003177 | 33.12806 | -117.27944 | |
| CCHC1 | 34.25 | -118.6 | |
| CHEC1 | 40.30333 | -121.24222 | |
| NID | 35.6875 | -117.69306 | |
| USW00003179 | 33.97528 | -117.63611 | |
| RCOC1 | 33.66167 | -115.72056 | |
| CWPC1 | 37.98333 | -122.06917 | |
| CCR | 37.99167 | -122.055 | |
| COPC1 | 41.97972 | -122.33778 | |
| CEC | 41.78028 | -124.23667 | |
| CVRC1 | 34.00472 | -118.415 | |
| DAVC1 | 38.535 | -121.77611 | |
| DESC1 | 39.87167 | -121.61083 | |
| DELC1 | 35.76833 | -119.26 | |
| TRM | 33.62667 | -116.15944 | |
| EGLC1 | 33.80889 | -115.45083 | |
| ELJC1 | 32.81389 | -116.975 | |
| ELCC1 | 32.76694 | -115.56167 | |
| ELKC1 | 41.98806 | -123.71833 | |
| EORC1 | 33.66917 | -117.33194 | |
| USC00042871 | 33.12111 | -117.08833 | |
| EKA | 40.80972 | -124.16028 | |
| FARC1 | 39.42806 | -120.03306 | |
| FDDC1 | 38.52361 | -120.70611 | |
| FILC1 | 34.40861 | -118.94556 | |
| FSTC1 | 39.01 | -120.845 | |
| LOKC1 | 34.73333 | -119.10389 | |
| FETC1 | 37.54222 | -122.01583 | |
| FAT | 36.78 | -119.71944 | |
| FYIC1 | 36.7525 | -119.70167 | |
| FRAC1 | 36.99694 | -119.70722 | |
| FTDC1 | 41.88083 | -124.13528 | |
| FTSC1 | 40.21833 | -123.63222 | |
| USW00003166 | 33.87194 | -117.97889 | |
| GASC1 | 41.84528 | -123.96472 | |
| GEOC1 | 38.93306 | -120.80083 | |
| GTCC1 | 34.08694 | -118.47944 | |
| GNNC1 | 35.72694 | -118.70056 | |
| GLRC1 | 39.165 | -120.85667 | |
| GRGC1 | 36.73944 | -118.96306 | |
| GVHC1 | 34.96056 | -118.93833 | |
| USC00043573 | 39.20417 | -121.06806 | |
| GROC1 | 37.84444 | -120.22583 | |
| USW00053119 | 36.31889 | -119.62889 | |
| HAFC1 | 36.31583 | -119.63694 | |
| HPYC1 | 41.80417 | -123.37583 | |
| USW00003167 | 33.92278 | -118.33417 | |
| HWD | 37.65417 | -122.115 | |
| HSCC1 | 35.68417 | -121.16833 | |
| HENC1 | 33.23722 | -116.76139 | |
| HESC1 | 34.42056 | -117.26611 | |
| HONC1 | 40.2375 | -124.13222 | |
| HNTC1 | 37.2275 | -119.22056 | |
| HWOC1 | 36.18278 | -120.12222 | |
| IDYC1 | 33.75722 | -116.70667 | |
| USW00003144 | 32.83417 | -115.57861 | |
| IDOC1 | 33.70861 | -116.21528 | |
| IRNC1 | 34.14722 | -115.12194 | |
| JCSC1 | 35.30167 | -118.00139 | |
| JSVC1 | 34.35917 | -116.53778 | |
| JSTC1 | 34.14694 | -116.27472 | |
| JULC1 | 33.07639 | -116.5925 | |
| KENC1 | 37.95667 | -122.54472 | |
| KTTC1 | 36.00417 | -119.96 | |
| LAGC1 | 33.54528 | -117.78139 | |
| LSOC1 | 38.49306 | -122.00472 | |
| WJF | 34.74111 | -118.21167 | |
| LEBC1 | 34.83278 | -118.865 | |
| LEVC1 | 37.95667 | -119.11944 | |
| LEGC1 | 39.87444 | -123.72056 | |
| LMGC1 | 32.73833 | -117.03 | |
| LEMC1 | 36.38167 | -119.02639 | |
| NLC | 36.33333 | -119.95 | |
| LINC1 | 36.20333 | -119.05444 | |
| LVK | 37.69278 | -121.81444 | |
| USC00045028 | 36.60444 | -118.7325 | |
| LGB | 33.81167 | -118.14639 | |
| CAIC1 | 35.38361 | -118.41222 | |
| LOSC1 | 37.05639 | -120.86667 | |
| LCCC1 | 34.02361 | -118.29111 | |
| LPOC1 | 34.54444 | -119.79139 | |
| LAX | 33.93806 | -118.38889 | |
| MADC1 | 40.31861 | -123.37389 | |
| USW00093242 | 36.98778 | -120.11056 | |
| MALC1 | 37.64778 | -118.96167 | |
| MNZC1 | 40.54111 | -121.57667 | |
| MRIC1 | 37.495 | -119.98583 | |
| MRLC1 | 38.49167 | -122.12417 | |
| MYV | 39.10194 | -121.56778 | |
| MCLC1 | 41.25139 | -122.13833 | |
| MCAC1 | 33.57139 | -116.07667 | |
| USW00023257 | 37.28472 | -120.51278 | |
| MRNC1 | 40.18167 | -123.77611 | |
| MOD | 37.62417 | -120.95056 | |
| MODC1 | 37.65 | -121.0 | |
| USW00023244 | 37.40583 | -122.04806 | |
| MOHC1 | 35.05611 | -118.17306 | |
| SIY | 41.78056 | -122.47167 | |
| KMRY | 36.58806 | -121.84528 | |
| MTR | 36.59278 | -121.85556 | |
| MVCC1 | 34.08639 | -116.56222 | |
| CLSC1 | 39.33333 | -122.01667 | |
| MLNC1 | 32.86722 | -116.41944 | |
| MHS | 41.3325 | -122.33278 | |
| MWS | 34.23083 | -118.07111 | |
| APC | 38.21028 | -122.28472 | |
| EED | 34.7675 | -114.61889 | |
| NVDC1 | 39.24667 | -121.00083 | |
| NMDC1 | 38.00472 | -120.48639 | |
| CYMC1 | 34.94556 | -119.68278 | |
| 3L3 | 33.6025 | -117.88028 | |
| NZY | 32.7 | -117.2 | |
| CSUC1 | 34.24472 | -118.525 | |
| OAK | 37.72139 | -122.22083 | |
| OCCC1 | 38.38583 | -122.96611 | |
| L34 | 33.20972 | -117.395 | |
| USW00053121 | 33.21944 | -117.34944 | |
| OCTC1 | 33.15528 | -116.16889 | |
| OJAC1 | 34.44778 | -119.2275 | |
| OMSC1 | 37.34056 | -119.66833 | |
| USW00003102 | 34.05611 | -117.60028 | |
| OSFC1 | 35.80278 | -120.10306 | |
| ORIC1 | 41.28333 | -124.06667 | |
| ONDC1 | 39.74583 | -122.19972 | |
| ONSC1 | 41.30333 | -123.53444 | |
| ORLC1 | 41.30889 | -123.53167 | |
| USW00093210 | 39.49 | -121.61833 | |
| USW00093110 | 34.20083 | -119.20694 | |
| PPWC1 | 37.03333 | -121.18333 | |
| USW00093138 | 33.82806 | -116.50528 | |
| PSPC1 | 33.8275 | -116.50972 | |
| USW00023182 | 34.62944 | -118.08361 | |
| PLRC1 | 33.37806 | -116.84 | |
| PRDC1 | 39.75361 | -121.62389 | |
| PSAC1 | 34.14833 | -118.14472 | |
| PRB | 35.66972 | -120.62833 | |
| PRBC1 | 35.62778 | -120.68556 | |
| PISC1 | 35.15972 | -120.68306 | |
| PRPC1 | 40.98694 | -121.97722 | |
| PEDC1 | 38.78528 | -120.74194 | |
| POMC1 | 34.08167 | -117.76583 | |
| PRAC1 | 39.80528 | -120.47194 | |
| PORC1 | 39.36194 | -123.12861 | |
| POWC1 | 33.0175 | -117.02917 | |
| QCYC1 | 39.93667 | -120.9475 | |
| USW00053120 | 33.0375 | -116.91583 | |
| SGX | 33.02167 | -117.08139 | |
| RANC1 | 35.36917 | -117.6525 | |
| RBL | 40.15194 | -122.25361 | |
| RDD | 40.5175 | -122.29861 | |
| RDOC1 | 33.83417 | -118.37556 | |
| RWCC1 | 37.47667 | -122.23861 | |
| USW00003171 | 33.95194 | -117.43861 | |
| REVC1 | 33.95111 | -117.38806 | |
| USW00093225 | 38.69556 | -121.58972 | |
| SMTC1 | 38.55556 | -121.41694 | |
| SAC | 38.50694 | -121.495 | |
| STHC1 | 38.49306 | -122.53833 | |
| SNS | 36.66361 | -121.60806 | |
| SNSC1 | 36.65944 | -121.66639 | |
| USW00003178 | 32.57222 | -116.97944 | |
| SJOC1 | 37.35917 | -121.92389 | |
| SARC1 | 37.99833 | -122.53722 | |
| SFOC1 | 37.77056 | -122.42694 | |
| GABC1 | 34.15528 | -117.90778 | |
| JBLC1 | 34.10611 | -118.1 | |
| SBPC1 | 35.30556 | -120.66194 | |
| USW00093206 | 35.23722 | -120.64139 | |
| SFO | 37.61972 | -122.36472 | |
| NKX | 32.86667 | -117.13333 | |
| SAN | 32.73361 | -117.18306 | |
| USW00003131 | 32.81583 | -117.13944 | |
| SDB | 34.74361 | -118.72417 | |
| STS | 38.50389 | -122.81028 | |
| SMX | 34.89944 | -120.44861 | |
| SMRC1 | 35.37417 | -120.6375 | |
| SBA | 34.42583 | -119.8425 | |
| 1L2 | 34.0075 | -118.49972 | |
| SMO | 34.01583 | -118.45139 | |
| STAC1 | 33.74417 | -117.86667 | |
| USW00093184 | 33.68 | -117.86639 | |
| SCRC1 | 36.99056 | -121.99111 | |
| SBAC1 | 34.41667 | -119.68444 | |
| SGSC1 | 34.58944 | -118.45472 | |
| SWBC1 | 41.30111 | -123.13306 | |
| SHDC1 | 40.71417 | -122.41611 | |
| SERC1 | 39.58333 | -120.37056 | |
| YNPC1 | 37.50722 | -119.63306 | |
| SONC1 | 37.96722 | -120.38722 | |
| TVL | 38.89833 | -119.99472 | |
| SCKC1 | 37.99944 | -121.31778 | |
| SCK | 37.88917 | -121.22583 | |
| STOC1 | 39.58611 | -122.53417 | |
| STYC1 | 39.56306 | -121.10778 | |
| SRLC1 | 38.37722 | -120.80083 | |
| TFTC1 | 35.15028 | -119.43 | |
| TAAC1 | 39.06 | -120.12917 | |
| THPC1 | 35.10111 | -118.42222 | |
| RTMC1 | 36.45111 | -118.89611 | |
| TREC1 | 36.465 | -118.86194 | |
| TOA | 33.80167 | -118.34194 | |
| TRPC1 | 37.79667 | -121.58278 | |
| SUU | 38.26667 | -121.93333 | |
| TNAC1 | 35.76361 | -117.39083 | |
| TRK | 39.32 | -120.13944 | |
| WVSC1 | 34.12056 | -115.85 | |
| NXP | 34.3 | -116.16667 | |
| TYEC1 | 34.12806 | -116.03694 | |
| UCLC1 | 34.06972 | -118.44278 | |
| USC00049126 | 39.12667 | -123.27194 | |
| UKI | 39.12583 | -123.20083 | |
| VCB | 38.3775 | -121.9575 | |
| VLJC1 | 38.14 | -122.23417 | |
| USW00023130 | 34.20972 | -118.48917 | |
| VNOC1 | 38.60861 | -123.01806 | |
| VERC1 | 39.52139 | -120.02694 | |
| VCVC1 | 34.535 | -117.30583 | |
| VISC1 | 36.32833 | -119.29917 | |
| VSTC1 | 33.22944 | -117.22694 | |
| WASC1 | 35.58917 | -119.35194 | |
| USW00023277 | 36.93583 | -121.78861 | |
| WEAC1 | 40.72222 | -122.93306 | |
| WSTC1 | 38.3775 | -120.54528 | |
| WESC1 | 36.22722 | -119.99667 | |
| WILC1 | 39.15 | -122.15 | |
| WINC1 | 38.52528 | -121.97778 | |
| WSHC1 | 37.00694 | -118.98389 | |
| CPKC1 | 34.18194 | -118.57444 | |
| WRIC1 | 34.36167 | -117.63861 | |
| YBLC1 | 33.89 | -117.81889 | |
| YRKC1 | 38.90528 | -123.23139 | |
| YPQC1 | 37.75 | -119.58972 | |
| YKAC1 | 41.70361 | -122.64083 | |
| YUVC1 | 34.12944 | -116.38778 | |
| YMSC1 | 34.21833 | -116.40722 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment