31:T500,instructions = md`--- ## How to show your current payroll ### 1. Fork this template Your changes will not be saved until you fork. ### 2. Upload a CSV of salaries Replace \`hiring.csv\` using the File Attachment icon.`32:[{"id":"13da6ce89366d90aebc1d43a2a6ab58043b48d3093c74aa8a746e5fa179c4b5d414f35a7f16bf1a9a25b772ef2e3dc52c545e85f3109372920416ad9d356b3ca","href":"https://static.observableusercontent.com/files/13da6ce89366d90aebc1d43a2a6ab58043b48d3093c74aa8a746e5fa179c4b5d414f35a7f16bf1a9a25b772ef2e3dc52c545e85f3109372920416ad9d356b3ca","name":"payroll.csv","type":"text/csv","lastModified":1621915736036.822,"size":448}] 2f:{"title":"Hiring Timeline","cells":[{"id":0,"value":"md`# Hiring Timeline\n\n${toc(instructions)}\n\nQuick: you have one employee paid $50k, will hire another at $70k next month, and one more at $100k in December. How much will you spend all year? What if you delay hiring? What if you add one more person? This template helps you quickly explore different scenarios, and see how it all adds up.\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`

\n Total payroll: ${d3.format(\"$,r\")(Math.abs(payroll.cum.slice(-1)[0].value))}\n

${domain.map(d3.utcFormat(\"%B %d, %Y\")).join(\" – \")}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof hiring = MultidragAxis(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"Plot.plot({\n width,\n height: width / 3,\n x: {tickFormat: dateFormat, label: null},\n y: {tickFormat: d3.format(\"$\"), label: \"Payroll / mo. (k)\", transform: d => d / 1000, reverse: true},\n color: {\n range: [\"#b44646\", \"steelblue\"],\n domain: [-1e-6, 1e-6],\n clamp: true\n },\n marks: [\n Plot.barY(payroll.diff.filter(({date}) => date <= asOf), {x: \"date\", y: \"value\", fill: \"value\"}),\n Plot.barY(payroll.diff.filter(({date}) => date > asOf), {x: \"date\", y: \"value\", stroke: \"black\"}),\n Plot.ruleY([0])\n ],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"summary = md`The company has hired ${hiring.filter(({date}) => date < asOf && date > d3.utcYear.floor(asOf)).length} people so far this year and plans to hire ${hiring.filter(({date}) => date > asOf && date < d3.utcYear.ceil(asOf)).length} more, increasing overall payroll expenses ${(100 * (payroll.diff.slice(-1)[0].value - payroll.diff[0].value) / payroll.diff[0].value).toFixed(0)}% year over year to $${d3.format(\".3s\")(Math.abs(payroll.diff.slice(-1)[0].value))} per month. The company expects to spend a total of $${d3.format(\".3s\")(Math.abs(payroll.cum.slice(-1)[0].value))} on payroll this year.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`Configure the salary, name, and appearance of a new hire added to the timeline:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"name = \"New hire\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"emoji = \"👤\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"salary = 70000","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = (await FileAttachment(\"payroll.csv\").csv()).map(autoTypeExcel)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"Table(data, {columnRules: {\n \"id\": d => Boolean(d) || \"each row needs a unique id\",\n \"date\": d => d instanceof Date || \"must be a date like YYYY-MM-DD\",\n \"salary\": d => typeof d === \"number\" || d === null || \"must be a number without dollar signs or commas\",\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`The template expects four columns (though it’s fine if more are present): a unique _id_, a _date_ representing the employee’s start date (formatted like YYYY-MM-DD or M/D/YY), an annual _salary_ (formatted as a number without commas or dollar sign), and an optional _name_.\n\nDownload the modified data by selecting “Download CSV” from the cell menu for the cell below. To save any changes, you must re-upload this CSV as the file attachment above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"hiring","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`Configure the time period shown on the timeline:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"domain = [new Date(Date.UTC(2021, 0, 1)), new Date(Date.UTC(2022, 0, 1))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"asOf = new Date(Date.UTC(2021, 4, 25))","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`---\n## Appendix\nThis combines two components: a MultidragAxis to drag the heads around, which returns an array of start dates and salaries; and a CashFlow to turn that into a series of monthly expenses.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"payroll = new CashFlow(\n month => -d3.sum(hiring.map(amortizedSalary(month))),\n {label: \"Payroll\", domain}\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`We amortize the salary by the fraction of the month that has passed on the start date.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"amortizedSalary = month => ({date, salary}) => (1 - monthFrac(month, date)) * (salary / 12)","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"monthFrac = (month, date) => date < month ? 0 \n : date > d3.utcMonth.offset(month, 1) ? 1\n : d3.utcDay.count(month, date)\n / d3.utcDay.count(month, d3.utcMonth.offset(month, 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`MultidragAxis lets you specify a constructor for new items; it’s called with an object that has an index and the value clicked on the axis, which here represents the start date; this also sets their salary to the default \\`salary\\` specified under Data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"newItem = d => ({salary, name, emoji, ...d})","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"enterItem = g => g.append(\"g\")\n .attr(\"text-anchor\", \"middle\")\n .call(g => g.append(\"text\")\n .attr(\"font-size\", \"2em\")\n .attr(\"y\", \"-0.1em\")\n .text(d => d.emoji))\n .call(g => g.append(\"text\")\n .attr(\"font-size\", \"10px\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"y\", \"-3.75em\")\n .text(d => d.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"md`We import from several notebooks and a few NPM libraries.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {MultidragAxis} with {domain, newItem, enterItem} from \"@observablehq/multidrag-axis\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {CashFlow, autoTypeExcel, dateFormat} from \"@observablehq/cash-flow\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"import {Table} from \"@observablehq/table-validator\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"import {CSVText} from \"@tophtucker/structured-text-inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"import {set} from \"@observablehq/synchronized-inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"import {toc} from \"@observablehq/templates-table-of-instructions\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}