md`# Test from ERDDAP`
viewof dataset_label = html`<h2>${dataset}</h2>`
viewof variable = select(metadata_variables.filter(d=>d['Variable Name'] !== 'time').map(variable => variable['Variable Name']))
mutable dataset = 'wmo_44065'
viewof search = text({placeholder: "Search for a station", description: "Uses ERDDAP advanced search API", submit: "Go"})
viewof results_list = html`<div style="max-height:200px;overflow:auto">${results.map(d=>{
const button = html`<button>Load</button>`
button.addEventListener('click',(e)=>{
mutable dataset = d['Dataset ID']
})
return html`${d['Title']} (${d['Dataset ID']}) ${button} <br />`
})}</div>`
start_time = new Date(Math.max(new Date(metadata_attribute_map.time_coverage_start.Value).getTime(),new Date(+end_time - length_in_days*24*60*60*1000).getTime()))
length_in_days = 30
wait_time_in_seconds = 600;
metadata_attribute_map.time_coverage_end.Value
end_time = new Date(metadata_attribute_map.time_coverage_end.Value)
variable_object = metadata_variables.find(m=>m['Variable Name'] == variable)
height = 500
margin = ({top: 20, right: 30, bottom: 30, left: 40})
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(variable_object.long_name + ' (' + variable_object.units + ')'))
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
x = d3.scaleUtc()
.domain(d3.extent(data, d => new Date(d.time)))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(data, d => +d[variable])).nice()
.range([height - margin.bottom, margin.top])
line = d3.line()
.defined(d => !isNaN(+d[variable]) && +d[variable] != variable_object._FillValue)
.x(d => x(new Date(d.time)))
.y(d => y(+d[variable]))
metadata_attribute_map = Object.fromEntries(metadata.map(m=>[m['Attribute Name'],m]))
metadata = d3.csv('https://erddap.sensors.axds.co/erddap/info/' + dataset + '/index.csv')
metadata_variables = metadata.filter(d=>d['Row Type'] == 'variable')
.filter(
d=>d['Variable Name'] !== 'latitude' &&
d['Variable Name'] !== 'longitude' &&
d['Variable Name'] !== 'z' &&
d['Variable Name'] !== 'station'
)
.map(function(d){
var attributes = metadata.filter(r=>r['Variable Name'] == d['Variable Name'] && r['Row Type'] == 'attribute')
attributes.forEach(function(a){
d[a['Attribute Name']] = a['Value']
})
return d;
})
//need to format time correctly
data = {
const result = await d3.csv(`https://erddap.sensors.axds.co/erddap/tabledap/${dataset}.csv?${[variable,'time'].join('%2C')}&time%3E=${start_time.toISOString()}&time%3C=${end_time.toISOString()}`)
return result
}
results = {
let arr = [];
if(search){
arr = await d3.csv('https://erddap.sensors.axds.co/erddap/search/index.csv?page=1&itemsPerPage=200&searchFor=' + search);
}
return arr;
}
search_array = results.slice().map(d=>d['Title'])
md`# Libraries`
d3 = require("d3@^5.9")
import {input} from "@jashkenas/inputs"
import {text} from "@jashkenas/inputs"
import {select} from "@jashkenas/inputs"
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.
