The avatar for @sethvincent
Seth Vincent
🌎🍕🕹🌈 making news apps at nj advance media. he/him.
Published
Dashboards
Edited
Mar 19, 2022
1 fork
1 star
Dashboards
UK MPs' votes on BrexitW3DT Product-Market Fit Dashboard v1 (IPFS and Filecoin data separate)Dashboard
N.J. use of force data
DashboardMarathon Training DashboardClustergrammer-GLInteractive Plot DashboardIn-Product Dashboard for your userCOVID-19 Live DashboardCricket DashboardDashboard with Brushing and Linking Example in Vega-LiteDashboardDashboard with bertin 🌍 & plot 📊Activity Tracking DashboardAWS HTTP Status Dashboard10 minutes dashboard: vegaSync guideAndy's Walgreens COVID-19 Tracker TrackerSVG DataGrid with many features and a live COVID Dashboard demo
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
officersNoReports = totalOfficers - officerCount
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
officerReportsIncludeNoNameData = {
const allResults = [...officerReportsRawData]
const oneOrTwoReports = allResults.splice(0, 2)
const threeReportsOrMore = allResults

const noName = allResults.pop()
const one = oneOrTwoReports[0].total_reports
const two = oneOrTwoReports[1].total_reports
const threeOrMore = threeReportsOrMore.reduce((int, item) => {
int += item.total_reports
return int
}, 0)

return [
{ value: one, label:'One report' },
{ value: two, label:'Two reports' },
{ value: threeOrMore, label:'Three or more reports' },
{ value: noName.total_reports, label:'Reports without officer name'}
]
}
Insert cell
totalOfficersReportsSubmitted = {
return officerReportsRawData.reduce((int, item) => {
console.log('item', item)
int += item.number_of_officers
return int
}, 0)
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof incidentsDonut = createDonut(incidentsData, {
labelKey: 'subject_race',
dataKey: 'incident_count',
width: 450
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof treatmentsBar = createHorizontalBar(treatmentsData, {
labelKey: 'subject_race',
dataKey: 'incident_count'
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof dischargeBar = createHorizontalBar(dischargeData, {
dataKey: 'incident_count',
labelKey: 'subject_race',
height: 100,
marginLeft: 55
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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