2c:null 2d:["$","title",null,{"children":"Targets versus actuals | Observable | Observable"}] 32:T4b2,function TargetVsActuals( data, { date = "date", // the field name for the date target = "target", actual = "actual", width=700, height=250, label="Targets vs. Actuals", ...options}) { data = data.map(d => ({ date: new Date(maybeAccessor(date)(d)), target: maybeAccessor(target)(d), actual: maybeAccessor(actual)(d) })) return Plot.plot({ width, height, x: {tickFormat: dateFormat, label: null}, y: {tickFormat: d3.format(".2s"), label, grid:true}, marks: [ Plot.barY(data, {x: "date", y: "actual", fill: "steelblue"}), Plot.barY(data.filter(d => d.target > 0).filter(d => d.actual > d.target), {x: "date", y2: "actual", y1: "target", fill: "green"}), Plot.barY(data.filter(d => d.actual < d.target), {x: "date", y: "target", stroke: "#999", fill: "none"}), Plot.tickY(data.filter(d => d.actual > d.target), {x: "date", y: "target", stroke: "white"}), Plot.text(data, { x: "date", y: d => Math.max(d.actual, d.target), text: d => d.actual && d.target ? d3.format(".0%")(d.actual / d.target) : "", dy: -5 }), Plot.ruleY([0]) ], ...options }) }33:Tda2,PercentGrowth = ({ data=[{target:10, actual:8}, {target:12, actual:9}], title="Monthly growth", width=700, height=20, titleWidth=100}) => { const perc = (a, b) => (b-a)/a; const target=perc(data[0].target, data[1].target), actual=perc(data[0].actual, data[1].actual); const wTitle=titleWidth, wLegend=117, wActual=140; const legendSize=(height-3)/2; const wBar=width-wTitle-wActual-wLegend; const sign = actual>=0 ? 1 : -1; const range = actual>=target? actual : (actual>=0) ? target : (target-actual); const xScale = (x) => (x - (actual<0 ? actual : 0))/range * wBar; const opacity = 0.3; const style = svg.fragment`` const Title = svg.fragment`${title}` const Actuals = svg.fragment` actuals ${d3.format(".3s")(data[0].actual)} → ${d3.format(".3s")(data[1].actual)}` const Target = svg.fragment` ` const Actual = svg.fragment` =0 ? "steelblue" : "red"} style="stroke-width:2;" /> ` const Percent = svg.fragment` ${d3.format(".0%")(actual/target)} of target growth rate` const Legend = svg.fragment` target actual ${d3.format(".0%")(target)} ${d3.format(".0%")(actual)} ` return html`` }34:[{"id":"05a9a0bce3a237c9b762c192716c3ea4f1c00319a57b870f105f4a929cef473c41bad6a1a6ff6bd907c1ff7826f48ac296efadbc18d5dc916eba6e9834742d71","href":"https://static.observableusercontent.com/files/05a9a0bce3a237c9b762c192716c3ea4f1c00319a57b870f105f4a929cef473c41bad6a1a6ff6bd907c1ff7826f48ac296efadbc18d5dc916eba6e9834742d71","name":"demo@4.csv","type":"text/csv","lastModified":1615748299898.717,"size":374}] 30:{"id":"a2406dfe3143ad29","slug":"targets-versus-actuals","title":"Targets versus actuals","thumbnail":"ea802ee230bb505f22c4ef8f1f6b0e399179b1bf6da1394c4790c39ffb052be8","access_level":"public","create_time":"$D2021-01-29T01:32:16.309Z","update_time":"$D2021-05-04T13:53:03.903Z","view_time":null,"first_public_time":"$D2021-01-29T19:32:47.446Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports."},"version":439,"publish_version":439,"role":null,"authored":false,"authors":[{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null,"bio":""}],"members":[{"type":"individual","id":"4530d0072aa49b47","login":"erinn","name":"Erinn Wong","avatar_url":"https://avatars-next.observableusercontent.com/9119ac38e4f1c92d50b28822c47306212f06e085b7d1416e851a1c397194e2d4","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Targets versus actuals","cells":[{"id":0,"value":"md`# Targets versus actuals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`A few functions to use for drawing monthly targets vs. actuals as well as showing month-over-month growth (targets and actuals also).\n\n~~~js\nimport {TargetVsActuals, PercentGrowth} from \"@observablehq/targets-versus-actuals\" \n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`### \\`TargetVsActuals\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"chart = TargetVsActuals(data, {date: \"Month\", target: \"Target\", actual: \"Actual\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"md`### \\`PercentGrowth\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"PercentGrowth({data: [{target: data[0].Target, actual: data[0].Actual}, {target: data[1].Target, actual: data[1].Actual}], title: \"Jul growth\", width:680})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"PercentGrowth({data: [{target: data[1].Target, actual: data[1].Actual}, {target: data[2].Target, actual: data[2].Actual}], title: \"Aug growth\", width:680})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"PercentGrowth({data: [{target: data[4].Target, actual: data[4].Actual}, {target: data[5].Target, actual: data[5].Actual}], title: \"Dec growth\", width:680})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`Data should be in an array with 3 columns:\n~~~js\n[\n {month: \"7/1/20\", target: 20000, actual:21637},\n {month: \"8/1/20\", target: 21000, actual:23000},\n {month: \"9/1/20\", target: 25000, actual:26637},\n {month: \"10/1/20\", target: 28000, actual:28392},\n ...\n]\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"dateFormat = d => d.getUTCMonth() ? d3.utcFormat(\"%b\")(d) : d3.utcFormat(\"%b %Y\")(d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"function maybeAccessor(value) {\n if (typeof value === \"string\") return d => d[value]\n return value;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"demo@4.csv\").text(), d3.autoType))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"Plot = require(\"@observablehq/plot@0.1.0/dist/plot.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"d3=require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"svg=htl.svg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"htl = require(\"htl@0.2.5/dist/htl.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"