grid = html`<div style="
background: #fff;
display: grid;
height: ${(screen.height / screen.width) * 100}vw;
grid-template-areas:
'. .'
'a b'
'a b'
'a b'
'a b'
'a d'
'a d'
'a d'
'a d'
'c c';
grid-gap: 100px;
">
<div class="box a" style="grid-area: a; border: solid 1px #ccc; position: center;">${viewof map}</div>
<div class="box b" style="grid-area: b; border: solid 1px #ccc; position: center;">${viewof UV_Plot}</div>
<div class="box c" style="grid-area: c; border: solid 1px #ccc; position: center;">${viewof sliceInt}</div>
<div class="box d" style="grid-area: d; border: solid 1px #ccc; position: center;">${viewof LV_Plot}</div>
</div>`
viewof map = {
let container = html`<div style="height:1200px; width:1800px;">`;
yield container;
const map = (container.value = L.map(container).setView([43.2, -113.5], 8));
//.on('click', ClearFilter);
let osmLayer = L.tileLayer(
"https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}",
{
attribution:
'Map tiles by <a href="http:n//stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: "abcd",
ext: "png"
}
).addTo(map);
ModelBound.addTo(map);
NegContFG.addTo(map);
PosContFG.addTo(map);
map.options.minZoom = 8;
}
html`<style>
text {
fill : black;
font-size : 22px;
}
</style>`
sliceDate = timeScale.invert(sliceInt)
viewof UV_Plot = addTooltips(
Plot.plot({
width: 1000,
marginTop: 100,
marginRight: 100,
y: {
label: "Change in Flow (CFS)",
domain: [0, 2]
},
x: { domain: [new Date(2000, 1, 1), new Date(2030, 1, 1)] },
marks: [
Plot.areaY(
UV_Gains,
Plot.stackY({
x: "date",
y: "unemployed",
fill: "industry",
z: "industry",
title: "industry",
order: "max",
reverse: true,
stroke: "#ddd"
})
),
Plot.ruleY([0])
],
style: {
pointerEvents: "all"
},
color: {
legend: false,
columns: "110px",
width: 640
}
})
)
viewof LV_Plot = addTooltips(
Plot.plot({
width: 1000,
marginTop: 100,
marginRight: 100,
y: {
label: "Change in Flow (CFS)",
domain: [0, 2]
},
x: { domain: [new Date(2000, 1, 1), new Date(2030, 1, 1)] },
marks: [
Plot.areaY(
LV_Gains,
Plot.stackY({
x: "date",
y: "unemployed",
fill: "industry",
z: "industry",
title: "industry",
order: "max",
reverse: true,
stroke: "#ddd"
})
),
Plot.ruleY([0])
],
style: {
pointerEvents: "all"
},
color: {
legend: false,
columns: "110px",
width: 500
}
})
)
import { addTooltips } from "@mkfreeman/plot-tooltip";
mp31_test_gains = FileAttachment("MP31_Test_Gains_Flat.csv").csv({
typed: true
})
UV_Gains = mp31_test_gains.filter(function (el) {
return (
el.industry == "Ashton-Rexburg" ||
el.industry == "Heise-Shelley" ||
el.industry == "Shelley-nr Blackfoot" ||
el.industry == "nr Blackfoot-Neeley" ||
el.industry == "Neeley-Minidoka"
);
})
LV_Gains = mp31_test_gains.filter(function (el) {
return (
el.industry == "Kimberly_Buhl" ||
el.industry == "Buhl_LowerSalmonFalls" ||
el.industry == "LowerSalmonFalls_KingHill"
);
})
db = DatabaseClient("testdb")
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.
