Public
Edited
Jun 15, 2023
data = read("https://docs.google.com/spreadsheets/d/1i9qlua8afjJRmwwtkTfD8p5ole7im87NckpmOJFgZHg/edit#gid=1171100423", "output1")
import {aq, op} from "@uwdata/arquero"
folded = aq.from(data).fold(aq.not("year", "")).objects()
refugeePopulationByOriginYear = folded.map(m => ({
year: new Date(m.year),
origin: m.key.replace("SUM of ",""),
population: +m.value
}))
refugeePopulationByOriginYear
X
year
Y
population
Color
origin
Size
—
Facet X
—
Facet Y
—
Mark
area
Type Chart, then Shift-Enter. Ctrl-space for more options.
refugeePopulationByOriginYear
X
year
Y
population
Color
origin
Size
population
Facet X
—
Facet Y
origin
Mark
area
Type Chart, then Shift-Enter. Ctrl-space for more options.
import {AreaChartWithDifferentFacetHeight} from "@angiehjort/area-chart-with-different-facet-height"
AreaChartWithDifferentFacetHeight(refugeePopulationByOriginYear,{
x: d => d.year,
y: d => d.population,
z: d => d.origin,
padding: 20,
marginBottom: 30,
curve: d3.curveBasis,
width: width,
height: 1600,
strokeColor: "#fff"
})
import {HorizonChart} from "@angiehjort/horizon-chart"
chart = HorizonChart(refugeePopulationByOriginYear, {
x: d => d.year,
y: d => d.population,
z: d => d.origin,
marginTop: 25,
bands,
width,
size: 30,
curve: d3.curveBasis,
scheme,
bottomLineColor: "#444"
})
width = 1000;
html`
<style type="text/css">
.horizon text {
font-size: 16px
}
</style>
`
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.
