👨💻 Modelling consultant
🧮 numbers 📊 actuarial
📈 viz, interactivity, transparency
viewof playButton = Inputs.button("Play")
viewof chart = vegaEmbed(startSpec, {renderer: "svg"})
{
if (playButton) animation.play(".chart-wrapper");
}
animation = gemini.animate(startSpec, endSpec, gemSpec)
gemSpec = ({
timeline: {
sync: [
{component: {axis: "x"}, timing: {duration: 1000}},
{component: {mark: "marks"}, timing: {duration: 1000}}
]
}
})
startSpec = gemini.vl2vg4gemini({
data: { values: [{"Hungry": 50, "Name": "Gemini"}, {"Hungry": 100, "Name": "Cordelia"}] },
mark: "bar",
encoding: {
x: { field: "Hungry", type: "quantitative"},
y: { field: "Name", type: "nominal"}
}
})
endSpec = gemini.vl2vg4gemini({
data: { values: [{"Hungry": 100, "Name": "Gemini"}, {"Hungry": 80, "Name": "Cordelia"}] },
mark: "bar",
encoding: {
x: { field: "Hungry", type: "quantitative"},
y: { field: "Name", type: "nominal"}
}
})
d3 = require('d3@5.14.2')
gemini = require("https://cdn.jsdelivr.net/gh/declann/gemini@1c2e679/gemini.web.js") // pinned
vegaEmbed = require("https://cdn.jsdelivr.net/gh/declann/vega-embed-vl4@main/build/vega-embed.js")
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.
