Published
Edited
Nov 18, 2018
2 forks
15 stars
Insert cell
Insert cell
Insert cell
data = fetch("https://waterservices.usgs.gov/nwis/dv/?format=json&sites=09166500&startDT=1985-11-01&endDT=2018-11-01&siteType=ST&siteStatus=all")
.then(function(response){
return response.json();
})
Insert cell
Insert cell
flowData=data.value.timeSeries[0].values[0].value.map(({dateTime, value})=>({date:dateTime, value:parseFloat(value)}))
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell

function timeFormat(x){
let parseTime = d3.timeParse("%Y-%m-%d");
let parseTime2 = d3.timeParse("%m-%d")
let splits = (x).split('T');
let newDate = parseTime(splits[0])
let monthDay = newDate.getMonth()+1+"-"+newDate.getDate();
return parseTime2(monthDay)
}
Insert cell
Insert cell
function yearFormat(x){
let splits = (x).split('-')
return splits[0]
}
Insert cell
Insert cell
dataToBeNested = flowData
.map(({date, value})=>({date:timeFormat(date) , year:yearFormat(date), cfs:value}))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataToBeNested2 = dataToBeNested.map(({year, value})=>({year:year, cfs:value}))
Insert cell
Insert cell
nestedData = d3.nest()
.key(function(d) {return d.year;})
.rollup(function(v){return v.map(({cfs})=>(cfs))})
.entries(dataToBeNested)
Insert cell
Insert cell
dataFinal = {
return {
date:date,
flow:nestedData
}
}
Insert cell
Insert cell
dData=fetch("https://waterservices.usgs.gov/nwis/dv/?format=json&sites=09380000&startDT=1985-11-01&endDT=2018-11-01&siteType=ST&siteStatus=all")
.then(function(response){
return response.json();
}).then(function(myJson){
let timeSeries = myJson.value.timeSeries
for(let ii=0; ii<= timeSeries.length;ii++) {
if(timeSeries[ii].variable.variableName.includes("Streamflow")){
return timeSeries[ii].values[0].value.map(({dateTime, value})=>({year:yearFormat(dateTime), cfs:parseFloat(value)}))
}
}
}).then(function(dd){
return d3.nest()
.key(function(d){return d.year})
.rollup(function(v){return v.map(({cfs}) => cfs)})
.entries(dd)
}).then(function(d){
return {
series:d,
dates:getDateArray(new Date(1900,0,1), new Date(1900, 11, 31))
}
})
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more