2c:null 2d:["$","title",null,{"children":"Predominant cause of opioid overdose deaths in the U.S. | Aaron Williams | Observable"}] 32:Te3a,chart = { const svg = d3.select(DOM.svg(width, width)); svg .append('rect') .attr('width', width) .attr('height', width) .attr('fill', '#1A1A1A'); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const axis = g.append('g').attr('id', 'axis'); axis.append('g').call(yAxis); axis.append('g').call(topAxis); const county = g .selectAll('g.county') .data(counties) .join('g'); county.each((d, i, nodes) => { const colorId = DOM.uid("color"); const group = d3.select(nodes[i]); /* Each county needs a unique linearGradient to create the effect. The opacity scale logic is defined in the `makeScale` function. We're adjusting the opacity based on several variables including: 1. Are we showing every county? If so, use the full color spectrum but lower the opacity to emphasize dominate years. 2. Are we just showing a single county? If so, raise the opacity and stroke width of that path but reduce stroke width of all other paths, make the opacity super low, and change the color to gray. */ const opacityScale = makeScale(countiesSelect, d.key); group .append("linearGradient") .attr("id", colorId.id) .attr("gradientUnits", "userSpaceOnUse") .attr("gradientTransform", ({ key }) => { // I'm using translate here to move the gradient up on the coordinate system // because sometimes the transition from one color to another // doesn't correlate with the axes defined by d3 // Read more here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient return key === "54003" ? `translate(0, -90)` : `translate(0, -150)`; }) .attr("x1", 0) .attr("x2", 0) .attr("y1", 0) .attr("y2", "100%") .selectAll("stop") .data( d.values.filter(d => isEmpty(countiesSelect) || countiesSelect === d.countyfips ? true : [2011, 2014, 2017].includes(d.year) ) ) .join("stop") .attr("offset", d => y(d.year) / height) .attr("stop-color", d => isEmpty(countiesSelect) || countiesSelect === d.countyfips ? getColor(d.group) : '#cecece' ) .attr("stop-opacity", d => round(opacityScale[d.group](d[d.group]))); group .append('path') .attr('fill', 'none') .attr('stroke', colorId) .attr('stroke-width', d => isEmpty(countiesSelect) ? 1.5 : countiesSelect === d.key ? 3 : 0.5 ) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line(d.values.filter(line.defined()))); }); const labels = svg.append('g').attr('class', 'labels'); labels .selectAll('text.county') .data(counties.filter(d => Object.keys(countyLookup).includes(d.key))) .join('text') .attr( `transform`, _ => `translate(${height - margin.left * 2.5}, ${y.step() / 1.10})` ) .attr("opacity", d => isEmpty(countiesSelect) || countiesSelect !== d.key ? 0 : 0.9 ) .text(d => { const label = countyLookup[d.key]; if (label) { return d.key === "11001" ? label.county.replace("Of", "of") : `${label.county}, ${getAPState(d.key)}`; } }) .style('font-size', "1em") .style('fill', "#d5d5d5") .style('font-family', '"FranklinITCProLight",Helvetica,Arial,sans-serif') .style('text-transform', 'uppercase') .style('font-weight', 'bold'); return svg.node(); }33:[{"id":"6cd5b5f8580ae9ca28564c3b98abd4c073ab6bf98a7be972ab76b6e236a03cc2cfcc4890b85663208eac57f4e25729ff37d5b03342ef4d5e3c968b83240ea7f2","href":"https://static.observableusercontent.com/files/6cd5b5f8580ae9ca28564c3b98abd4c073ab6bf98a7be972ab76b6e236a03cc2cfcc4890b85663208eac57f4e25729ff37d5b03342ef4d5e3c968b83240ea7f2","name":"countyLookup.json","type":"application/json","lastModified":1578510562719.258,"size":296},{"id":"56fe2ec7a48cb7a86b1d4e4a667a3da1853dfbad9fd36ea85d9bbf3d15756f0a2141c9d3f3ba985ba6dba1e42742a449a99d89e523d2c4c8cb0550ff822c7886","href":"https://static.observableusercontent.com/files/56fe2ec7a48cb7a86b1d4e4a667a3da1853dfbad9fd36ea85d9bbf3d15756f0a2141c9d3f3ba985ba6dba1e42742a449a99d89e523d2c4c8cb0550ff822c7886","name":"counties.json","type":"application/json","lastModified":1578507862751.503,"size":917073},{"id":"57ac43015b11a5531914f88db811e847e5e3393dbc021886208098bf55efa69310005e3b3eed3fd4151a7175a7843c58ccaddeab65d5684b6eb832d3fc1b81d7","href":"https://static.observableusercontent.com/files/57ac43015b11a5531914f88db811e847e5e3393dbc021886208098bf55efa69310005e3b3eed3fd4151a7175a7843c58ccaddeab65d5684b6eb832d3fc1b81d7","name":"annotations.json","type":"application/json","lastModified":1578510421799.956,"size":825}] 30:{"id":"a8f26d24229f7b55","slug":"predominant-cause-of-opioid-overdose-deaths-in-the-u-s","title":"Predominant cause of opioid overdose deaths in the U.S.","thumbnail":"9bb8a27d720c8d247760f620b6526849220faa511e61931170d42c08ec0f4875","access_level":"public","create_time":"$D2020-01-08T18:23:11.073Z","update_time":"$D2020-02-11T20:19:42.689Z","view_time":null,"first_public_time":"$D2020-01-30T16:50:11.184Z","fork":true,"stars":12,"starred":false,"owner":{"type":"team","id":"eb234b21118ba2f1","login":"aboutaaron","name":"Aaron Williams","avatar_url":"https://avatars-next.observableusercontent.com/d3a33f280ffec5c8283a9aae244b575dced553a6f821571324a77d92f0ac5839","tier":"starter_2024"},"version":2082,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c8854dae9d7f94e1","login":"aboutaaron","name":"Aaron Williams","avatar_url":"https://avatars-next.observableusercontent.com/d3a33f280ffec5c8283a9aae244b575dced553a6f821571324a77d92f0ac5839","tier":null}],"members":[{"type":"individual","id":"c8854dae9d7f94e1","login":"aboutaaron","name":"Aaron Williams","avatar_url":"https://avatars-next.observableusercontent.com/d3a33f280ffec5c8283a9aae244b575dced553a6f821571324a77d92f0ac5839","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Predominant cause of opioid overdose deaths in the U.S.","cells":[{"id":0,"value":"md`# Predominant cause of opioid overdose deaths in the U.S.\n\nExclusive data – obtained by The Washington Post from the Centers for Disease Control and Prevention – shows how individual counties moved through the three waves of the opioid crisis: prescription pills, heroin and fentanyl. This graphic illustrates how the opioid responsible for the majority of overdose deaths shifted from 2011 to 2017 in more than 1,300 U.S. counties.\n\nNote: For some years, there was no dominant opioid driving deaths.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1331,"value":"viewof countiesSelect = radio({\n title: 'Filter by',\n options: [\n { label: 'Show all', value: '' },\n ...Object.keys(countyLookup).map(f => ({\n label:\n f === \"11001\"\n ? countyLookup[f].county.replace(\"Of\", \"of\")\n : `${countyLookup[f].county}, ${getAPState(f)}`,\n value: f\n }))\n ],\n value: '',\n description: 'Note: this will take a second to re-render...'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"md`\n\n\n---\nThis graphic was created for the _Washington Post_ story, [How the opioid epidemic evolved](https://www.washingtonpost.com/graphics/2019/investigations/opioid-pills-overdose-analysis/), published on Dec. 23, 2019.\n\n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":640,"value":"height = width - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"margin = ({ left: 50, right: 50, top: 50, bottom: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":645,"value":"x = d3\n .scaleBand()\n .domain(labels)\n .range([0, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":694,"value":"y = d3\n .scalePoint()\n .domain(d3.range(2011, 2018).reverse())\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":696,"value":"yAxis = g => {\n g.attr(\"class\", \"axis\")\n .attr(\"id\", \"left\")\n .call(\n d3\n .axisLeft(y)\n .tickSizeOuter(0)\n .tickSize(-width)\n .tickFormat(d => ([2011, 2014, 2017].includes(d) ? d : \"\"))\n );\n\n g.select(\".domain\").remove();\n g.selectAll(\".tick line\")\n .attr(\"stroke\", \"#cecece\")\n .attr(\"stroke-opacity\", 0.25);\n\n g.selectAll('text')\n .style('font-size', \"1.25em\")\n .style('fill', \"#d5d5d5\")\n .style('font-family', '\"FranklinITCProLight\",Helvetica,Arial,sans-serif')\n .style('text-transform', 'uppercase');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1493,"value":"topAxis = g => {\n const dict = { a: \"pills\", b: \"heroin\", c: \"fentanyl\" };\n g.attr(\"class\", \"axis\")\n .attr(\"id\", \"top\")\n .call(d3.axisTop(x).tickFormat(d => dict[d]));\n\n g.select(\".domain\").remove();\n g.selectAll(\".tick text\").attr(\"y\", -18);\n g.selectAll(\".tick line\").remove();\n g.selectAll('text')\n .style('font-size', \"1.25em\")\n .style('fill', \"#d5d5d5\")\n .style('font-family', '\"FranklinITCProLight\",Helvetica,Arial,sans-serif')\n .style('text-transform', 'uppercase');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":778,"value":"line = d3\n .line()\n .defined(d => labels.includes(d.group))\n .x(d => x(d.group) + x.bandwidth() / 2)\n .y(d => y(d.year))\n .curve(d3.curveMonotoneX)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1141,"value":"getColor = group =>\n group === 'a'\n ? '#1a94a9'\n : group === 'b'\n ? '#9c143f'\n : group === 'c'\n ? '#fbbe4a'\n : group === 'd'\n ? '#8b8b8b'\n : 'transparent'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"labels = ['a', 'b', 'c']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1509,"value":"counties = FileAttachment(\"counties.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1602,"value":"countyLookup = FileAttachment('countyLookup.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1690,"value":"isEmpty = value => (value === \"\" ? true : false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1434,"value":"round = (d, precision = 4) =>\n Number(Math.round(d + 'e' + precision) + 'e-' + precision)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1463,"value":"createStopOpacityScale = (opacity = [0, 0.25]) => {\n const groups = d3\n .nest()\n .key(d => d.group)\n .entries(_.flatten(counties.map(d => d.values)))\n .map(({ key, values }) => [key, d3.max(values.map(d => d[key]))]);\n\n const scales = groups.reduce((obj, [drug, maxValue]) => {\n // produce an object of d3.scaleLinear based on max death rate\n // of each drug in dataset\n\n if (drug === \"null\") {\n obj[drug] = () => 0;\n } else if (drug === \"d\") {\n obj[drug] = () => 0.25;\n } else {\n // linear scale for each drug\n obj[drug] = d3\n .scaleLinear()\n .domain([0, maxValue])\n .range([opacity[0], opacity[1]]);\n }\n return obj;\n }, {});\n\n return scales;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1694,"value":"makeScale = (countyfips, key) =>\n isEmpty(countyfips)\n ? createStopOpacityScale() // show all\n : countyfips === key\n ? createStopOpacityScale([0.75, 1]) // selected\n : createStopOpacityScale([0, 0.02]) // muted","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1762,"value":"getAPState = key => us.lookup(key.substring(0, 2)).ap_abbr","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1862,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1859,"value":"makeAnnotations = _ =>\n d3\n .annotation()\n .type(d3.annotationCalloutCircle)\n .disable([\"connector\"])\n .accessors({\n x: d => x(d.group),\n y: d => y(d.year)\n })\n .accessorsInverse({\n group: d => x.invert(d.x),\n year: d => y.invert(d.y)\n })\n .annotations(annotations)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1855,"value":"annotations = {\n // create annotations for graphic\n const selected = annotationsText.map(d => {\n const anno = Object.assign({}, d, { year: +d.year });\n const [obj = { values: [] }] = counties.filter(\n v => v.key === anno.countyfips\n );\n const { values } = obj;\n const [filtered = {}] = values.filter(v => v.year === anno.year);\n const merged = { ...filtered, ...anno };\n return merged;\n });\n const formatted = selected.map(formatAnnotation);\n return formatted.filter(({ data: { countyfips } }) =>\n isEmpty(countiesSelect)\n ? countyfips === 'default'\n : countiesSelect === countyfips\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1851,"value":"formatAnnotation = d => {\n const createNote = d => {\n const { text } = d;\n let obj = { label: text };\n\n return obj;\n };\n\n return {\n // create annotation object\n id: `anno-${d.countyfips}`,\n note: createNote(d),\n data: d,\n className: `pg-annotation anno-${d.countyfips}`,\n dx: 20,\n dy: 5\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1848,"value":"annotationsText = FileAttachment('annotations.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1930,"value":"drawAnnotations = (annotator, target) => {\n // This assigns the annotations after the SVG is rendered to the DOM\n chart;\n const svg = d3.select(target);\n const group = svg.selectAll('.annotation-group');\n if (group.nodes().length > 0) {\n group.remove();\n }\n\n svg\n .append('g')\n .attr('class', 'annotation-group')\n .call(annotator())\n .call(adjustAnnotations);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1909,"value":"adjustAnnotations = g => {\n const anno = g.selectAll(\".pg-annotation\");\n anno.attr(\n \"transform\",\n d => `translate(${d._x + y.step() + margin.left}, ${d._y + margin.top})`\n );\n\n g.selectAll(\".note-line\").remove();\n anno\n .selectAll(\".subject\")\n .attr(\"stroke\", \"white\")\n .attr('stroke-width', 1)\n .attr(\"stroke-opacity\", 1);\n\n anno\n .selectAll('text')\n .style('font-size', \"16px\")\n .style('fill', \"#ffffff\")\n .style('font-family', '\"FranklinITCProLight\",Helvetica,Arial,sans-serif');\n\n g.select(\".anno-default\").style(\"opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2051,"value":"md`---\n\n[d3-annotation](https://github.com/susielu/d3-annotation) needs the svg to exist before adding annotations, so, we need to call a function to render after Observable has created the chart in the DOM. \n\n[See this GitHub issue](https://github.com/susielu/d3-legend/issues/81#issuecomment-373117278) for more information.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1955,"value":"drawAnnotations(makeAnnotations, chart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"md`---\n\n#### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1759,"value":"us = require(\"us\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"d3 = require('d3-selection', 'd3-scale', 'd3-axis', 'd3-array', 'd3-shape', 'd3-collection', 'd3-svg-annotation@2.5.1/d3-annotation.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"