md`# Exonerees`
d3 = require("d3@5")
data = d3.csv("https://www.sfu.ca/~lha54/exonerees.csv", d3.autoType)
dataMinAge = d3.min(data, d => d.Age)
data.filter(d => d.data = "Female").reduce((count, d) => count + 1, 0)
import {vl} from '@vega/vega-lite-api'
md` ## Age Range of Exonerees`
vl.markBar()
.data(data)
.encode(
vl.x().fieldQ('Age').bin({maxbins: 20}),
vl.y().count()
)
.render()
md` ## Age Range of Exonerees in Relation to Race `
VegaLite = require("vega-embed@5")
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x:{bin: true, field: "Age", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"},
color: {field: "Race", type: "nominal"}
}
})
md` ## Count of Exonerees per Race`
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
y:{field: "Race", type: "nominal"},
x:{aggregate: "count", field: "*", type: "quantitative"},
color:{field: "Race", type: "nominal"}
}
})
VegaLite({
data: {values: data},
mark: {type: "line"},
encoding: {
x: {field: "Age", type: "quantitative"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {field: "Race", type: "nominal"}
}
})
md` ## Gender Count`
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x:{field: "Sex", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"},
}
})
md` ## Count of Exonerees per State`
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x:{field: "State", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"},
}
})
md `## Convicted Crimes of Exonerees`
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x:{field: "Worst Crime Display", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"},
}
})
md` ## Convicted Crime of Exonerees`
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x:{field: "Worst Crime Display", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"},
}
})
md` ## Exonerees Cleared through DNA`
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x:{bin: true, field: "Age", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"},
color:{field: "DNA", type: "nominal"}
}
})
md` ## References`
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.
