2f:T728,{ const svg = d3.select(DOM.svg(innerWidth + margin.left + margin.right, (numTypes * (rowHeight + rowPadding)) + margin.top + margin.bottom)); let chart = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`) let monthBars = chart.append("g") .selectAll("rect") .data(months) .enter().append("rect") .attr("x", d => x(d.key)) .attr("y", d => -y2(d.value)) .attr("height", d => y2(d.value)) .attr("width", d => x(d3.timeMonth.offset(d.key, 1)) - x(d.key) - 2) .attr("fill", "firebrick") .attr("opacity", 0.25) chart.append("g") .call(xAxis); let typeRows = chart.append("g") .selectAll("g") .data(d3.entries(types)) .enter().append("g"); typeRows.append("text") .text(d => `${d.key} (${d.value.count})`) .attr("class", "label") .attr("x", -margin.left) .attr("y", d => y(d.key) + textOffset); typeRows.append("line") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .attr("stroke", "rgba(0,0,0,0.05)") .attr("y1", d => y(d.key)) .attr("y2", d => y(d.key)) typeRows.append("rect") .attr("x", x2.range()[0]) .attr("y", d => y(d.key) - rowHeight / 2) .attr("height", rowHeight) .attr("width", d => x2(d.value.total) - x2.range()[0]) .attr("fill", "firebrick") .attr("opacity", 0.25) typeRows.append("text") .text(d => moneyFormat(d.value.total)) .attr("class", "label") .attr("text-anchor", "end") .attr("x", x2.range()[1] - 4) .attr("y", d => y(d.key) + textOffset); chart.append("g") .selectAll("circle") .data(data) .enter().append("circle") .attr("cx", d => x(d.date_received)) .attr("cy", d => y(d.claim_type)) .attr("r", d => types[d.claim_type].scale(d.claim_amount)) .attr("fill", "firebrick") .attr("opacity", 0.25); return svg.node(); }30:[] 2d:{"title":"Patient Timeline","cells":[{"id":0,"value":"md`# Patient Timeline\n### All claims - past year`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`\nEach type of claim received for a patient corresponds to a row on the timeline. The rows are ordered by total dollar amount received for that claim type over the course of a year. This total is shown on the right-hand side of the chart.\n\nIndividual claims are shown as bubbles on their corresponding row. The bubbles are sized proportionally to their value, relative to the maximimum amount *of that type*. That is, all of the ${typeEntries[0].key} claims are sized relative to the largest ${typeEntries[0].key} claim received, and all of the ${typeEntries[4].key} claims are sized relative to the largest ${typeEntries[4].key} claim received. This helps with intra-type claim comparisons, and claim types are so widely varied in their normal amounts that inter-type comparisons are usually meaningless anyway. It's not helpful to compare a $50 dental claim to a $2,000 inpatient claim.\n\nMonthly totals are also summarized at the top of the chart, giving a quick overview of the most expensive times of the year.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"margin = ({top: 40, right: 32, bottom: 40, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"innerWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof rowHeight = html`\n\t\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"rowPadding = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"textOffset = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"data = d3.csv(\"https://gist.githubusercontent.com/Aias/c93216aef46798dfc5dd3ed0b4b66282/raw/53c48c118f917f9320e78cd23a53d9675f72f813/fake_claims_2.csv\", claim => ({\n \tclaim_type: claim.claim_type,\n\tdate_received: dateParse(claim.date_received),\n \tclaim_amount: +claim.claim_amount\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"months = d3.nest()\n\t.key(d => d3.timeMonth.floor(d.date_received)).sortKeys((a, b) => (new Date(a) - new Date(b)))\n\t.rollup(leaves => d3.sum(leaves, l => l.claim_amount))\n\t.entries(data).map(m => ({\n \tvalue: m.value,\n \tkey: new Date(m.key)\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"types = d3.nest()\n\t.key(d => d.claim_type)\n\t.rollup(leaves => ({\n total: d3.sum(leaves, l => l.claim_amount),\n scale: d3.scaleSqrt()\n \t.domain([0, d3.max(leaves, l => l.claim_amount)])\n \t.range([0, rowHeight / 2]),\n count: leaves.length\n }))\n\t.object(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"typeEntries = d3.entries(types)","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"x = d3.scaleTime()\n\t.domain([d3.timeYear.floor(d3.min(data, d => d.date_received)), d3.timeYear.ceil(d3.max(data, d => d.date_received))])\n\t.range([50, innerWidth - 200])","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"x2 = d3.scaleLinear()\n\t.domain([0, d3.max(typeEntries, d => d.value.total)])\n\t.range([x.range()[1] + 16, innerWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"y = d3.scaleOrdinal()\n\t.domain(d3.entries(types).sort((a,b) => {\n\treturn b.value.total - a.value.total\n}).map(t => t.key))\n\t.range(d3.range(numTypes).map(d => (d * (rowHeight + rowPadding)) + rowHeight))","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"y2 = d3.scaleLinear()\n\t.domain([0, d3.max(months, d => d.value)])\n\t.range([0, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"exp = d3.scaleSqrt()\n\t.domain([0, 1])\n\t.range([0, rowHeight / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"pow = d3.scalePow()\n\t.exponent(10)\n\t.domain([0, d3.max(data, d => d.claim_amount)])\n\t.range([0, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"r = function(d) {\n return exp(pow(d)); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"xAxis = g => g.attr(\"transform\", `translate(0, ${numTypes * (rowHeight + rowPadding) + rowHeight})`)\n .call(d3.axisBottom(x).ticks(innerWidth / 100).tickFormat(multiFormat))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"numTypes = d3.keys(types).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"dateParse = d3.timeParse(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"moneyFormat = d3.format(\"$,\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"multiFormat = {\n var formatMillisecond = d3.timeFormat(\".%L\"),\n formatSecond = d3.timeFormat(\":%S\"),\n formatMinute = d3.timeFormat(\"%I:%M\"),\n formatHour = d3.timeFormat(\"%I %p\"),\n formatDay = d3.timeFormat(\"%a %d\"),\n formatWeek = d3.timeFormat(\"%b %d\"),\n formatMonth = d3.timeFormat(\"%b\"),\n formatYear = d3.timeFormat(\"%Y\");\n\n function multiFormat(date) {\n return (d3.timeSecond(date) < date ? formatMillisecond\n : d3.timeMinute(date) < date ? formatSecond\n : d3.timeHour(date) < date ? formatMinute\n : d3.timeDay(date) < date ? formatHour\n : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)\n : d3.timeYear(date) < date ? formatMonth\n : formatYear)(date);\n}\n return multiFormat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}