Published
Edited
Apr 15, 2019
4 stars
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append('text')
.text(`Historic River Flows for the ${riverInput}`)
.attr('transform', 'translate('+ (margin.left-45) +','+ (margin.top-20)+')')
.attr('font-weight', 'bold')
.attr('font-size', '25px');
const path = svg.append("g")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-opacity", 0.2)
.selectAll("path")
.data(data.series)
.enter().append("path")
.style("mix-blend-mode", "multiply")
.attr("d", d => line(d.value))
.attr("class", d => "year_" + d.key );
svg.call(hover, path);
return svg.node();
}
height = 600
margin = ({top: 70, right: 30, bottom: 30, left: 60})
x = d3.scaleTime()
.domain(d3.extent(data.dates))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data.series, d => d3.max(d.value))]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Flow Rate in CFS"))
line = d3.line()
.defined(d => !isNaN(d))
.x((d, i) => x(data.dates[i]))
.y(d => y(d))
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
data = Object.assign( await fetch(`https://waterservices.usgs.gov/nwis/dv/?format=json&sites=${selectedRiver}&startDT=1900-11-01&endDT=${formatToday}&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(ddd){ return ddd.year})
.rollup(function(vv){return vv.map(({cfs})=>cfs)})
.entries(dd)
}).then(function(d){
return {
series:d,
dates: getDates(new Date(1900,0,1), new Date(1900,11,31))
}
}
)
)
riverData = [
{
"river": "Colorado River",
"id": "09380000"
},
{
"river": "Dolores River - Dolores",
"id": "09166500"
},
{
"river": "San Juan River",
"id": "09379500"
},
{
"river": "Salmon River",
"id": 13317000
},
{
"river": "Henry's Fork",
"id": 13042500
},
{
"river": "Animas River",
"id": "09361500"
},
{
"river": "Chama River",
"id": "08285500"
},
{
"river": "North Platte River",
"id": "06620000"
},
{
"river": "Dolores River - Slick Rock",
"id": "09168730"
},
{
"river": "Provo",
"id": "10163000"
}
]
parseRiver = riverData.map(({river})=>river)
getDates = function(startDate, endDate) {
var dates = [],
currentDate = startDate,
addDays = function(days) {
var date = new Date(this.valueOf());
date.setDate(date.getDate() + days);
return date;
};
while (currentDate <= endDate) {
dates.push(currentDate);
currentDate = addDays.call(currentDate, 1);
}
return dates;
}
html`
<style>
.year_${currentYear} {
stroke-width:2 !important;
stroke:#BD568E !important;
mix-blend-mode: normal !important;
stroke-opacity:1 !important;
}
.important-text{
font-weight:bold;
color:#BD568E;
}
</style>
`
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.
