Try, fail, learn, improve. Then repeat.
maxD = d3.max(d, (x) => x.d)
maxC = d3.max(d, (x) => x.c)
viewof hypoT = Inputs.range([0, maxC], {step: 1, label: "C"})
viewof hypoY = Inputs.range([0, maxD], {step: 1, label: "Y"})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(d, { x: "c", y2: maxD, y1: "w", fill: "#E85C4A", opacity: 0.5 }),
Plot.areaY(d, { x: "c", y1: "w", y2: "d", fill: "#FFCF70", opacity: 0.5 }),
// Plot.areaY(d, {x: "c", y: "w", fill: "#06C167", opacity: 0.5}),
// Plot.ruleX([hypoT]), Plot.ruleY([hypoY]),
Plot.dot([[hypoT, hypoY]], {r: 5}),
Plot.ruleY([0])
]
})
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.
