md`First, do some standard imports, and attach some sample data about Olympic medals.`
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
d3 = require('d3')
stats = d3.csvParse(await FileAttachment("OlympicMedals.csv").text(), d3.autoType)
printTable(stats.slice(0,5))
md`## The importance of aggregator functions`
md`Let's first plot the number of medals earned overall per year. The code and chart below is straight-forward and looks right at first glance, but it has an error. Can you spot it?`
vl.markBar()
.data(stats)
.encode(
vl.y().fieldO('Year'),
vl.x().fieldQ('Total'),
)
.render()
md`The problem is that we need to tell Vega-Lite how to aggregate the data across years and across sports. So what is it actually plotting here? Does the code and chart below give you a clue?`
vl.markBar()
.data(stats)
.encode(
vl.y().fieldO('Year'),
vl.x().fieldQ('Total'),
vl.color().fieldQ('Total')
)
.render()
md`When we added color, this broke out the medals by totals. What is going on is that the totals for each sport are being laid down one on top of the other for each year. The following graph should also help clarify this.`
vl.markBar()
.data(stats)
.encode(
vl.y().fieldO('Year'),
vl.x().fieldQ('Total'),
vl.color().fieldN('Sport')
)
.render()
vl.markBar()
.data(stats)
.encode(
vl.y().fieldO('Year'),
vl.x().sum('Total')
)
.render()
vl.markBar()
.data(stats)
.encode(
vl.y().fieldO('Year'),
vl.x().sum('Total'),
vl.color().fieldN('Sport'),
vl.column().fieldN('Sport')
)
.render()
vl.markBar()
.data(stats)
.encode(
vl.y().fieldO('Year'),
vl.x().average('Total'),
vl.color().fieldN('Sport'),
vl.column().fieldN('Sport')
)
.render()
md`That is pretty neat! Can you figure out how to add in a call to *row* to also break this out by Country?`
// your code here
{
const basic1 = vl.markBar()
.data(stats)
.encode(
vl.y().fieldO('Year'),
vl.x().average('Total')
);
const basic2 = vl.markRule({stroke: 'firebrick'})
.data(stats)
.encode(
vl.x().average('Total')
);
return vl.layer(basic1, basic2).render();
}
{
const basic1 = vl.markBar()
.data(stats)
.encode(
vl.y().fieldO('Year'),
vl.x().average('Total'),
vl.color().fieldN('Sport'),
vl.column().fieldN('Sport')
)
const basic2 = vl.markRule({stroke: 'firebrick'})
.data(stats)
.encode(
vl.x().average('Total')
);
return vl.layer(basic1, basic2).render();
}
vl.markBar()
.encode(
vl.y().fieldO('Year'),
vl.x().average('Total'),
vl.color().fieldN('Sport')
)
.facet({column: vl.field('Sport')})
.data(stats)
.render();
{
const base1 = vl.markBar()
.encode(
vl.y().fieldO('Year'),
vl.x().average('Total'),
vl.color().fieldN('Sport')
)
.facet({column: vl.field('Sport')})
.data(stats);
const base2 = vl.markRule({stroke: 'firebrick'})
.data(stats)
.encode(
vl.x().average('Total')
);
return vl.layer(base1, base2).render()
}
{
const base1 = vl.markBar()
.encode(
vl.y().fieldO('Year'),
vl.x().average('Total'),
vl.color().fieldN('Sport')
);
const base2 = vl.markRule({stroke: 'firebrick'})
.encode(
vl.x().average('Total')
);
return vl.layer(base1, base2)
.facet({column: vl.fieldN('Sport')})
.data(stats)
.render()
}
{
const base1 = vl.markBar()
.encode(
vl.y().fieldO('Year'),
vl.x().average('Total'),
vl.color().fieldN('Sport')
);
const base2 = vl.markRule({stroke: 'firebrick'})
.encode(
vl.x().average('Total')
);
return vl.layer(base1, base2)
.facet({column: vl.column('Sport')
.header({labelFontStyle: "bold", labelFontSize: 20})
})
.data(stats)
.render()
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.