ind = dates.indexOf(time1)
<style>
/* match the scrubber's width to our race chart */
/* input[type="range"][name="i"] {
width: ${width-90}px !important;
} */
</style>
style = html`
<style>
.button {
color:lightgrey;
border: 0;
background: transparent;
box-sizing: border-box;
width: 100;
height: 74px;
border-color: transparent transparent transparent lightgrey;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 37px 0 37px 60px;
}
.paused {
border-style: double;
border-width: 0px 0 0px 60px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
input{
accent-color:white
}
</style>
`
test === null
test = null
today = d3.timeDay.offset(d3.utcDay(), -2) //d3.utcDay()
start = d3.timeDay.offset(today, -365)
textures = require("textures@1.2.0/dist/textures.js")
limitsDelayed = {
await Promises.delay(1500, ""); // delay returning
return limits;
}
limits
viewof limits = {
// document.querySelector('[name="b"]').disabled = true;
return brushFilterX(d3.extent(dates), {
defaultExtent: [start, d3.timeDay.offset(today, -1)]
});
}
(1 * 21) / 200
ns = Inputs.text().classList[0]
viewof colorView = Inputs.radio(["Anomaly", "Heatwaves"], {
value: "Anomaly",
format: (x) => html`<span style="color: white">${x}`
})
colorView
datesToPlot = datesCopy.filter(
(d) => d >= limitsDelayed[0] && d <= limitsDelayed[1]
)
// d3.timeDay.offset(limits[1], 1)
datesCopy = [...dates]
dateExtent = [new Date("2013-01-01"), new Date()] //d3.extent(HWStatus, (d) => new Date(d.date_start1))
Math.min(755, width - 1)
viewof time1 = Scrubber(datesToPlot, {
width: 0,
delay: 100,
autoplay: false,
loop: false,
format: (d) => ""
})
limits
curDate = md`# ${textcolor(timeFormat(new Date(time1)), "black")}`
leg = {
return colorView === "Anomaly"
? Plot.legend({
marginLeft: 10,
marginRight: 10,
style: {
backgroundColor: "#000000",
color: "#e0f5ee",
fontSize: "16px",
fontWeight: "normal"
},
color: {
type: "diverging",
domain: [-4, 4],
pivot: 0,
reverse: true,
legend: true,
label: "SSTA (°C) →"
}
})
: Plot.legend({
color: {
type: "categorical",
domain: ["Moderate", "Strong", "Severe", "Extreme"],
range: ["#FEDB67", "#f26722", "#cd3728", "#7E1416"] // use the "accent" scheme
},
style: {
backgroundColor: "#000000",
color: "#e0f5ee",
fontSize: "16px",
fontWeight: "normal"
}
});
}
Plot.legend({
style: {
fontSize: "16px",
backgroundColor: "#000000",
color: "#e0f5ee"
},
color: {
type: "categorical",
domain: ["Moderate", "Strong", "Severe", "Extreme"],
range: ["#FEDB67", "#f26722", "#cd3728", "#7E1416"] // use the "accent" scheme
}
})
// new Date(time1)
mutable siteClicked = 8
viewof lineChart = {
const HWlineChart = Plot.plot({
style: {
backgroundColor: "#000000",
color: "#e0f5ee",
// fontFamily: "system-ui",
fontSize: 20
// title: "stuff"
// overflow: "visible"
},
// height: "auto",
// height: 400,
marginTop: 50,
className: "hwclass",
marks: [
Plot.line(clickedSite, {
x: "date",
y: "sst",
stroke: colors.get("sst"),
curve: "step",
strokeWidth: 2
}),
Plot.line(clickedSite, {
x: "date",
y: "thresh",
stroke: colors.get("thresh"),
opacity: 0.7,
// curve: "step",
strokeWidth: 2
}),
Plot.line(clickedSite, {
x: "date",
y: "seas",
stroke: colors.get("seas"),
opacity: 0.7,
// curve: "step",
strokeWidth: 2
}),
Plot.areaY(clickedSite, {
x: "date",
y1: "thresh",
y2: "diff",
sort: "date",
curve: "step",
fill: colors.get("moderate")
}),
Plot.areaY(clickedSite, {
x: "date",
y1: "thresh",
y2: "diffStrong",
sort: "date",
curve: "step",
fill: colors.get("Strong")
}),
Plot.areaY(clickedSite, {
x: "date",
y1: "thresh",
y2: "diffExtreme",
sort: "date",
curve: "step",
fill: colors.get("Extreme")
}),
Plot.areaY(clickedSite, {
x: "date",
y1: "thresh",
y2: "diffSevere",
sort: "date",
curve: "step",
fill: colors.get("Severe")
}),
// rule at bottom of chart marking y=0;
Plot.ruleY([0]),
// vertical rule to mark date/time of event
Plot.ruleX([time1], {
stroke: "gray",
y1: 0,
y2: d3.max(clickedSite, (d) => d.sst)
}),
Plot.text(
[
{
x: dateForLabel,
y: yValueForLabel,
text: buoyClicked
}
],
{
x: "x",
y: "y",
text: "text",
fontSize: 24
}
)
],
color: {
domain: ["above", "below", "avg", "thresh"],
range: [
colors.get("above"),
colors.get("below"),
colors.get("actuals"),
colors.get("forecast")
]
// legend: true
},
y: {
label: "↑ (°C)"
},
marginLeft: 60,
width: 500,
height: 300
});
const SSTAlineChart = Plot.plot({
x: {
domain: [limitsDelayed[0], limitsDelayed[1]]
},
y: {
label: "↑ SST (°C)",
domain: [0, yMaxDomainToUse]
},
style: {
backgroundColor: "#000000",
color: "#e0f5ee",
// fontFamily: "system-ui",
fontSize: 20
// overflow: "visible"
},
height: 500,
marginTop: 50,
className: "hwclass",
// y: {
// nice: true
// },
// x: {
// nice: true
// },
marks: [
Plot.dot(clickedSite, {
x: "date",
y: "sst",
stroke: "ssta",
fill: "ssta"
}),
Plot.line(clickedSite, {
x: "date",
y: "sst",
stroke: "#ccc",
curve: "step",
strokeWidth: 0.5
}),
// vertical rule to mark date/time of event
Plot.ruleX([time1], {
stroke: "white",
y1: 0,
y2: d3.max(clickedSite, (d) => d.sst)
}),
Plot.text(
[
{
x: dateForLabel,
y: yValueForLabel,
text: buoyClicked
}
],
{
x: "x",
y: "y",
text: "text",
fontSize: 24
}
)
],
color: {
type: "diverging",
domain: [-4, 4],
pivot: 0,
reverse: true
// legend: true,
// label: "SSTA (°C) →"
},
width: 500,
height: 300
// marginBottom: 70,
// label: buoyClicked
// title: "some stie"
});
if (siteClicked !== null) {
return colorView === "Anomaly" ? SSTAlineChart : HWlineChart;
} else {
return md``;
}
}
width
clickedSite.length
d3.max(clickedSite, (d) => d.sst) * 1.1
buoys
yMaxDomainToUse = {
return clickedSite[Math.floor(clickedSite.length / 1.2)] === undefined ?
18 : d3.max(clickedSite, (d) => d.sst) * 1.1
}
yValueForLabel = {
return clickedSite[Math.floor(clickedSite.length / 1.2)] === undefined
? 18
: d3.max(clickedSite, (d) => d.sst) * 1.1;
}
dateForLabel = {
return clickedSite[Math.floor(clickedSite.length / 1.2)] === undefined
? d3.timeDay.offset(limitsDelayed[0], 30)
: clickedSite[Math.floor(clickedSite.length * 0.2)].date;
}
Math.floor(clickedSite.length * 0.1)
buoyClicked = buoys.find((d) => d.pk === siteClicked).long_name
viewof table = Inputs.table(clickedSite, {})
clickedSite = buoyDailyData.filter((d) => d.station === siteClicked)
sstaColors = d3.scaleSequential(d3.interpolateRdBu).domain([4, -4])
coloursForSSTA = clickedSite.map((d) => sstaColors(d.ssta))
r = "mapbox://styles/hakai/ckwpei0yq08cj15nthgd4ql45" //"mapbox://styles/hakai/ckwuxmze164c314pe8hs0s1on" //"mapbox://styles/hakai/ckwpei0yq08cj15nthgd4ql45" //"mapbox://styles/mapbox/dark-v10" //mapbox://styles/hakai/ckwp8ahbx2u0w15o5zwx3odtn"
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
buoyDailyData
// selected = hexbyLocation.get(
// map.selected ? map.selected.data.lng + "|" + map.selected.data.lat : ""
// ) || []
// hexbyLocation = d3.group(hex, (d) => d.lng + "|" + d.lat)
// HWStatus.filter((d) => d.station === "7")
new Date(time1).toISOString().substring(0, 10) === "2021-01-01"
HWsForDate = buoyDailyData.filter(
(d) =>
new Date(time1).toISOString().substring(0, 10) ===
new Date(d.result_time).toISOString().substring(0, 10)
)
buoyDailyData.filter((d) => d.category === "Strong")
new Date(dateExtent[1])
center = projection.invert([width/2, height/2])
metersToPixelsAtMaxZoom = (meters, latitude) =>
meters / 0.075 / Math.cos(latitude * Math.PI / 180)
limits[0]
dayBeforeStart = {
const b = Object.assign(limits[0]);
const fistDate = new Date(b);
return new Date(fistDate.setDate(fistDate.getDate() - 1))
.toISOString()
.substring(0, 10);
}
limits[0]
// buoyDailyData = {
// const buoyDailyData = await FileAttachment(
// "buoysHWStatusDaily-2.json"
// ).json();
// buoyDailyData.forEach((d) => {
// d.ssta = d.sst - d.seas;
// d.diffStrong = d.thresh;
// d.diffExtreme = d.thresh;
// d.diffSevere = d.thresh;
// if (d.category === "Strong") {
// d.diffStrong = Math.max(d.thresh, d.sst);
// }
// if (d.category === "Extreme") {
// d.diffExtreme = Math.max(d.thresh, d.sst);
// }
// if (d.category === "Severe") {
// d.diffSevere = Math.max(d.thresh, d.sst);
// }
// d.diff = Math.max(d.thresh, d.sst);
// d.date = new Date(d.result_time);
// });
// let outdate = buoyDailyData.filter(
// (d) =>
// new Date(limits[0].toISOString().substring(0, 10)) <= d.date &&
// new Date(limits[1].toISOString().substring(0, 10)) >= d.date
// );
// return outdate;
// }
limits
dayBeforeStart
buoyDailyData = {
// let daysago = new Date().getDate() - 7;
// let st = new Date(new Date().setDate(daysago));
return fetch(
"https://t6r95rekqe.execute-api.us-east-1.amazonaws.com/dev/getDailySSTStats?startDate=" +
dayBeforeStart +
"&endDate=" +
limitsDelayed[1].toISOString().substring(0, 10) +
""
)
.then((resp) => resp.json())
.then((data) => {
data.forEach((d) => {
d.ssta = d.sst - d.seas;
d.diff = d.thresh;
d.diffStrong = d.thresh;
d.diffExtreme = d.thresh;
d.diffSevere = d.thresh;
if (d.category === "Strong") {
d.diffStrong = Math.max(d.thresh, d.sst);
}
if (d.category === "Extreme") {
d.diffExtreme = Math.max(d.thresh, d.sst);
}
if (d.category === "Severe") {
d.diffSevere = Math.max(d.thresh, d.sst);
}
if (d.category === "Moderate") {
d.diff = Math.max(d.thresh, d.sst);
}
// d.diff = Math.max(d.thresh, d.sst);
d.date = new Date(d.result_time);
});
return data;
});
}
// dateExtent[0].toISOString().substring(0, 10)
// updateMapbox = {
// // This allows us to update the map with data without re-rendering the whole cell
// // There is a bit of weirdness around adding and removing the layer to make sure mapbox rerenders
// let fc = {
// type: "FeatureCollection",
// features: hexgeo
// };
// if (map._loaded) {
// if (!map.getSource("hexbins")) {
// map.addSource("hexbins", {
// type: "geojson",
// data: fc
// });
// } else {
// // console.log("setting source")
// map.getSource("hexbins").setData(fc);
// }
// if (map.getLayer(hexbinLayer.id)) {
// map.removeLayer(hexbinLayer.id);
// }
// // console.log("adding layer")
// map.addLayer(hexbinLayer);
// // map.flyTo(projection.invert([100,1000]))
// // console.log("flying")
// // }
// return true;
// }
// return false;
// }
// map._loaded
// map.getSource("hexbins")
// import {california, countyShapes} with {height as height, hexbin as hexbin} from "@enjalot/air-quality-explorations"
originalScale = 25355.18980109889
scaleRatio = projection.scale() / originalScale
widthRatio = width / 955
heightRatio = height / 500
projection = d3
.geoAlbers()
.rotate([126, 0])
.fitSize(
[width, height],
topojson.feature(BC_Midres, BC_Midres.objects.BC_Midres_latlng)
)
pixelRadius = 100 * scaleRatio * d3.min([widthRatio, heightRatio])
hexbin = d3
.hexbin()
.extent([
[0, 0],
[width, height]
])
.radius(100)
numOfDates = d3.timeDay.count(...dateExtent)
height = 500
colorMHW = d3
.scaleOrdinal()
.domain(["none", "Moderate", "Strong", "Extreme", "Severe"])
.range(["#31a354", "#FEDB67", "#f26722", "#7E1416", "#cd3728"])
opacityMHW("none")
opacityMHW = d3
.scaleOrdinal()
.domain(["none", "Moderate", "Strong", "Extreme", "Severe"])
// .range([0.9, 0.9, 0.9, 0.9, 0.9])
colorPM1 = d3.scaleLinear()
.domain([0,50, 100, 150, 200, 250])
.range(["green", "yellow", "orange", "red", "maroon", "maroon"])
opacityPM1 = d3.scaleLinear()
.domain([0,50, 100, 150, 200, 250])
.range([0.1, 0.5, 0.9, 0.9, 0.9, 0.9])
colorP03 = d3.scaleLinear()
.domain([1,1000, 5000, 10000, 20000, 25000])
.range(["green", "yellow", "orange", "red", "maroon", "maroon"])
opacityP03 = d3
.scaleLinear()
.domain([1, 1000, 5000, 10000, 20000, 25000])
.range([0.1, 0.75, 0.75, 0.9, 0.9, 0.9])
numFormat = d3.format(",d")
timeFormat = d3.timeFormat("%Y-%m-%d")
import { Scrubber } from "@mbrownshoes/stylized-scrubber"
import {legend} from "@d3/color-legend"
import { BC_Midres } from "@mbrownshoes/how-i-start-maps-in-d3"
d3 = require("d3@6.0.0-rc.3", "d3-hexbin@0.2")
// token = "pk.eyJ1IjoiaGFrYWkiLCJhIjoiY2lyNTcwYzY5MDAwZWc3bm5ubTdzOWtzaiJ9.6QhxH6sQEgK634qO7a8MoQ"
// mapboxgl = {
// const gl = await require("mapbox-gl");
// if (!gl.accessToken) {
// gl.accessToken =
// "pk.eyJ1IjoiaGFrYWkiLCJhIjoiY2lyNTcwYzY5MDAwZWc3bm5ubTdzOWtzaiJ9.6QhxH6sQEgK634qO7a8MoQ";
// const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
// document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
// }
// return gl;
// }
import { textcolor } from "@observablehq/text-color-annotations-in-markdown"
alldates = d3.timeMonth
.range(new Date(dateExtent[0]), new Date(dateExtent[1]))
.map((d) => d.toISOString().substring(0, 10))
// import { brushFilterX } from "921d584bd92a9817"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.