The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Sep 21, 2021
25 forks
Importers
32 stars
Job Skills Chord DiagramCareer Cluster - Zoomable Circle PackingNumber of Data Scientist's Skills Over TimeSalary Survey US MapTeam groupingTrending Job MarketsMT Dept. Labor & Industry job growth projections, 2018-2028SF Bay Area Job Density45 Days Human Observations for Investment Banking DepartmentDepartment Wise Human Risk Observation
Hiring Timeline
name = "New hire"
emoji = "👤"
salary = 70000
data = (await FileAttachment("payroll.csv").csv()).map(autoTypeExcel)
hiring
domain = [new Date(Date.UTC(2021, 0, 1)), new Date(Date.UTC(2022, 0, 1))]
asOf = new Date(Date.UTC(2021, 4, 25))
payroll = new CashFlow(
month => -d3.sum(hiring.map(amortizedSalary(month))),
{label: "Payroll", domain}
)
amortizedSalary = month => ({date, salary}) => (1 - monthFrac(month, date)) * (salary / 12)
monthFrac = (month, date) => date < month ? 0
: date > d3.utcMonth.offset(month, 1) ? 1
: d3.utcDay.count(month, date)
/ d3.utcDay.count(month, d3.utcMonth.offset(month, 1))
newItem = d => ({salary, name, emoji, ...d})
enterItem = g => g.append("g")
.attr("text-anchor", "middle")
.call(g => g.append("text")
.attr("font-size", "2em")
.attr("y", "-0.1em")
.text(d => d.emoji))
.call(g => g.append("text")
.attr("font-size", "10px")
.attr("font-family", "sans-serif")
.attr("y", "-3.75em")
.text(d => d.name))
import {MultidragAxis} with {domain, newItem, enterItem} from "@observablehq/multidrag-axis"
import {CashFlow, autoTypeExcel, dateFormat} from "@observablehq/cash-flow"
import {Table} from "@observablehq/table-validator"
import {CSVText} from "@tophtucker/structured-text-inputs"
import {set} from "@observablehq/synchronized-inputs"
import {toc} from "@observablehq/templates-table-of-instructions"
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.
