Public
Edited
Feb 8, 2023
Comments locked
3 stars
As you may have noticed, this reading is posted on Observable, an online collaborative "live" notebook. If you've used Jupyter Notebook or Google Colab, you will find this very familiar.
This means that everything in this document is actually some kind of code, which you can edit.
For example, edit the text in this cell and click the play button on the right hand side, or press shift + Enter to re-execute it and see your edits reflected above.
a = 5
addTwo = x => x+2
addTwo(a)
data = (await require('vega-datasets'))['gapminder.json']()
md`${data.length} rows, ${Object.keys(data[0]).length} columns! (This is a live data value by the way, see below)`
printTable(data.slice(0, 10))
data2000 = data.filter(d => d.year === 2000)
printTable(data2000.slice(0, 10))
vegalite({
data: {values: data2000},
mark: 'point'
})
vegalite({
data: {values: data2000},
mark: 'point',
encoding: {
x: {field: 'fertility'}
}
})
vegalite({
data: {values: data2000},
mark: 'point',
encoding: {
x: {field: 'fertility', type: 'quantitative'}
}
})
// Add your code here to produce the visualization above
vegalite({
data: {values: data2000},
mark: 'point', // Find available mark types here: https://vega.github.io/vega-lite/docs/mark.html
encoding: {
// Find available encoding channels here: https://vega.github.io/vega-lite/docs/encoding.html
}
})
vegalite({
data: {values: data2000},
mark: 'bar',
encoding: {
x: {field: 'cluster', type: 'nominal'},
y: {aggregate: 'count'}
}
})
vegalite({
data: {values: data2000},
mark: 'bar',
encoding: {
x: {field: 'life_expect', type: 'quantitative', bin: true},
y: {aggregate: 'count'}
}
})
Your answer here.
// Code for Visualization 1:
// Code for Visualization 2:
// Code for Visualization 3:
// Code to recreate the above visualization:
vegalite({
data: {values: data},
mark: 'point',
// Add your encodings here
})
// Code to recreate the above visualization:
vegalite({
data: {values: data},
mark: 'point',
// Add your encodings here
})
// Code to recreate the above visualization:
vegalite({
data: {values: data},
mark: 'bar',
// Add your encodings here
})
// Code for bi-variate visualization 1:
// Code for bi-variate visualization 2:
// Code for bi-variate visualization 3:
// Code to recreate the visualization above:
vegalite({
data: {values: data2000},
mark: 'circle', // Circles are just filled points
// Add your encodings here
})
// Code to recreate the visualization above:
vegalite({
data: {values: data2000},
transform: [
// Add code to filter
],
mark: 'line', // Circles are just filled points
// Add your encodings here
})
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.
