Problem solver, outdoor lover, coder of many things.
I'm a huge techno fan!
Public
Edited
Jul 17, 2023
1 star
Plot.plot({
facet: {
data: agile_tariffs,
y: "dayOfYearYear",
label:"Day",
},
y: {
label: "Tariff p/kwh (VAT Inc)",
grid: true
},
x: {
label: "Time of Day (GMT)",
grid: true,
tickRotate: -90,
tickPadding: 5,
},
marks: [
// Plot.frame(),
Plot.ruleY([0]),
Plot.rectY(agile_tariffs,
{
x1: "validFromTime",
x2: "validToTime",
y: "pencePerKwhIncVat",
fill: "pencePerKwhIncVat",
tip:true
},
),
],
width, // Sets chart to take up full width available
marginLeft: 50,
marginBottom: 60,
marginRight: 125,
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
agile_tariffs = {
const productCode = "AGILE-FLEX-22-11-25"
const tariffCode = "E-1R-AGILE-FLEX-22-11-25-C"
return fetch(`https://api.octopus.energy/v1/products/${productCode}/electricity-tariffs/${tariffCode}/standard-unit-rates?period_from=${fromDateSelection.toISOString()}&period_to=${d3.timeDay.ceil(toDateSelection).toISOString()}&page_size=25000`).then((response) => response.json()).then(json => {
if(json.next !== null){ throw new Error("Response has more values with `next`")}
const parsed = json.results.map(r => {
const validFrom = new Date(r.valid_from)
const validTo = new Date(r.valid_to)
return{
pencePerKwhIncVat: r.value_inc_vat,
pencePerKwhExcVat: r.value_exc_vat,
validFrom,
validTo,
dayOfYearYear: dayOfYearYear(validFrom),
validFromTime: timeOfDay(validFrom),
validToTime: timeOfDay(validFrom) === "23:30" ? "24:00" : timeOfDay(validTo)
}
})
return parsed
})
}
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.
