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
})
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.