Developer @Observable
Plot.plot({
y: { grid: true, label: "Average house prices(£)" },
x: { label: "Year", domain: [new Date(2015, 0, 1), new Date(2016, 0, 1)] },
marks: [
Plot.line(housing_in_london_monthly_variables, {
sort: "date",
x: "date",
y: "average_price",
filter: (d) => d.date.getFullYear() == 2015
})
],
height: 200,
marginLeft
})
Plot.plot({
y: { grid: true, label: "Average house prices(£)" },
x: { label: "Year", domain: [new Date(2015, 0, 1), new Date(2016, 0, 1)] },
marks: [
Plot.dot(housing_in_london_monthly_variables, {
x: "date",
y: "average_price",
filter: (d) => d.date.getFullYear() == 2015
})
],
height: 200
})
Inputs.table(
housing_in_london_monthly_variables.filter(
(d) => d.date.getFullYear() == 2015 && d.date.getMonth() == 5
)
)
Plot.plot({
y: { grid: true, label: "Average house prices(£)" },
x: { label: "Year", domain: [new Date(2015, 0, 1), new Date(2016, 0, 1)] },
color: { legend: true },
marks: [
Plot.line(housing_in_london_monthly_variables, {
x: "date",
y: "average_price",
stroke: "area",
filter: (d) => d.date.getFullYear() == 2015
})
],
height: 200,
marginLeft
})
Plot.plot({
y: { grid: true, label: "Average house prices(£)" },
x: { label: "Year", domain: [new Date(2015, 0, 1), new Date(2016, 0, 1)] },
color: { legend: true },
marks: [
Plot.lineY(housing_in_london_monthly_variables, {
sort: "date",
x: "date",
y: "average_price",
filter: (d) => d.date.getFullYear() == 2015,
interval: d3.utcMonth,
reduce: "mean"
})
],
height: 200,
marginLeft
})
Plot.plot({
y: { grid: true, label: "Average house prices(£)" },
x: { label: "Year" },
marks: [
Plot.lineY(housing_in_london_monthly_variables, {
sort: "date",
x: "date",
y: "average_price",
interval: d3.utcMonth,
reduce: "mean"
})
],
height: 200,
marginLeft
})
viewof logScale1 = Inputs.toggle({ label: "Use log scale", value: true })
Plot.plot({
y: {
grid: false,
label: "Average house prices(£)",
type: logScale1 ? "log" : "linear"
},
x: { label: "Year", grid: true },
marks: [
Plot.areaY(
housing_in_london_monthly_variables,
Plot.groupX(
{ y1: "min", y2: "max" },
{ x: "date", y: "average_price", fill: "steelblue", opacity: 0.2 }
)
),
Plot.areaY(
housing_in_london_monthly_variables,
Plot.groupX(
{ y1: (d) => d3.quantile(d, 0.1), y2: (d) => d3.quantile(d, 0.9) },
{ x: "date", y: "average_price", fill: "steelblue", opacity: 0.4 }
)
),
Plot.lineY(
housing_in_london_monthly_variables,
Plot.groupX(
{ y: "median" },
{
sort: "date",
x: "date",
y: "average_price"
}
)
)
],
height: 200,
marginLeft
})
viewof selectArea = Inputs.select(
d3.sort(new Set(housing_in_london_monthly_variables.map((d) => d.area))),
{ label: "Select area" }
)
viewof logScale2 = Inputs.toggle({ label: "Use log scale", value: true })
Plot.plot({
y: {
grid: false,
label: "Average house prices(£)",
type: logScale2 ? "log" : "linear"
},
x: { label: "Year", grid: true },
marks: [
Plot.line(housing_in_london_monthly_variables, {
sort: "date",
x: "date",
y: "average_price",
z: "area",
filter: (d) => d.area != selectArea,
opacity: 0.07,
strokeWidth: 1
}),
Plot.line(housing_in_london_monthly_variables, {
sort: "date",
x: "date",
y: "average_price",
strokeWidth: 2,
filter: (d) => d.area == selectArea
})
],
height: 200,
marginLeft
})
housing_in_london_monthly_variables = FileAttachment("housing_in_london_monthly_variables.csv").csv({typed:true})
marginLeft = 60
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.
