JavaScript | Python | Data Visualization | Web Development | Geology | Space | Analytics | IoT |
Learn, Build Stuff, and Figure Things Out
chart_2 = create_chart_of_river_gage_over_time(spring_creek[0].site_id,spring_creek[0].variableName,spring_creek[0].start_date_string,spring_creek[0].end_date_string,spring_creek[0].threshold,spring_creek[0].title)
twoWeeksBehind = new Date(Date.now() - 12096e5).toISOString().slice(0,10);
arguments_river_plot = [{"site_id":"08074000","variableName":"Gage height, ft","start_date_string":twoWeeksBehind,"end_date_string":"now","threshold":7,"title":"Gage Height Over Time of Buffalo Bayou at Houston"}]
spring_creek = [{"site_id":"08068500","variableName":"Gage height, ft","start_date_string":twoWeeksBehind,"end_date_string":"now","threshold":95,"title":"Gage Height Over Time Spring Ck nr Spring, TX"}]
function create_chart_of_river_gage_over_time(site_id,variableName="Gage height,ft",start_date_string,end_date_string="now",threshold=7,title="Gage Height Over Time of Buffalo Bayou at Houston"){
//// Calculate date for NOW and apply if end_date_string="now"
let end_date = new Date().toISOString().slice(0,10)
let twoWeeksBehind = new Date(Date.now() - 12096e5).toISOString().slice(0,10);
if(end_date_string!="now"){
end_date = end_date_string
}
function leftovers(data){
var prepped_values = ""
for (var i = 0; i < data.length; i++){
if(data[i].variable.variableName == variableName){
let number_of_potential_value_array = data[i].values.length
let longest_value_array_length = data[i].values[0].value.length
let longest_array = 0
for (let j = 0; j < number_of_potential_value_array; j++){
if (data[i].values[j].value.length >= longest_value_array_length){
longest_array = j
}
}
prepped_values = data[i].values[longest_array].value
}
}
return prepped_values
}
function chart(prepped_values){
////
let chart = vegalite({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "River Gage Height",
"layer": [
{"title": title,
"caption":"asdfasdf",
"data": {"values": prepped_values},
"mark": "line",
"encoding": {
"x": {"field": "dateTime", "type": "temporal"},
"y": {"field": "value",
"title": " Height in feet",
"type": "quantitative"}
}
},
{
"data": {"values": [{"value":threshold}]},
"mark": "rule",
"encoding": {
"y": {"aggregate": "max", "field": "value"},
"color": {"value": "red"},
"size": {"value": 1},
"title": "Too high for normal upstream paddling trip"
}
}
],
"width":500,
"height":160
})
return chart
}
function getUSGSdata(){
var data =
fetch('https://waterservices.usgs.gov/nwis/dv/?format=json&sites='+site_id+'&startDT='+start_date_string+'&endDT='+end_date+'&siteStatus=all')
.then(res => res.json())
.then(json =>json.value.timeSeries)
.then(json => leftovers(json))
.then(json => chart(json))
return data
}
return getUSGSdata()
}
md `## IMPORTS`
import {date} from "@jashkenas/inputs"
import {slider} from "@jashkenas/inputs"
d3 = require("d3@5")
vegalite = require("@observablehq/vega-lite@0.1")
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.
