// hold space for line graph over time
/*
Plot.plot({
height: 450,
width: 1200,
x: {
label: "Date"
// tickFormat: (d) => d3.isoParse(d) // to show the full date
, domain: d3.extent(
// gets the min and max values
d3.merge(
// merge all dates from the series arrays
d3.map(d3.map(fakeDataSet2FromJSON, (s) => s.data), (d) => d3.extent(d, (_d) => d3.isoParse(_d.X))))),
},
y: {
label: "Y Axis",
zero: true
},
tip: true, // This enables the default tooltip functionality, but does NOT allow for any customization of those values.
marks: [
// This is the shaded area in the background.
// The shaded area sits BEHIND the other layers because it is the FIRST mark in the list. Everything else is drawn on top of the marks before it.
fakeDataSet2FromJSON.map((d) => Plot.areaY(d.data, {
x: "X"
, y: (d) => {
if (d.Y > 3000) {
return d.Y - 1200;
}
return;
}
//, stroke: "Color"
, filter: (d) => d.Y > 1500
, fill: "Color"
, fillOpacity: 0.15
})),
// This draws the colored line for the data sets
fakeDataSet2FromJSON.map((d) => Plot.line(d.data, {
x: "X"
, y: "Y"
, stroke: "Color"
})),
// This draws the colored dots along the line
fakeDataSet2FromJSON.map((d) => Plot.dot(d.data, {
x: "X"
, y: "Y"
, fill: "Color"
}))
]
})
*/
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.
