Vega-Lite Tutorial 1Lab 2Solutions for: Vega-Lite Assignment:Lab 10: D3 Tutorial #1Lab 11: D3 Tutorial #2: Creating an Arc Diagram with Animated TransitionsLab 12: D3 Practice #3: Interactivity
Lab 3: Practice Vega-Lite Multi-View Charts and Aggregations
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()
}
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.
