2d:null 2e:["$","title",null,{"children":"Drug Overdose Deaths during COVID-19 | Uma | Observable"}] 33:T7b6,viewof date = { const svg = d3.select(DOM.svg(width, 600)) .style("-webkit-tap-highlight-color", "transparent") .on("mousemove touchmove", moved); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const rule = svg.append("g") .append("line") .attr("y1", 600) .attr("y2", 10) .attr("stroke", "black"); const serie = svg.append("g") .style("font", "bold 10px sans-serif") .selectAll("g") .data(series) .join("g"); serie.append("path") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke",d=> d.key == "US" ? "#4424c7" : "#d8d8d8") // .attr("stroke","gray") .attr("d", d => line(d.values)); serie.append("text") .datum(d => ({key: d.key, value: d.values[d.values.length - 1].value})) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3) .attr("x", x.range()[1] + 3) .attr("y", d => y(d.value)) .attr("dy", "0.35em") .text(d => d.key) .clone(true) // .attr("fill", d => z(d.key)) .attr("fill","black") .attr("stroke", null); d3.transition() .ease(d3.easeCubicOut) .duration(1500) .tween("date", () => { const i = d3.interpolateDate(x.domain()[1], x.domain()[0]); return t => update(i(t)); }); function update(date) { date = d3.utcDay.round(date); rule.attr("transform", `translate(${x(date) + 0.5},0)`); serie.attr("transform", ({values}) => { const i = bisect(values, date, 0, values.length - 1); return `translate(0,${y(1) - y(values[i].value / values[0].value)})`; }); svg.property("value", date).dispatch("input"); } function moved(event) { update(x.invert(d3.pointer(event, this)[0])); d3.event.preventDefault(); } update(x.domain()[0]); return svg.node(); }34:[{"id":"cac893bac05d08dcb6a9a187c4d50995c9ae50bc90b78f203bb3a048d0cd6ecb9348f3bc8c732b88e28ca1f504ee02e39ced3117b41bd93bab1cccd9e31fc1de","href":"https://static.observableusercontent.com/files/cac893bac05d08dcb6a9a187c4d50995c9ae50bc90b78f203bb3a048d0cd6ecb9348f3bc8c732b88e28ca1f504ee02e39ced3117b41bd93bab1cccd9e31fc1de","name":"latest_drug_mortality.csv","type":"text/csv","lastModified":1628379685335.432,"size":7636534},{"id":"123e55c588cf503647b61c6e9cfe049614446f7225b67aeda7b08bec85a878c20e03f44ff58882570b4b3d26babd8f760750087af4bdfe20d49bb53a5e4ab605","href":"https://static.observableusercontent.com/files/123e55c588cf503647b61c6e9cfe049614446f7225b67aeda7b08bec85a878c20e03f44ff58882570b4b3d26babd8f760750087af4bdfe20d49bb53a5e4ab605","name":"monthly_change_drugs.csv","type":"text/csv","lastModified":1628383294042.984,"size":35145},{"id":"317c5c742c457b708e80787ef9ea86ff884c81a40b840c4e7bee2e6b022df7f132e50ed90013b55f0468d0a64e4a3212f095656bed9a1e51829a5cb637402fa3","href":"https://static.observableusercontent.com/files/317c5c742c457b708e80787ef9ea86ff884c81a40b840c4e7bee2e6b022df7f132e50ed90013b55f0468d0a64e4a3212f095656bed9a1e51829a5cb637402fa3","name":"ratio@1.csv","type":"text/csv","lastModified":1628392918672.313,"size":86239},{"id":"dd1900c2f55b3a8381c55882f770d7df3a4b902343d5250262c954c71c729ef539e4a6d9568c02471a554a8b2dc76760e3e8d43ce33aeecf30cf2ec835a03c87","href":"https://static.observableusercontent.com/files/dd1900c2f55b3a8381c55882f770d7df3a4b902343d5250262c954c71c729ef539e4a6d9568c02471a554a8b2dc76760e3e8d43ce33aeecf30cf2ec835a03c87","name":"Screen Shot 2021-08-08 at 10.39.31 AM.png","type":"image/png","lastModified":1628433603907.509,"size":236915}] 31:{"id":"9d33e7e2a089e000","slug":"drug-deaths","title":"Drug Overdose Deaths during COVID-19","thumbnail":"dc3de99fedddd9a5bcc7637da57a77dc3c4f43f8120cf7542206fe4889c5d8e3","access_level":"public","create_time":"$D2021-08-07T22:30:26.713Z","update_time":"$D2021-09-06T01:56:42.037Z","view_time":null,"first_public_time":"$D2021-08-09T01:41:38.706Z","has_unpublished_edits":null,"fork":{"id":"662080314eb2cb2c","slug":"blog-post","title":"Blog Post","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":21,"starred":false,"owner":{"type":"team","id":"172949537ea925dd","login":"uma","name":"Uma","avatar_url":"https://avatars-next.observableusercontent.com/00c3098d4560e836016db26cbab495a9e1c82d1d820735681a50c346c3a077ba","tier":"starter_2024"},"version":790,"publish_version":790,"role":null,"authored":false,"authors":[{"type":"individual","id":"646872b993ccc0d0","login":"uma","name":"Uma","avatar_url":"https://avatars-next.observableusercontent.com/00c3098d4560e836016db26cbab495a9e1c82d1d820735681a50c346c3a077ba","tier":null}],"members":[{"type":"individual","id":"646872b993ccc0d0","login":"uma","name":"Uma","avatar_url":"https://avatars-next.observableusercontent.com/00c3098d4560e836016db26cbab495a9e1c82d1d820735681a50c346c3a077ba","tier":null,"role":"editor"}],"comments":[{"id":"7a7d7e09fbf5659d","reply_to_id":null,"content":"I believe here the Y axis should say \"Change in death counts (%)\" ?","create_time":"$D2021-08-10T11:58:56.849Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"f3a6df2ea7c80d99","login":"javpascal","name":"JP","avatar_url":"https://avatars-next.observableusercontent.com/a68f74fd431222a5df5cc92080730ed40a122a669c6bcb48575f2c227858ed79","tier":null}},{"id":"2e45f36bad6dfcba","reply_to_id":"7a7d7e09fbf5659d","content":"😅 thanks!","create_time":"$D2021-08-10T15:38:43.459Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"646872b993ccc0d0","login":"uma","name":"Uma","avatar_url":"https://avatars-next.observableusercontent.com/00c3098d4560e836016db26cbab495a9e1c82d1d820735681a50c346c3a077ba","tier":null}},{"id":"e37d39e5d2efab49","reply_to_id":null,"content":"That is a wonderful work. Regarding your first point did you try Arquero?","create_time":"$D2021-09-02T09:48:05.032Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}},{"id":"8e4f3463a940f6c0","reply_to_id":"e37d39e5d2efab49","content":"I have not! I checked out your music data tutorial on it, super cool 🙂","create_time":"$D2021-09-02T18:22:06.352Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"646872b993ccc0d0","login":"uma","name":"Uma","avatar_url":"https://avatars-next.observableusercontent.com/00c3098d4560e836016db26cbab495a9e1c82d1d820735681a50c346c3a077ba","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Drug Overdose Deaths during COVID-19","cells":[{"id":0,"value":"# Drug Overdose Deaths during COVID-19\n## An analysis of recently released CDC data on drug overdose deaths in the U.S.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"---\n### Background","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"The Centers for Disease Control recently released preliminary numbers for drug overdose deaths in the United States for 2020 which was widely covered in the media. For example, this [New York Times article](https://www.nytimes.com/interactive/2021/07/14/upshot/drug-overdose-deaths.html) highlighted the dramatic rise in drug overdose deaths during the pandemic. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"This workbook examines this data that show provisional counts for drug overdose deaths in the National Vital Statistics System. ([Download data](https://www.cdc.gov/nchs/nvss/vsrr/drug-overdose-data.htm#drug_specificity))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"### Summary of Data Fields","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"The data provides monthly counts of deaths from 2015 to 2020 for the U.S. as well as for each state. The plot below provides a quick snapshot of data fields using @obervablehq's [SummaryTable](https://observablehq.com/@observablehq/summary-table) component.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"viewof summary_data = SummaryTable(data0, {label: \"Provisional Drug Overdose Death Counts\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof search = Inputs.search(data0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof drug_deaths = Inputs.table(search, {\n multiple: false,\n value: data0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"### Trends in Drug Overdose Deaths","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"The figure below shows trends in drug overdose deaths from 2015 to 2020 for the U.S. overall. It is important to note that each point represents the numbers of deaths due to drug overdoses occurring in the 12-month periods -- the counts represent the numbers of deaths due to drug overdose occurring in the 12-month periods ending in the month indicated. For example, we should not be deriving annual counts by summing up monthly data. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"Plot.plot({\n marginLeft: 50,\n height: 500,\n width: 700,\n y: {\n grid: true,\n nice: true,\n label: \"↑ # Drug Overdose Deaths\",\n },\n marks: [\n Plot.areaY(usdata, {x: \"date\", y: \"value\", fill: \"#ccc\"}),\n Plot.lineY(usdata, {x: \"date\", title: (d) => `${d.month}, ${d.year} \\n ${d.value}`, y: \"value\"}),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"### Geographical Variation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"The plot below shows changes in number & percentage of deaths in the month of December for 2020 vs. 2019. With some exceptions (e.g. New Hampshire & South Dakota), drug overdose deaths have increased significantly across all states. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"viewof units = Inputs.radio([\"% Change\", \"Count Change\"], {value:\"% Change\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"mapus = addTooltips(Plot.plot({\n width: 800,\n height: 560,\n padding: 0,\n title: (d) =>\n `${d.total}`,\n x: {axis: null},\n y: {axis: null},\n color: {scheme: \"bupu\"}, \n marks: cells\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"*Tile Map made with [@analyzer2004's GridMap](https://observablehq.com/@analyzer2004/plot-gallery)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"Below is a plot showing relative change in drug overdose death counts since January, 2019. Each line represents a state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 600, \n width: 700,\n y: {\n type: \"log\",\n grid: true,\n label: \"↑ Change in death count(%)\",\n tickFormat: formatChange\n },\n color: {\n range: [\"#ccc\"]\n },\n marks: [\n Plot.ruleY([1]),\n Plot.line(recent_data, Plot.normalizeY({\n x: \"date\", \n y: \"value\",\n stroke: \"name\"\n })),\n Plot.text(recent_data, Plot.selectLast(Plot.normalizeY({\n x: \"date\",\n y: \"value\",\n z: \"name\",\n text: \"name\",\n textAnchor: \"start\",\n dx: 3\n })))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"Here is an interactive version of the above graph for all years in the data. It uses [Index chart](https://observablehq.com/@d3/index-chart) by @mbostock. Each line represents a state and colored line shows the U.S. overall. Use the vertical line to pick a point of reference. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"### Month-over-month Change","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"The plots below show month-over-month changes in death counts for 2020 vs. 2019. It is interesting to see that patterns vary across states (For example, N.J. & MA). In majority of the states lines diverge over time indicating higher and higher deaths as the pandemic lingered on. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"plots = html`2019 vs. 2020

NYC ${nyc}

New Jersey${nj}

Massachusetts ${mass}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"html`

California ${california}

Texas${texas}

Florida ${florida}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"### Exploration Dashboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"This final graph allows you to explore any state (including United States overall, NYC & DC) using the dropdown menu. The left hand side panel shows the overall trends in drug overdose deaths, while the graph on the right panel provides month-over-month comparison for 2020 vs. 2019. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"viewof statedropdown = Inputs.select(uniqueStates, {value: \"New York\", })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"html`Drug Overdose Deaths in ${statedropdown} (2015-2020)
Numbers represent count of drug overdose deaths occurring in the 12-month periods ending in the month indicated`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"dash1 = html`

${timetrend}

Month over month comparison 2019 vs. 2020 ${variable_plot}

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"DOM.download(await serialize(dash1), `${statedropdown}.svg`, 'Download as svg')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"This graph shows trends in both drug overdose and total number of deaths (from all causes) for chosen region. The panel on the right provides a month-over-month comparison in proportion of deaths attributed to drug overdose in 2019 vs. 2020. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"viewof statedropdown_2 = Inputs.select(uniqueStates, {value: \"New York\", })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"dash2 = html`Overall Deaths & Drug Overdose Deaths in ${statedropdown_2} (2015-2020)
\n Panel on the right shows proportion of deaths due to drug overdose in 2019 vs. 2020

${timetrend_drugs}

${timetrend_overall}

\n\n

Proportion of Drug Overdose Deaths 2019 vs. 2020 ${ratio_plot}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"DOM.download(await serialize(dash2), `${statedropdown}_ratio.svg`, 'Download as svg')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"timetrend_overall= Plot.plot({\nwidth: 600,\n height: 250,\n marginLeft: 50,\n y: {\n grid: true,\n nice: true,\n label: \"↑ # Deaths\",\n },\n marks: [\n Plot.lineY(timedata2, {x: \"date\", y: \"value\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"timetrend_drugs= Plot.plot({\nwidth: 600,\n height: 250,\n marginLeft: 50,\n y: {\n grid: true,\n nice: true,\n label: \"↑ # Drug Overdose Deaths\",\n },\n marks: [\n Plot.lineY(timedata_drugs, {x: \"date\", y: \"value\"})\n\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"\nThis was my first time authoring a blog post using @observablehq and it was a great experience. The new Plot library is fun to use for someone coming from an R/Py background. That being said, couple of points regarding my experience: \n\n1. I ended up doing some of the data manipulation taks in R (see [RMarkdown](https://static-uma.vercel.app/nvss-drug-deaths)). Wonder if something like [Tidyverse JS](https://pbeshai.github.io/tidy/) can be imported (or I should improve my JS skills)? 🙂 \n\n2. I like tooltips! Waiting for the official version of Plot to be released. Adventures with @mkfreeman's [Plot tooltip](https://observablehq.com/@mkfreeman/plot-tooltip) (which is nice) did not work well in my case with primarily line charts. \n\n3. As a notebook experience, @observable rocks! Look forward to exploring more. \n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"timedata_drugs = data0.filter((data) => data.state == statedropdown_2 & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"timedata2 = data0.filter((data) => data.state == statedropdown_2 & data.Indicator == \"Number of Deaths\").sort(function(a, b) {\n return a.date - b.date;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"variable_plot = Plot.line(variable_data, {x: \"month\", y: \"value\", stroke: \"year\"}).plot({\n width: 350,\n height: 500,\n marginBottom: 75,\n marginRight: 25,\n // marginTop:105,\n color: {\n range: [\"#000000\", \"#f12328\"]\n },\n y:{\n\n label: '↑ # Drug Deaths',\n // tickFormat : x => `${x.toFixed(2)}`\n},\n x: { label: '',tickRotate: 45, domain: d3.sort(variable_data, d => d.monthnum).map(d => d.month) }}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"variable_data = d3.merge([data0.filter((data) => data.state == statedropdown & data.year == \"2019\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n}),data0.filter((data) => data.state == statedropdown & data.year == \"2020\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n})])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"timetrend= Plot.plot({\nwidth: 700,\n height: 500,\n marginLeft: 50,\n y: {\n grid: true,\n nice: true,\n label: \"↑ # Drug Overdose Deaths\",\n },\n marks: [\n Plot.areaY(timedata, {x: \"date\", y: \"value\", fill: \"#ccc\"}),\n Plot.lineY(timedata, {x: \"date\", y: \"value\"}),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"uniqueStates = [...new Set(states)]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"states = data0.map((d)=> d.state)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"timedata = data0.filter((data) => data.state == statedropdown & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"california = Plot.line(calidata, {x: \"month\", y: \"value\", stroke: \"year\"}).plot({\n width: 300,\n height: 300,\nmarginBottom: 75,\n color: {\n range: [\"#000000\", \"#f12328\"]\n },\n y:{\n label: '↑ # Drug Deaths',\n},\n x: { label: '', tickRotate: -90, domain: d3.sort(calidata, d => d.monthnum).map(d => d.month) }}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"texas = Plot.line(texasdata, {x: \"month\", y: \"value\", stroke: \"year\"}).plot({\n width: 300,\n height: 300,\nmarginBottom: 75,\n color: {\n range: [\"#000000\", \"#f12328\"]\n },\n y:{\n label: '↑ # Drug Deaths',\n},\n x: { label: '', tickRotate: -90,domain: d3.sort(texasdata, d => d.monthnum).map(d => d.month) }}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"nj = Plot.line(njdata, {x: \"month\", y: \"value\", stroke: \"year\"}).plot({\n width: 300,\n height: 300,\nmarginBottom: 75,\n color: {\n range: [\"#000000\", \"#f12328\"]\n },\n y:{\n label: '↑ # Drug Deaths',\n},\n x: { label: '', tickRotate: -90,domain: d3.sort(njdata, d => d.monthnum).map(d => d.month) }}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"nyc = Plot.line(nycdata, {x: \"month\", y: \"value\", stroke: \"year\"}).plot({\n width: 300,\n height: 300,\n marginBottom: 75,\n color: {\n range: [\"#000000\", \"#f12328\"]\n },\n y:{\n\n label: '↑ # Drug Deaths',\n},\n x: { label: '',tickRotate: -90, domain: d3.sort(nycdata, d => d.monthnum).map(d => d.month) }}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"mass = Plot.line(massdata, {x: \"month\", y: \"value\", stroke: \"year\"}).plot({\n width: 300,\n height: 300,\n marginBottom: 75,\n color: {\n range: [\"#000000\", \"#f12328\"]\n },\n y:{\n\n label: '↑ # Drug Deaths',\n},\n x: { label: '',tickRotate: -90, domain: d3.sort(massdata, d => d.monthnum).map(d => d.month) }}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"florida = Plot.line(floridadata, {x: \"month\", y: \"value\", stroke: \"year\"}).plot({\n width: 300,\n height: 300,\nmarginBottom: 75,\n color: {\n range: [\"#000000\", \"#f12328\"]\n },\n title: (d) =>\n `Count: ${d.value} `,\n y:{\n label: '↑ # Drug Deaths' \n},\n x: { label: '', tickRotate: -90,domain: d3.sort(floridadata, d => d.monthnum).map(d => d.month) }}\n) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"formatChange = {\n const format = d3.format(\"+d\");\n return x => format((x - 1) * 100);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"massdata = d3.merge([data0.filter((data) => data.name == \"MA\" & data.year == \"2019\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n}),data0.filter((data) => data.name == \"MA\" & data.year == \"2020\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n})])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"floridadata = d3.merge([data0.filter((data) => data.name == \"FL\" & data.year == \"2019\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n}),data0.filter((data) => data.name == \"FL\" & data.year == \"2020\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n})])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"calidata = d3.merge([data0.filter((data) => data.name == \"CA\" & data.year == \"2019\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n}),data0.filter((data) => data.name == \"CA\" & data.year == \"2020\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n})])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"texasdata = d3.merge([data0.filter((data) => data.name == \"TX\" & data.year == \"2019\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n}),data0.filter((data) => data.name == \"TX\" & data.year == \"2020\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n})])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"nycdata = d3.merge([data0.filter((data) => data.name == \"YC\" & data.year == \"2019\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n}),data0.filter((data) => data.name == \"YC\" & data.year == \"2020\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n})])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"njdata = d3.merge([data0.filter((data) => data.name == \"NJ\" & data.year == \"2019\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n}),data0.filter((data) => data.name == \"NJ\" & data.year == \"2020\" & data.Indicator == \"Number of Drug Overdose Deaths\").sort(function(a, b) {\n return a.date - b.date;\n})])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .ticks(null, x => +x.toFixed(6) + \"×\"))\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"stroke-opacity\", d => d === 1 ? null : 0.2)\n .attr(\"x2\", width - margin.left - margin.right))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"k = d3.max(d3.group(data, d => d.name), ([, group]) => d3.max(group, d => d.value) / d3.min(group, d => d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"z = d3.scaleOrdinal(d3.schemeCategory10).domain(data.map(d => d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"margin = ({top: 20, right: 40, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"y = d3.scaleLog()\n .domain([1 / k, k])\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"bisect = d3.bisector(d => d.date).left","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"series = d3.groups(data, d => d.name).map(([key, values]) => {\n const v = values[0].value;\n return {key, values: values.map(({date, value}) => ({date, value: value / v}))};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"recent_data = data0.filter((f) => f[\"Indicator\"] == \"Number of Drug Overdose Deaths\" & f[\"name\"] != \"YC\").\nfilter((d)=> d.year == \"2019\" | d.year == \"2020\").\nsort(function(a, b) {\n return a.date - b.date;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"data = data0.filter((f) => f[\"Indicator\"] == \"Number of Drug Overdose Deaths\" & f[\"name\"] != \"YC\").\n//filter((d)=> d.year == \"2019\" | d.year == \"2020\").\nsort(function(a, b) {\n return a.date - b.date;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"mapData = {\n const ds = units == \"Count Change\" ? \"count_change\" : \"percent_change_format\"\n return new GridMap()\n .field({name: \"State Name\", code: \"State\", values: [ds] })\n .mapGrid(map)\n .data(us_change)\n .process();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"cells = {\n const max = d3.max(mapData.map(d => d.total));\n return [\n Plot.cell(mapData, {\n x: \"col\",\n y: \"row\",\n rx: 6, ry: 6,\n fill: \"total\",\n inset: 1,\n title: title\n }),\n plotText(\"0em\", \"code\"),\n plotText(\"1em\", d => d.total.toLocaleString(\"en\"))\n ]\n \n function plotText(dy, text) {\n return Plot.text(mapData, {\n x: \"col\",\n y: \"row\",\n dy: dy, \n fontWeight: \"bold\",\n fill: d => max - d.total,\n text: text, \n title: title\n })\n }\n \n function title(d) {\n return `${d.state}\\n${d.total}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"import {GridMap, map} from '@analyzer2004/gridcartogram'\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"\nus_change= d3.merge(await Promise.all([FileAttachment(\"monthly_change_drugs.csv\")].map(async file => d3.csvParse(await file.text(), d => {\n return d\n})))).filter((data) => data.Month == \"December\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"usdata = data0.filter((data) => data.name == \"US\" & data.Indicator == \"Number of Drug Overdose Deaths\")\n .sort(function(a, b) {\n return a.date - b.date;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"ratio_plot = Plot.line(ratio_state, {x: \"month\", y: \"value\", stroke: \"year\"}).plot({\n width: 350,\n height: 500,\n marginBottom: 75,\n marginRight: 25,\n color: {\n domain: [\"2019\", \"2020\"],\n range: [\"#000000\", \"#f12328\"]\n },\n y:{\n label: '↑ Month over month comparison',\n tickFormat: d => `${(d*100).toFixed(2)}%`,\n\n},\n x: { label: '',tickRotate: 45, domain: d3.sort(ratio_state, d => d.monthnum).map(d => d.month) }}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"ratio_state = ratio.filter((d)=> d.state == statedropdown_2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"ratio= d3.merge(await Promise.all([FileAttachment(\"ratio@1.csv\")].map(async file => d3.csvParse(await file.text(), d => {\n return {name: d[\"State\"] , date, year:d[\"Year\"],month:d[\"Month\"], monthnum: +d[\"Month_num\"], state: d[\"State Name\"], Indicator: d[\"Indicator\"], value: +d[\"ratio\"]};\n})))).filter((data) => data.year == \"2019\" | data.year == \"2020\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"data0= d3.merge(await Promise.all([FileAttachment(\"latest_drug_mortality.csv\")].map(async file => d3.csvParse(await file.text(), d => {\n const date = parseDate(d[\"date\"]);\n return {name: d[\"State\"] , date, year:d[\"Year\"],month:d[\"Month\"], monthnum: +d[\"Month_num\"], state: d[\"State Name\"], Indicator: d[\"Indicator\"], value: +d[\"Data Value\"]};\n}))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"parseDate = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"import {SummaryTable} from '@observablehq/summary-table'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"// Modified from {toc} from \"@mbostock/toc\"\n\nfunction toc(selector = \"h3\", heading = \"Contents\") {\n return Generators.observe(notify => {\n let headings = [];\n\n function observed() {\n const h = Array.from(document.querySelectorAll(selector));\n if (h.length !== headings.length || h.some((h, i) => headings[i] !== h)) {\n notify(html`${heading}

${DOM.text(h.textContent)}`,\n {onclick: e => (e.preventDefault(), h.scrollIntoView())}\n );\n })}`);\n }\n }\n\n const observer = new MutationObserver(observed);\n observer.observe(document.body, {childList: true, subtree: true});\n observed();\n return () => observer.disconnect();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"