Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(aapl, {x: "Date", y: "Close"}),
Plot.gridX(),
Plot.axisX({
ticks: 20,
tickFormat: (
(get_cat, get_subcat) => (x) =>
x.getUTCMonth() === 0
? `${get_subcat(x)}\n${get_cat(x)}`
: get_subcat(x)
)(d3.utcFormat("%Y"), d3.utcFormat("%b"))
})
]
})
Plot.plot({
y: {percent: true},
marks: [
Plot.axisX({
ticks: 20,
tickFormat: (
(x) =>
x.o
? `${x.name}\n${x.cat}`
: x.name
)
}),
// Plot.axisY({label: "↑ Responses (%)"}),
Plot.barY(resp, {x: "name", y: "value"}),
Plot.ruleY([0])
]
})
Plot.plot({
x: {ticks: 6},
// y: {inset: 6},
marks: [
// Plot.frame({fill: "currentColor", fillOpacity: 0.1}),
// Plot.frame({anchor: "bottom"}),
Plot.axisX({ticks: "cat", tickSize: 28, textAnchor: "start", fill: "black"}),
// Plot.axisX({ticks: "name", tickSize: 16}),
// Plot.gridX({ticks: "week", stroke: "white", strokeOpacity: 1, insetBottom: -0.5}),
Plot.barY(responses0, {x: "name", y: "value"}),
]
})
responses0 = [
{cat: "a", name: "Family in feud with Zucker•bergs", value: 0.17},
{cat: "a", name: "Committed 671 birthdays to memory", value: 0.19},
{cat: "a", name: "Ex is doing too well", value: 0.10},
{cat: "b", name: "High school friends all dead now", value: 0.15},
{cat: "b", name: "Discovered how to “like” things mentally", value: 0.27},
{cat: "b", name: "Not enough politics", value: 0.12}
]
// responses_.map((x, i) => ({...x, o: responses0[i + 1].cat == responses0[i].cat}))
// responses0.map((item, index) => {
// if(index === 0) {
// return true;
// } else {
// /* transformation logic */
// return responses0[index].cat !== responses0[index - 1].cat;
// }
// })
resp = responses0.map((x, i) => ({...x, o: is_new(responses0, i)}))
function is_new(responses0, index) {
if(index === 0) {
return true;
} else {
/* transformation logic */
return responses0[index].cat !== responses0[index - 1].cat;
}
}
responses_ = [...responses0]
responses_.slice(0)
responses0
aapl
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.
