The end-to-end solution for building and hosting better data apps, dashboards, and reports.
addTooltips(Plot.plot({
width,
height: 500,
marks: [
marksChart2.includes("Background") ?
Plot.rect(data, Plot.groupZ({fill: showStatAsBackground}, {fill:"value", fillOpacity: fillOpacityChart2})) :
null,
marksChart2.includes("Ticks") ?
Plot.tickX(data, {x: "value", strokeOpacity:.2, title: d => d.month + " " + d.dayOfMonth + " at " + d.hour + ":00" + "\n" + d.value}) :
null,
showFrame ?
Plot.frame({stroke: "#ddd"}) :
null,
marksChart2.includes("Hist") ?
Plot.rectY(data, Plot.binX({y:"proportion-facet"}, {x:"value"})) :
null,
minValueIs0 ?
Plot.ruleX([0], {stroke: "#ddd", strokeOpacity: 0}) :
null,
showSummaryStats.includes("mean") ?
Plot.tickX(data, Plot.groupZ({x: "mean"},{ x: "value", stroke: "steelblue", strokeWidth: 3})) :
null,
showSummaryStats.includes("median") ?
Plot.tickX(data, Plot.groupZ({x: "median"},{ x: "value", stroke: "#1abbc4", strokeWidth: 3})) :
null,
showSummaryStats.includes("10th") ?
Plot.tickX(data, Plot.groupZ({x: arr => d3.quantile(arr, .1)},
{ x: "value", stroke: "#40dde6", strokeWidth: 2})) :
null,
showSummaryStats.includes("90th") ?
Plot.tickX(data, Plot.groupZ({x: arr => d3.quantile(arr, .9)},
{ x: "value", stroke: "#40dde6", strokeWidth: 2})) :
null,
],
fy: {
label: null,
...get_facet_options(y_facet, "y") // get settings based on selection,
,
},
fx: {
label: x_facet === "week" ? "Week" : null,
...get_facet_options(x_facet) // get settings based on selection
},
facet: {
data: data,
x: x_facet, // break out horizontally
y: y_facet, // break out horizontally
marginLeft: y_facet === "week" || y_facet === "hour" ? 40 : 80,
},
color: {
scheme: 'magma',
reverse: true
},
x: {
label: "Electricity Demand (MWh) →"
}
})
)
import {addTooltips} from "@mkfreeman/plot-tooltip"
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.
