Desigrammer.
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
d3 = require('d3@5')
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).`
fileContents = FileAttachment("Boston@1.csv")
md`Parse the file contents into an array`
housing = d3.csvParse(await fileContents.text(), d3.autoType)
md`Use printTable to look at the first few lines of data`
printTable(housing.slice(0, 10))
vl.markPoint()
.data(housing)
.encode(vl.x().fieldQ('CRIM'), vl.y().fieldQ('Median House Price'))
.render()
scatterPlot = vl
.markPoint()
.data(housing)
.encode(vl.x().fieldQ('CRIM'), vl.y().fieldQ('Median House Price'))
html`<pre>${JSON.stringify(scatterPlot.toJSON(), 0, 2).slice(0, 500)}</pre>`
vl
.markPoint()
.data(housing)
.encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('CRIM'),
vl
.color()
.fieldQ('DIS')
.scale({ scheme: 'greens' })
)
.render()
md`Most of the points are bunched to the right. Left of the plot. What does this mean?`
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()
vl
.markPoint()
.data(housing)
.transform(vl.filter('datum["CHAS"]==0'))
.encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('RM'),
vl
.color("green")
.fieldQ('DIS')
.scale({ scheme: 'greens' })
)
.render()
vl
.markPoint()
.data(housing)
.transform(vl.filter('datum["CHAS"]==1'))
.encode(
vl.y().fieldQ('Median House Price'),
vl.x().fieldQ('RM'),
vl
.color("Blue")
.fieldQ('DIS')
.scale({ scheme: 'blues' })
)
.render()
{
const chas_0 = 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 chas_1 = 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(chas_0, chas_0.markCircle()),
vl.layer(chas_1, chas_1.markCircle())
).render();
}
survey = d3.csvParse(
await FileAttachment("student_background.csv").text(),
d3.autoType
)
printTable(survey.slice(0, 10))
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()
choiceSortOrder = ["no", "no, familiar", "yes, introductory", "yes, advanced"]
vl
.markBar()
.data(survey)
.encode(
vl
.y()
.fieldN('hci')
.sort(choiceSortOrder),
vl
.x()
.count()
.title(null)
)
.render()
{
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();
}
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();
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();
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();
vl.markPoint()
.data(survey)
.encode(
vl.x().fieldQ('hci_ordinal'),
vl.y().fieldQ('javascript_ordinal'),
vl.size().count()
).render()
vl.markPoint()
.data(survey)
.encode(
vl.x().fieldQ('stats_ordinal'),
vl.y().fieldQ('rlanguage_ordinal'),
vl.size().count().legend(null)
).render()
vl.markPoint()
.data(survey)
.encode(
vl.x().fieldQ('ml_ordinal'),
vl.y().fieldQ('python_ordinal'),
vl.size().count().legend(null)
).render()
vl.markPoint()
.data(survey)
.encode(
vl.x().fieldQ('hci_ordinal'),
vl.y().fieldQ('graphics_ordinal'),
vl.size().count().legend(null)
).render()
vl.markPoint()
.data(survey)
.encode(
vl.x().fieldQ('cogsci_ordinal'),
vl.y().fieldQ('hci_ordinal'),
vl.size().count().legend(null)
).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.
