Using data from the USGS Instantaneous Values Web Service.
-
-
Save brevity/3b3198c27f481516fda9 to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <title>Streamgraph</title> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| margin: auto; | |
| position: relative; | |
| width: 960px; | |
| } | |
| button { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> | |
| <script> | |
| var n = 20, // number of layers | |
| m = 200, // number of samples per layer | |
| stack = d3.layout.stack().offset("wiggle"); | |
| //layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })), | |
| //layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); })); | |
| function grabDepths(e,i){ | |
| return [e.dateTime, e.value]; | |
| } | |
| var depths = []; | |
| //var url = 'http://waterservices.usgs.gov/nwis/iv/?format=json¶meterCd=00065&startDT=2014-6-1&sites=08155400,08155300,08155240'; | |
| var url = 'http://waterservices.usgs.gov/nwis/iv/?format=json¶meterCd=00060&startDT=2014-6-20&sites=08155400,08155300,08155240'; | |
| var numberOfLayers = 0; | |
| $.ajax(url, {success:function(data){ | |
| numberOfLayers = data.value.timeSeries.length; | |
| var timeSeriesPlural = []; | |
| for(var i = 0; i < numberOfLayers; i++){ | |
| var tmp = data.value.timeSeries[i].values[0].value; | |
| timeSeriesPlural[i] = tmp.map(grabDepths); | |
| } | |
| var timeSeriesCollated = {}; | |
| for(i = 0; i < numberOfLayers; i++){ | |
| var series = timeSeriesPlural[i]; | |
| for(var ii = 0; ii < series.length; ii++){ | |
| var dt = series[ii][0], | |
| v = series[ii][1]; | |
| if(!timeSeriesCollated[dt]){timeSeriesCollated[dt] = {};} | |
| timeSeriesCollated[dt][i] = v; | |
| //if(i == timeSeriesPlural.length -1){console.log(dt, timeSeriesCollated[dt]);} | |
| } | |
| } | |
| convertData(timeSeriesCollated); | |
| }}); | |
| function convertData(timeSeriesCollated){ | |
| var times = []; | |
| var depthsWithoutTimes = _.map(timeSeriesCollated, function(v,k,l){if(Object.keys(v).length == numberOfLayers){times.push(k);return _.toArray(v);}}); | |
| //console.log(depthsWithoutTimes); | |
| var range = d3.range(numberOfLayers); | |
| var datas = []; | |
| console.log(depthsWithoutTimes); | |
| range.map(function(e, i) { | |
| datas[i] = []; | |
| depthsWithoutTimes.map(function(ee,ii,arr){ | |
| if(arr[ii] !== undefined){ | |
| try{ | |
| var y = arr[ii][i]; | |
| var d = {x:parseInt(ii), y:parseInt(y)}; | |
| } catch(e){ | |
| console.log(i, ii, y); | |
| } | |
| datas[i].push(d); | |
| } | |
| }) | |
| }) | |
| layers0 = stack(datas); | |
| console.log("Layers0"); | |
| console.log(layers0); | |
| console.log("datas"); | |
| console.log(datas); | |
| setupGraph(layers0); | |
| } | |
| function setupGraph(layers){ | |
| var width = 960, | |
| height = 500; | |
| var x = d3.scale.linear() | |
| .domain([0, m - 1]) | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .domain([0, d3.max(layers.concat(layers), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })]) | |
| .range([height, 0]); | |
| var color = d3.scale.linear() | |
| .range(["#000099", "#00AAAA"]); | |
| var area = d3.svg.area() | |
| .x(function(d) { return x(d.x); }) | |
| .y0(function(d) { return y(d.y0); }) | |
| .y1(function(d) { return y(d.y0 + d.y); }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.selectAll("path") | |
| .data(layers) | |
| .enter().append("path") | |
| .attr("d", area) | |
| .style("fill", function() { return color(Math.floor(Math.random()*100)*.01); }); | |
| } | |
| function transition() { | |
| d3.selectAll("path") | |
| .data(function() { | |
| var d = layers1; | |
| layers1 = layers0; | |
| return layers0 = d; | |
| }) | |
| .transition() | |
| .duration(2500) | |
| .attr("d", area); | |
| } | |
| // Inspired by Lee Byron's test data generator. | |
| function bumpLayer(n) { | |
| function bump(a) { | |
| var x = 1 / (.1 + Math.random()), | |
| y = 2 * Math.random() - .5, | |
| z = 10 / (.1 + Math.random()); | |
| for (var i = 0; i < n; i++) { | |
| var w = (i / n - y) * z; | |
| a[i] += x * Math.exp(-w * w); | |
| } | |
| } | |
| var a = [], i; | |
| for (i = 0; i < n; ++i) a[i] = 0; | |
| for (i = 0; i < 5; ++i) bump(a); | |
| return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; }); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment