I map 🗺️ & graph 📈 data 🈸
Published
Edited
Sep 28, 2020
3 forks
1 star
viewof chart = vegaEmbed(startSpec, {renderer: "svg"})
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/uwdata/gemini@v0.1-alpha/gemini.web.js')
vega = require('vega@5.14.0')
vl = require('vega-lite@4.14.1')
vegaEmbed = require('vega-embed@6.11.1')
`Vega versions: vega-embed@${vegaEmbed.version}, vega@${vega.version}, vega-lite@${vl.version}`
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.
