Published
Edited
Feb 12, 2020
Fork of Lab 2
Insert cell
Insert cell
Insert cell
import {vl} from '@vega/vega-lite-api'
Insert cell
import {printTable} from '@uwdata/data-utilities'
Insert cell
Insert cell
d3 = require('d3@5')
Insert cell
md`Upload the file using Shift-Command-u which brings up a file selector dialog box. We are using [Boston Housing Data from Kaggle](https://www.kaggle.com/c/boston-housing).`
Insert cell
fileContents = FileAttachment("Boston@1.csv")
Insert cell
md`Parse the file contents into an array`
Insert cell
housing = d3.csvParse(await fileContents.text(), d3.autoType)
Insert cell
md`Use printTable to look at the first few lines of data`
Insert cell
printTable(housing.slice(0, 10))
Insert cell
Insert cell
vl.markPoint()
.data(housing)
.encode(vl.x().fieldQ('CRIM'), vl.y().fieldQ('Median House Price'))
.render()
Insert cell
Insert cell
scatterPlot = vl
.markPoint()
.data(housing)
.encode(vl.x().fieldQ('CRIM'), vl.y().fieldQ('Median House Price'))
Insert cell
Insert cell
html`<pre>${JSON.stringify(scatterPlot.toJSON(), 0, 2).slice(0, 500)}</pre>`
Insert cell
Insert cell
vl
.markPoint()
.data(housing)
.encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('CRIM'),
vl
.color()
.fieldQ('DIS')
.scale({ scheme: 'greens' })
)
.render()
Insert cell
md`Most of the points are bunched to the right. Left of the plot. What does this mean?`
Insert cell
Insert cell
vl
.markPoint()
.data(housing)
.transform(vl.filter('datum["CRIM"]>3'))
.encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('CRIM'),
vl
.color()
.fieldQ('DIS')
.scale({ scheme: 'greens' })
)
.render()
Insert cell
Insert cell
vl.markPoint()
.data(housing)
.encode(vl.x().fieldQ('RM'), vl.y().fieldQ('Median House Price'))
.render()
Insert cell
Insert cell
Insert cell
vl
.markPoint()
.data(housing)
.encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('RM'),
vl
.color()
.fieldQ('DIS')
.scale({ scheme: 'greens' })
)
.render()
Insert cell
Insert cell
Insert cell
vl
.markPoint()
.data(housing)
.transform(vl.filter('datum["CHAS"]==0'))
.encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('RM'),
vl
.color()
.fieldQ('DIS')
.scale({ scheme: 'greens' })
)
.render()
Insert cell
Insert cell
Insert cell
vl
.markPoint()
.data(housing)
.transform(vl.filter('datum["CHAS"]==1'))
.encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('RM'),
vl
.color()
.fieldQ('DIS')
.scale({ scheme: 'blues' })
)
.render()
Insert cell
Insert cell
Insert cell

{
const pt1 = vl.markPoint().data(housing).transform(vl.filter('datum["CHAS"]==1')).encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('RM'),
vl.color().fieldQ('DIS').scale({ scheme: 'blues' })
)
const pt2 = vl.markPoint().data(housing).transform(vl.filter('datum["CHAS"]==0')).encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('RM'),
vl.color().fieldQ('DIS').scale({ scheme: 'greens' })
)
return vl.hconcat(
vl.layer(pt1),
vl.layer(pt2)
).render();
}

