Mathematical engineer. Software developer at Act Now Coalition.
UK MPs' votes on BrexitW3DT Product-Market Fit Dashboard v1 (IPFS and Filecoin data separate)DashboardN.J. use of force dataDashboardClustergrammer-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
Marathon Training Dashboard
data = parseRows(activities, columnConfig)
.filter((row) => row.type === "Run")
.filter((row) => row.date > new Date("2022-08-01"))
columnConfig = [
{
id: "id",
columnName: "Activity ID",
type: "string"
},
{
id: "date",
columnName: "Activity Date",
type: "date"
},
{ id: "type", columnName: "Activity Type", type: "string" },
{
id: "duration",
columnName: "Elapsed Time",
type: "decimal"
},
{ id: "distance", columnName: "Distance", type: "decimal" },
{ id: "avgSpeed", columnName: "Average Speed", type: "decimal" },
{ id: "avgHeartRate", columnName: "Average Heart Rate", type: "decimal" }
]
function parseRows(list, columnConfig) {
return list.map((row) =>
columnConfig.reduce((acc, col) => {
return { ...acc, [col.id]: parseCell(row[col.columnName], col.type) };
}, {})
);
}
function parseCell(value, type) {
switch (type) {
case "date":
return new Date(value);
case "integer":
return Number.parseInt(value, 10);
case "decimal":
case "float":
return Number.parseFloat(value);
case "string":
default:
return value;
}
}
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.
