Select to transform between graphs: <div style="display: inline-block;">${Inputs.bind(graph_selector, viewof graph_type)}</div>
barchart = bars.plot({
y: { domain: [-10, 10] },
color: {
domain: ["1","2","3","4"],
range: ["#73d3ff", "#9173ff","#e15759", "#45c421"],
type: "categorical"
}
})
bars = barY(animated_graph_data.filter(d => d.gType.match("Sole Producer")), { x: "week", fill: d => get_color(d.val)})
{
const updated = animated_graph_data.filter(d => d.gType.match(graph_type))
yield updated;
await bars
.transition({ Y: updated.map(d => d.val), C: updated.map(d => get_color(d.val)) }, { duration: 750 })
.end();
}
import { select } from "@bartok32/diy-inputs"
viewof graph_type = new Inputs.input("Sole Producer")
animated_graph_data = FileAttachment("animated_graph_data.csv").csv()
graph_selector = select({
title: "",
options: ["Sole Producer", "Absolute value Graph", "Delta Graph"],
selected: "Sole Producer",
selectStyle: {
background: "linear-gradient(#e66465, #9198e5)",
"font-size": "15px",
height: "30px"
},
onchange: ({ select, value }) =>d3.select(select).style("background", graph_selector_color[value])
})
graph_selector_color = ({"Sole Producer":"#a6e3ff","Absolute value Graph": "linear-gradient(#c7b8fc,#a6e3ff)","Delta Graph": "linear-gradient(#b2f2a0,#ff9c9d)"})
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.
