Crafting Visual Stories with Data.
Published
Edited
Mar 12, 2021
1 fork
Table(gapminder)
Table(gapminder2007)
vegaEmbed({
width: 500,
height: 100,
data: { values: gapminder2007 },
mark: "tick",
encoding: {
x: { field: "LifeExpectancy", type: "Q" },
size: { value: 100 },
opacity: { value: 0.5 }
}
})
vegaEmbed({
width: 500,
height: 100,
data: { values: gapminder2007 },
mark: "tick",
encoding: {
x: { field: "Population", type: "Q" },
size: { value: 100 },
opacity: { value: 0.5 }
}
})
vegaEmbed({
width: 500,
height: 100,
data: { values: gapminder2007 },
mark: "tick",
encoding: {
x: { field: "Population", type: "Q", scale: { type: "log" } },
size: { value: 100 },
opacity: { value: 0.5 }
}
})
vegaEmbed({
width: 500,
height: 100,
data: { values: gapminder2007 },
mark: "circle",
encoding: {
x: { field: "Population", type: "Q", aggregate: "mean" },
size: { value: 100 },
opacity: { value: 0.5 }
}
})
vegaEmbed({
width: 500,
height: 300,
data: { values: gapminder2007 },
mark: "bar",
encoding: {
x: { field: "LifeExpectancy", type: "Q", bin: { maxbins: 20 } },
y: { aggregate: "count" }
}
})
vegaEmbed({
width: 500,
height: 300,
data: { values: gapminder2007 },
transform: [{ density: "LifeExpectancy", bandwidth: 1 }],
mark: "area",
encoding: {
x: { field: "value", type: "Q" },
y: { field: "density", type: "Q" }
}
})
vegaEmbed({
width: 500,
height: 50,
data: { values: gapminder2007 },
mark: "bar",
encoding: {
x: { field: "LifeExpectancy", type: "Q", bin: { maxbins: 10 } },
y: { aggregate: "count" },
color: { field: "Continent" },
row: { field: "Continent" }
}
})
vegaEmbed({
width: 500,
height: 20,
data: { values: gapminder2007 },
mark: "circle",
encoding: {
x: { field: "Population", type: "Q", scale: { type: "log" } },
color: { field: "Continent", type: "N" },
size: { value: 20 },
opacity: { value: 0.5 },
row: { field: "Continent", type: "N" }
}
})
gapminder = d3.csv(dataUrl, d3.autoType)
gapminder2007 = gapminder.filter(d => d.Year === 2007)
d3 = require("d3@6")
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.
