Published
Edited
Aug 16, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chartSplitsByAgeRange = StackedBarChart(splitsByAge, {
x: (d) => d.utterances,
y: (d) => d.locale,
z: (d) => d.ageKey,
xLabel: "# of utterances by age group",
yLabel: "language-locale",
yDomain: d3.groupSort(
splitsByAge,
(D) => d3.sum(D, (d) => d.utterances),
(d) => d.locale
), // sort y by x
zDomain: ages,
colors: d3.schemeTableau10
})
Insert cell
Insert cell
Insert cell
Insert cell
chartSplitsByAge100Percent = StackedBarChart(splitsByAge, {
x: (d) => d.agePercentage,
y: (d) => d.locale,
z: (d) => d.ageKey,
xLabel: "% of utterances by age group",
yLabel: "language-locale",
yDomain: d3.groupSort(
splitsByAge,
(D) => d3.sum(D, (d) => d.utterances),
(d) => d.locale
), // sort y by x
zDomain: ages,
colors: d3.schemeTableau10
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chartSplitsByGender100Percent = StackedBarChart(splitsByGender, {
x: (d) => d.genderPercentage,
y: (d) => d.locale,
z: (d) => d.genderKey,
xLabel: "% of utterances by gender",
yLabel: "language-locale",
yDomain: d3.groupSort(
splitsByGender,
(D) => d3.sum(D, (d) => d.utterances),
(d) => d.locale
), // sort y by x
zDomain: genders,
colors: d3.schemeTableau10
})
Insert cell
Insert cell
Insert cell
Plot.plot({
grid: true,
inset: 10,
width: 1200,
height: 1000,
color: {
legend: true
},
x: { label: "↑ Average utterance duration (secs)" },
y: { label: "locale" },
// facet: {
// data: anscombe,
//x: "series"
//},
marks: [
Plot.frame(),
Plot.dot(localeData, {
x: (d) => d[1].avgDurationSecs,
y: (d) => d[0],

sort: { y: "x", reverse: true }
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
totalHoursValidated = Plot.plot({
grid: true,
width: 1200,
height: 2500,
legend: true,
x: { label: "↑ Hours" },
y: { label: "locale" },
// facet: {
// data: anscombe,
//x: "series"
//},
marks: [
Plot.barX(localeData, {
x: (d) => d[1].totalHrs,
y: (d) => d[0],
sort: { y: "x", reverse: true },
fill: "#00000055"
}),
Plot.barX(localeData, {
x: (d) => d[1].validHrs,
y: (d) => d[0],
sort: { y: "x", reverse: true },
fill: "#000000aa"
}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
totalHoursValidated100Percent = Plot.plot({
grid: true,
width: 1200,
height: 2500,
legend: true,
x: { label: "↑ % of utterances validated" },
y: { label: "locale" },
// facet: {
// data: anscombe,
//x: "series"
//},
marks: [
Plot.barX(localeData, {
x: (d) => d[1].validHrs / d[1].totalHrs,
y: (d) => d[0],
sort: { y: "x", reverse: true },
fill: "#000000aa"
}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
avgClipsPerContributor = Plot.plot({
grid: true,
inset: 10,
width: 1200,
height: 1000,
color: {
legend: true
},
x: { label: "↑ Average number of clips per contributoer" },
y: { label: "locale" },
// facet: {
// data: anscombe,
//x: "series"
//},
marks: [
Plot.frame(),
Plot.dot(localeData, {
x: (d) => parseInt(d[1].clips / d[1].users),
y: (d) => d[0],

sort: { y: "x", reverse: false }
})
]
})
Insert cell
Insert cell
Insert cell
cvdata = FileAttachment("cv-corpus-10.0-2022-07-04.json").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
genders = ["nodata", "male", "female", "other"]
Insert cell
Insert cell
## Imports
Insert cell
Insert cell
Insert cell
Insert cell
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