Public
Edited
Feb 26, 2024
Insert cell
Insert cell
Plot.barY(uva_bball_allyears, {
x: (d,i) => i,
y: d => d.UVA_score - d.Opponent_score
}).plot()
Insert cell
Plot.plot({
width: 1000,
height: 200,
x: {axis: null, label: null},
y: {domain:[-100,100], axis: null, label: null},
marks:[
Plot.ruleX(uva_bball_allyears, {
x: (d,i) => i,
y: d => d.UVA_score - d.Opponent_score,
stroke: d => {
if (d.Location == "Charlottesville, Va.") {return "blue"} else {return "orange"}
},
dx: 5,
//inset: 0.5
})
]
})
Insert cell
UVA_bball_allyears.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
uva_bball_allyears
X
Date
Y
UVA_score
Color
Size
Facet X
Facet Y
Mark
rule
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
width: 1200,
height: 200,
y: {domain: [-100,100]},
marks: [
//Plot.ruleY([0]),
Plot.ruleX(uva_bball_allyears, { x: "Date", y: d=>d.UVA_score-d.Opponent_score, tip: true })
]
})
Insert cell
Insert cell
Insert cell
viz = {
let drawArea = d3.select(svgObject);

let dataGraphics = drawArea.selectAll("rect")
.data(myData)
.join("rect")
.attr("x", d => d.column1)
.attr("y", d => d.column2)
.attr("width", d => d.column3)
.attr("height", d => d.column4)
.style("fill", d => d.column5);
}
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