d3 = require("d3@5")
data = d3.csv("https://www.sfu.ca/~lha54/exonerees.csv", d3.autoType)
md` *Challenges*
The first challenge we faced was figuring out how to import our dataset into Observable. We hosted the data we found on our personal SFU webspace, but turns out, it needed to be https and not http for the link to be considered.`
minYear = d3.min(data, d => d.Convicted)
maxYear = d3.max(data, d => d.Convicted)
md` data.reduce() accepts two fields. The first one we defined as sum, which informs the function to start adding up the values it encounters. d.Age lets the function know which value we want to sum up.`
sumofAge = data.reduce((sum, d) => sum + (d.Age), 0)
md` Similar to the sum function, reduce(count, d) counts the number of a certain type of variable, rather than the amount of the variable on top of the previous.`
countofFemales = data.filter(d => d.Sex === "Female").reduce((count, d) => count + 1, 0)
md` *Challenges*
When trying to count the number of females in the list of exonerees, we first tried to use the nesting and rollup method. This provided a count of both females and males in an array. So, we tried again to get just the number of females in the dataset.`
meanYear = d3.mean(data, d => d.Exonerated)
sdYear = d3.deviation(data, d => d.Exonerated)
medYear = d3.median(data, d => d.Exonerated)
sortByYears = d3.nest()
.key(d => d.Exonerated)
.rollup(v => v.length)
.object(data)
import {vl} from '@vega/vega-lite-api'
vl.markBar()
.data(data)
.encode(
vl.x().fieldQ('Age').bin({maxbins: 20}),
vl.y().count()
)
.render()
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"}
}
})
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"}
}
})
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x:{field: "Sex", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"},
}
})
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x:{field: "State", type: "nominal"},
y:{aggregate: "count", field: "*", type: "quantitative"},
}
})
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"}
}
})
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.
