Former physicist turned programmer with research experience building complex computational models for physical systems.
Published
Edited
Mar 29, 2022
1 fork
22 stars
data = (await require('vega-datasets@2'))
usemployment = data['us-employment.csv']()
Plot.barY(usemployment, {x:'month', y:'nonfarm_change'}).plot()
Plot.barY(usemployment, {x:'month', y:'nonfarm_change'}).plot({
x: {
ticks: d3.utcYear.range(...d3.extent(usemployment, (d) => d.month)),
tickFormat: "%Y"
}
})
Plot.areaY(usemployment,
{x:'month', y:'nonfarm_change', curve:'step'}).plot()
Plot.rectY(usemployment,
Plot.binX({ y: "sum" },
{ x: "month", y: "nonfarm_change", thresholds: d3.utcMonth, inset: 0 })
).plot()
Plot.plot({
color: {
domain: ["positive", "negative"],
range: ["steelblue", "orange"]
},
marks: [
Plot.areaY(usemployment, {
x:'month',
y:'nonfarm_change',
curve:'step',
fill: d => d.nonfarm_change > 0 ? "positive" : "negative"})
]
})
Plot.plot({
color: {
domain: ["positive", "negative"],
range: ["steelblue", "orange"]
},
marks: [
Plot.rectY(usemployment, Plot.binX({ y: "sum" }, { x: "month", y: "nonfarm_change", thresholds: d3.utcMonth, inset: 0, fill: d => d.nonfarm_change > 0 ? "positive" : "negative"}))
]
})
Plot.plot({
color: {
domain: ["positive", "negative"],
range: ["steelblue", "orange"]
},
marks: [
Plot.barY(usemployment, {
x:'month',
y:'nonfarm_change',
fill: d => d.nonfarm_change > 0 ? "positive" : "negative"
}),
Plot.ruleY([0])
],
x: {
ticks: d3.utcYear.range(...d3.extent(usemployment, (d) => d.month)),
tickFormat: "%Y"
}
})
Plot.plot({
color: {
domain: ["positive", "negative"],
range: ["steelblue", "orange"]
},
marks: [
Plot.barY(usemployment, {
x:'month',
y:'nonfarm_change',
fill: d => d.nonfarm_change > 0 ? "positive" : "negative",
stroke: d => d.nonfarm_change > 0 ? "positive" : "negative"
}),
Plot.ruleY([0])
],
x: {
ticks: d3.utcYear.range(...d3.extent(usemployment, (d) => d.month)),
tickFormat: "%Y"
}
})
barley = data["barley.json"]()
Plot.plot({
facet: {
data: barley,
x: "site"
},
marks : [
Plot.barY(barley, Plot.groupX({y: "mean"}, {x: "year", y: "yield", fill:"year"}))
]
})
barley_converted = (await data["barley.json"]()).map(d=>({
year: d['year'].toString(),
yield: d['yield'],
site: d['site']
}))
Plot.plot({
facet: {
data: barley_converted,
x: "site"
},
color:{legend:true},
marks : [
Plot.barY(barley_converted, Plot.groupX({y: "mean"}, {x: "year", y: "yield", fill:"year"}))
]
})
iowa = data['iowa-electricity.csv']()
Plot.plot({
y: {
grid: true
},
color:{legend:true},
marks: [
Plot.barY(iowa, {x: "year", y2: "net_generation", fill: "source", mixBlendMode: "normal", fillOpacity:0.7}),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
ticks: d3.timeTicks(...d3.extent(iowa, (d) => d.year), d3.utcYear),
tickFormat: "%Y"
},
y: {
grid: true
},
color:{legend:true},
marks: [
Plot.barY(iowa, {x: "year", y2: "net_generation", fill: "source", mixBlendMode: "normal", fillOpacity:0.7}),
Plot.ruleY([0])
]
})
Plot.plot({
marginLeft: 110,
facet:{
data: barley,
x: "year",
},
color:{legend:true},
marks: [
Plot.barX(barley, {x:"yield", y:"variety", fill:"site", order:"site", reverse:'true'})
]
})
stocks = (await data['stocks.csv']()).map(d=>({
date: new Date(d['date']),
price: +d.price,
symbol: d.symbol
}))
Plot.plot({
color:{legend:true},
marks:[
Plot.line(stocks, {x:'date', y:'price', stroke:'symbol'})
]
})
google = stocks.filter(d=>d.symbol==='GOOG')
Plot.plot({
marks:[
Plot.line(google, {x:'date', y:'price', curve:'step', stroke:'steelblue', strokeWidth:2}),
Plot.areaY(google, {x:'date', y:'price', curve:'step', fill:'steelblue', fillOpacity:0.3}),
]
})
Plot.plot({
width:180,
y:{inset:10},
color:{legend:true},
marks : [
Plot.lineY(barley_converted, Plot.groupX({y: "median"}, {x: "year", y: "yield", stroke:"site"})),
Plot.dotY(barley_converted, Plot.groupX({y: "median"}, {x: "year", y: "yield", fill:"site"}))
]
})
welders = (await data['jobs.json']()).filter(d=>d.job==='Welder').map(d=>({
date: new Date(d.year+'-01-01'), perc:+d.perc, sex:d.sex
}))
Plot.plot({
inset:20,
y:{
tickFormat: d3.format(".1%"),
grid:true
},
color:{legend:true},
marks:[
Plot.ruleY([0]),
Plot.line(welders, {x:"date", y:"perc", stroke:'sex', strokeWidth:3})
]
})
Plot.plot({
color:{legend:true},
marks:[
Plot.areaY(iowa, Plot.stackY({
x:'year',
y:'net_generation',
z:'source',
fill:'source',
offset: "expand",
reverse:true
}))
]
})
Plot.plot({
marginLeft:50,
color:{legend:true},
marks: [
Plot.areaY(iowa, {
x: "year", y2: "net_generation",
fill: "source", mixBlendMode: "normal", fillOpacity:0.3}),
Plot.ruleY([0])
]
})
Plot.plot({
grid:true,
facet:{
data:iowa,
y:'source',
marginRight:100,
marginLeft:20
},
color:{legend:true},
marks: [
Plot.areaY(iowa, {
x: "year", y2: "net_generation",
fill: "source"}),
Plot.ruleY([0])
]
})
unemployment = (await data['unemployment-across-industries.json']()).map(d=>({
date: new Date(d.date),
count: d.count,
series: d.series
}))
Plot.plot({
x: {
grid: true,
},
color:{legend:true},
marks: [
Plot.areaY(unemployment, Plot.stackY({offset: "silhouette", x: "date", y: "count", fill: "series"}))
]
})
cars = data['cars.json']()
Plot.plot({
inset:20,
color:{legend:true},
marks:[
Plot.dot(cars, {
x:'Horsepower',
y:'Miles_per_Gallon',
fill:'Origin',
r:10, stroke:'black', strokeWidth:1
})
]
})
commits = (await data['github.csv']()).map(d=>({
time: new Date(d.time), count:+d.count
}))
Plot.plot({
x: {
inset: 10,
ticks: 24
},
y: {
type: "point",
tickFormat: Plot.formatWeekday()
},
marks: [
Plot.dot(commits, Plot.group({r: "sum", title: "sum"}, {
y: d => d.time.getDay(),
x: d => d.time.getHours(),
r: "count",
fill: "steelblue"
}))
]
})
seattle_weather = data['seattle-weather.csv']()
Plot.plot({
grid:true,
marks:[
Plot.dot(seattle_weather, {x: 'date', y:'temp_max', stroke:'steelblue'}),
Plot.line(seattle_weather, Plot.windowY({x: "date", y: "temp_max", k: 15, stroke: "red", strokeWidth:3}))
]
})
movies = (await data['movies.json']()).map(d=>({
'Major Genre':String(d['Major Genre']).split('/')[0],
'IMDB Rating':d['IMDB Rating']
}))
Plot.plot({
width:width,
x:{
axis:false
},
facet:{
data:movies,
x: 'Major Genre',
},
marks:[
Plot.dot(movies, {
y:'IMDB Rating',
x:d=>Math.sqrt(-2*Math.log(Math.random()))*Math.cos(2*Math.PI*Math.random()),
fill:'Major Genre'})
]
})
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.
