Department of Computer Science, Virginia Tech
1+2
5
6
{
//a = "Bye"
let x = 1
x = x+1
return(x+2)
}
a = "Hello" // "Goodbye "
a
//a = "something else"
a + " World" // Reactive
b = c + 1
c = b + 1
c
myfunc = x => x+2
myfunc(1)
[1,2,3]
({a:1, b:2, c:3})
data = FileAttachment("States2010.csv").csv({typed: true})
data.length
data.columns
// header row
data.columns.length
viewof table1 = Inputs.table(data)
// interactively filtered table rows
table1
table1
Type Table, then Shift-Enter. Ctrl-space for more options.
table2
d3 = require("d3")
// Get the first 5 states
data.slice(4, 6)
// Which state is the wealthiest?
d3.max(data, r => r.IncomePerCapita)
data[d3.maxIndex(data, r => r.IncomePerCapita)]
// What is the total population of USA?
d3.sum(data, r => r.Population)
// Extract populations
data.map( (r,i,a) => r.Population)
data.map((r, i, a) => i)
// Find the population change from 2000 to 2010
data.map(r => r.Population - r.Pop2000)
// add new column to table. extra parens are important
data2 = data.map(r => ({...r, PopDelta: r.Population - r.Pop2000}))
// Which states are poor?
data.filter(r => r.IncomePerCapita < 30000)
// always sort a copy of the data
// need a comparison function
[...data].sort((a,b) => a.IncomePerCapita - b.IncomePerCapita)
// GroupBy, bin function
d3.group(data, r => Math.floor(r.IncomePerCapita / 10000))
// RollUp, aggregation function, bin function
d3.rollup(
data,
(g) => d3.mean(g, (r) => r.PercentCollegeGrad),
(r) => Math.floor(r.IncomePerCapita / 10000)
)
// RollUp, aggregation function, bin function
Array.from(d3.rollup(data, g => d3.mean(g, r=>r.PercentCollegeGrad), r => Math.floor(r.IncomePerCapita / 10000)))
alphabet
data
X
IncomePerCapita
Y
PercentCollegeGrad
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.dot(data, { x: "IncomePerCapita", y: "PercentCollegeGrad", tip: true })
]
})
Plot.plot({
marks: [
Plot.barX(data, {y: "Name", x: "IncomePerCapita", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
],
height: 700,
marginLeft: 120,
style: { color: "steelblue" }
})
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.
