Public
Edited
Jan 17, 2023
1 fork
1 star
regression = Plot.plot({
grid: true,
color: {
legend: true,
scheme: 'Set2'
},
marginLeft: 70,
marginRight: 70,
marginBottom: 50,
marginTop: 30,
width,
marks: [
Plot.dot(dataset, {
x: "temperature",
y: "kilowatt-hour",
fill: "whom",
title: (x) => `${d3.timeFormat("%Y-%m-%d")(x.date)} \n ${d3.format(".2f")(x.temperature, 2)}°C \n ${d3.format(".2f")(x['kilowatt-hour'])}kWh`
}),
Plot.line(
dataset,
Plot.regression({
x: "temperature",
y: "kilowatt-hour",
stroke: "whom",
type: 'Quad'
})
)
]
})
dataset = {
let dataset = await FileAttachment("dataset@2.csv").csv({typed: true})
let whom = (day) => {
if (day.n_hosts === 0 & day.n_guests === 0) {
return 'Nobody'
}
if (day.n_hosts > 0) {
return 'Hosts'
}
return 'Airbnb guests'
}
return dataset.map(x => ({ ...x, 'whom': whom(x) }))
}
guests = FileAttachment("guests@1.csv").csv({typed: true})
hosts = FileAttachment("hosts.csv").csv({typed: true})
function multiLayerX(config, base, ...layers) {
const A = Plot.plot({
...config,
marks: [base]
});
const x = A.scale("x");
return Plot.plot({
...config,
marks: [
base,
...layers.map((l) => () =>
Plot.plot({
...config,
marks: [l(x)],
x: { ...x, axis: null },
y: { axis: "right", line: true, nice: true, ticks: [...Array(8)].map((_, i) => 5 + i * 5) }
})
)
]
});
}
import {addRegression} from "@fil/plot-regression"
reg = require("d3-regression@1")
Plot = addRegression(await require("@observablehq/plot@0.6"))
import {Legend, Swatches} from "@d3/color-legend"
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.