Insert cell
Insert cell
Insert cell
Insert cell
survey = d3.csvParse(
await FileAttachment("student_background.csv").text(),
d3.autoType
)
Insert cell
Insert cell
printTable(survey.slice(0, 10))
Insert cell
Insert cell
vl
.markBar()
.data(survey)
.encode(
vl.y().fieldN('hci'),
vl
.x()
.count()
.title(null) // why is this here? what happens if you change it?
)
.render()
Insert cell
Insert cell
choiceSortOrder = ["no", "no, familiar", "yes, introductory", "yes, advanced"]
Insert cell
vl
.markBar()
.data(survey)
.encode(
vl
.y()
.fieldN('hci')
.sort(choiceSortOrder),
vl
.x()
.count()
.title(null)
)
.render()
Insert cell
Insert cell
{
const base = vl
.markBar()
.data(survey)
.encode(
vl
.x()
.count()
.title(null)
)
.width(100);

const hci = base.encode(vl.y().fieldN('hci').sort(choiceSortOrder));
const cogsci = base.encode(vl.y().fieldN('cogsci').sort(choiceSortOrder));
const stats = base.encode(vl.y().fieldN('stats').sort(choiceSortOrder));
const ml = base.encode(vl.y().fieldN('ml').sort(choiceSortOrder));

return vl
.hconcat(vl.layer(hci), vl.layer(cogsci), vl.layer(stats), vl.layer(ml))
.render();
}
Insert cell
Insert cell
vl.markBar()
.data(survey)
.encode(
vl.x().count().title(null),
vl.y().fieldN(vl.repeat('column')).sort(choiceSortOrder),
)
.width(100)
.repeat({column: ['hci', 'cogsci', 'stats', 'ml']})
.render();
Insert cell
Insert cell
vl.markBar()
.data(survey)
.encode(
vl.x().count().title(null).scale({domain: [0,17]}), // make all x axes the same length
vl.y().fieldN(vl.repeat('column')).sort(choiceSortOrder)
.axis({ titleAngle: 0, titleX: 0, titleY: 0}), // rotate the name of the axis to appear on topo
vl.color().fieldN(vl.repeat('column')).legend(null)
)
.width(100)
.repeat({column: ['hci', 'cogsci', 'stats', 'ml']})
.render();
Insert cell
Insert cell
Insert cell
vl
.markBar()
.data(survey)
.encode(
vl.y().fieldN('java'),
vl
.x()
.count()
.title(null) // why is this here? what happens if you change it?
)
.render()
Insert cell
nSortOrder = ["no", "no, familiar", "yes, introductory", "yes, advanced"]
Insert cell
vl
.markBar()
.data(survey)
.encode(
vl
.y()
.fieldN('java')
.sort(nSortOrder),
vl
.x()
.count()
.title(null)
)
.render()
Insert cell
{
const base = vl
.markBar()
.data(survey)
.encode(
vl
.x()
.count()
.title(null)
)
.width(100);

const python = base.encode(vl.y().fieldN('python').sort(nSortOrder));
const javascript = base.encode(vl.y().fieldN('javascript').sort(nSortOrder));
const java = base.encode(vl.y().fieldN('java').sort(nSortOrder));
const rlanguage = base.encode(vl.y().fieldN('rlanguage').sort(nSortOrder));

return vl
.hconcat(vl.layer(python), vl.layer(javascript), vl.layer(java), vl.layer(rlanguage))
.render();
}
Insert cell
vl.markBar()
.data(survey)
.encode(
vl.x().count().title(null),
vl.y().fieldN(vl.repeat('column')).sort(nSortOrder),
)
.width(100)
.repeat({column: ['python', 'javascript', 'java', 'rlanguage']})
.render();
Insert cell
vl.markBar()
.data(survey)
.encode(
vl.x().count().title(null).scale({domain: [0,17]}), // make all x axes the same length
vl.y().fieldN(vl.repeat('column')).sort(choiceSortOrder)
.axis({ titleAngle: 0, titleX: 0, titleY: 0}), // rotate the name of the axis to appear on topo
vl.color().fieldN(vl.repeat('column')).legend(null)
)
.width(100)
.repeat({column: ['python', 'javascript', 'java', 'rlanguage']})
.render();
Insert cell
Insert cell
vl.markPoint()
.data(survey)
.encode(
vl.x().fieldQ('hci_ordinal'),
vl.y().fieldQ('javascript_ordinal'),
vl.size().count()
).render()
Insert cell
vl.markPoint()
.data(survey)
.encode(
vl.x().fieldQ('stats_ordinal'),
vl.y().fieldQ('rlanguage_ordinal'),
vl.size().count().legend(null)
).render()
Insert cell
vl.markPoint()
.data(survey)
.encode(
vl.x().fieldQ('ml_ordinal'),
vl.y().fieldQ('python_ordinal'),
vl.size().count().legend(null)
).render()
Insert cell
Insert cell

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.
Learn more