3f:null 40:["$","title",null,{"children":"Leading Causes of Death by State | Chase Lear | Observable"}] 46:T98d,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); const yearsText = html` 1999 `; svg.append("g").attr("transform", "translate(610,20)"); //state svgs svg .append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", (d) => { let deathArray = getDeathData(d.properties.name, yearsSlider.value); let colorScale = d3 .scaleLinear() .domain([ maxOverallAgeAdjustedDeathRate / 2, maxOverallAgeAdjustedDeathRate ]) .range(["purple", "pink"]); return colorScale(deathArray[0].AADR); }) .attr("d", path) .on("mouseover", function (d, i) { d3.select(this) .transition() .duration("50") .attr("fill", (d) => { let deathArray = getDeathData(d.properties.name, yearsSlider.value); let colorScale = d3 .scaleLinear() .domain([ maxOverallAgeAdjustedDeathRate / 2, maxOverallAgeAdjustedDeathRate ]) .range(["white", "darkblue"]); return colorScale(deathArray[0].AADR); }); }) .call(attachTooltip) .on("mouseout", function (d, i) { d3.select("#tooltip").classed("hidden", true); d3.select(this) .transition() .duration("50") .attr("fill", (d) => { let deathArray = getDeathData(d.properties.name, yearsSlider.value); let colorScale = d3 .scaleLinear() .domain([ maxOverallAgeAdjustedDeathRate / 2, maxOverallAgeAdjustedDeathRate ]) .range(["purple", "pink"]); return colorScale(deathArray[0].AADR); }); }); //dividing paths svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); function updateGraph() { const numDays = +yearsSlider.value; yearsText.innerText = numDays; } yearsSlider.addEventListener("input", updateGraph); return html` ${yearsSlider} ${yearsText} ${svg.node()} `; }47:Tde4,chart2 = { let stateSelectorString = ``; const stateSelector = html`${stateSelectorString}`; let yearSelectorString = ``; const yearSelector = html`${yearSelectorString}`; let dataset = getDeathData("Alabama", 1999).splice(4); dataset.sort((a, b) => b.deaths - a.deaths); const w = 800; const h = 600; const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", w) .attr("height", h); var xScale = d3 .scaleLinear() .domain([ d3.min(dataset, (d) => d.deaths), d3.max(dataset, (d) => d.deaths) ]) .rangeRound([0, w - 100]); var yScale = d3 .scaleBand() .domain(dataset.map((d) => d.cause)) .rangeRound([20, h - 20]); const colorScale = d3 .scaleLinear() .domain(xScale.domain()) .range(["pink", "red"]); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); // AXES const xAxisGroup = svg .append("g") .attr("class", "axis") .attr("transform", `translate(210, ${h - 20})`) .call(xAxis.tickFormat(d3.format(".0s"))); const yAxisGroup = svg .append("g") .attr("class", "axis-left1") .attr("transform", `translate(210,0)`) .call(yAxis); const updateChartType = (newState, newYear) => { dataset = getDeathData(newState, newYear).splice(3); xScale.domain([0, d3.max(dataset, (d) => d.deaths)]); yScale.domain(dataset.map((d) => d.cause)); colorScale.domain(xScale.domain()).range(["purple", "pink"]); xAxisGroup.transition().duration(1000).ease(d3.easeLinear).call(xAxis); yAxisGroup.transition().duration(1000).ease(d3.easeLinear).call(yAxis); svg .selectAll("rect") .data(dataset, (d) => d.deaths) .join( (enter) => enter .append("rect") .attr("y", (d) => yScale(d.cause)) .attr("width", 1) .attr("x", 210) .transition() .duration(1000) .ease(d3.easeLinear) .attr("x", 210) .attr("y", (d) => yScale(d.cause)) .attr("width", (d) => xScale(d.deaths)) .selection() .attr("height", 30) .attr("fill", (d) => colorScale(d.deaths)), // UPDATE the below (update) => update // .attr('width', 1) .transition() .duration(1000) .ease(d3.easeLinear) .attr("x", 210) .attr("y", (d) => yScale(d.cause)) .attr("width", (d) => xScale(d.deaths)) .attr("height", 30) .attr("fill", (d) => colorScale(d.deaths)), (exit) => exit //.attr('width', d => xScale(d.deaths)) .transition() .attr("width", 0) .duration(1000) .ease(d3.easeLinear) .remove() ); }; updateChartType("Alabama", 1999); d3.select(stateSelector).on("change", () => { updateChartType(stateSelector.value, yearSelector.value); }); d3.select(yearSelector).on("change", () => { updateChartType(stateSelector.value, yearSelector.value); }); return html` ${stateSelector} ${yearSelector} ${svg.node()} `; }48:T461,html`

Findings

A more interesting question perhaps might be, when you hear about people dying in your own life, which causes seem the most common to you? Do they measure up to what you see here?

Forgive me for using the word, but when we use the word 'popularity' in the context of an entire society, we tend to think of it as an evaluation that transcends age groups. In the context of this set of data, and looking at the first visualization, we might see that the most 'popular' causes of death aren't exactly the ones that happen the most, but rather the ones that happen to the most diverse groups of people - specifcally refering to age groups.

I see an upside and a downside to what is being displayed here. To start with the downside first, it doesn't appear that we are getting over the reasons for the majority of our deaths any time soon, and suicide seems to be on the rise. The upside however, is we seem to be dying from those causes at a lower rate as time moves forward. Which you can clearly see in the shading getting lighter overall as the years progress.

`49:T49f,html`

The Development Process

Creating these charts involved importing an svg group of paths containing all the states, binding that data to d3, and then creating event handlers for those paths to display tooltips(conatining more bar graphs) as well as shading them blue for visual aid on hover.

The challenge this posed to me was the way I had hop from one function to another in order to get my data on the element I wanted. I tried my best to get as much of the data as I could into the first graph, to get the grand scheme of the narrative; then to use the second graph more exploratively, and to look at more nuances between states, years, and causes.

It took a while for me to figure out how I was going to refactor the data after cleaning it and renanaming some of the cause titles. I started with creating new object types in loops, then using array methods extensively, but the more simpler conlcusioin I arrived at was just creating a function that returns a fraction of the dataset at a specified year and state. Because there are only 50 state names, I decided to hard-code an array to use for indexing. Here's what it looks like:

`4a:T408,html`

I reordered the dataset like this and intentionally let the national total data points in there so as to easily use the total by simply adding [0] to the end of my function call or easily removing it by adding .splice(0) to it. Also, because my hard-coded array of state names doesnt include 'United States', no conflictions seem to happen. (but if i wanted to create a data point for the whole country, it would be as easy as adding 'United States' to that array.

The real reason the hard-coded state names were useful was to easily bride the complicated topojson map svg to the death cause data I wanted to display.

With the functions I've created, this analysis could easily be adapted to include state to state comparisons, and with a very similar function to getDeathData, one could be implemented to compare causes instead of states as well.

Here's the fully parsed dataset for any additional reference as well as the state names and the topojson object used to draw the map:

`4b:T453,function attachTooltip (selection) { selection .on('mousemove', function (d, i) { const [x, y] = d3.mouse(d3.select(this).node()); let chartX; let chartY; if(x d.deaths)]) .rangeRound([0, w - 150]); const yScale = d3 .scaleBand() .domain(dataset.map((d) => d.cause)) .rangeRound([20, h - 20]); const colorScale = d3 .scaleLinear() .domain([dataset[0].deaths, dataset[dataset.length - 1].deaths]) .range(["purple", "pink"]); barChart .selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", 140) .attr("y", (d) => yScale(d.cause)) .attr("width", (d) => xScale(d.deaths)) .attr("height", 20) //.attr('fill', (d) => `hsl(${colorScale(d.deaths)},100%,80%)`); .attr("fill", (d) => colorScale(d.deaths)); // AXES barChart .append("g") .attr("class", "axis") .attr("transform", `translate(140, ${h - 20})`) .call(d3.axisBottom(xScale).ticks(3)); barChart .append("g") .attr("class", "axis-left2") .attr("transform", `translate(140,0)`) .call(d3.axisLeft(yScale)); // selection.append(barChart); }4d:[{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1616208264267.485,"size":82031},{"id":"2c2cbe0026ac5b265bf620c1690e9e96f10055c654c739389a78afa02d0e042442baa7f11669adec56333a4f4a9cd59ded2d4bf83d4d1a4ea28d1700e81e1bdf","href":"https://static.observableusercontent.com/files/2c2cbe0026ac5b265bf620c1690e9e96f10055c654c739389a78afa02d0e042442baa7f11669adec56333a4f4a9cd59ded2d4bf83d4d1a4ea28d1700e81e1bdf","name":"leading_cause_death-csv.csv","type":"text/csv","lastModified":1616349481745.991,"size":1062696}] 44:{"id":"3e3d84ac1349b638","slug":"leading-causes-of-death-by-state","title":"Leading Causes of Death by State","thumbnail":"8e5117f4303c770d399c914f4bf09faf456cd6a23ddd0816e52e0f707a8e8829","access_level":"public","create_time":"$D2021-03-20T02:21:34.810Z","update_time":"$D2022-10-04T19:46:38.457Z","view_time":null,"first_public_time":"$D2021-09-02T03:43:39.479Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"09ac17aeccb25e75","login":"surelynotchase","name":"Chase Lear","avatar_url":"https://avatars-next.observableusercontent.com/23ac146e4c9b56fa71cc52fdecf2c0b35bf6cccc2f42b6d4c5c7aac7a6ad4106","tier":"starter_2024","bio":"Hey there thanks for checking out my work, I hope you find something interesting or even make an improvement to one of my notebooks. Feel free to contact me with any questions.","following":false},"version":1642,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"56ec82b57e34eaab","login":"surelynotchase","name":"Chase Lear","avatar_url":"https://avatars-next.observableusercontent.com/23ac146e4c9b56fa71cc52fdecf2c0b35bf6cccc2f42b6d4c5c7aac7a6ad4106","tier":null,"bio":"Hey there thanks for checking out my work, I hope you find something interesting or even make an improvement to one of my notebooks. Feel free to contact me with any questions.","following":false}],"members":[{"type":"individual","id":"56ec82b57e34eaab","login":"surelynotchase","name":"Chase Lear","avatar_url":"https://avatars-next.observableusercontent.com/23ac146e4c9b56fa71cc52fdecf2c0b35bf6cccc2f42b6d4c5c7aac7a6ad4106","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Leading Causes of Death by State","cells":[{"id":0,"value":"html`

Leading Causes of Death by State

States darkened by their relative Age Adjusted Death Rate (AADR)
Hover each state to see the top causes of death
Move the slider to view data from different years (1999-2013)

The Data

\n\"Mapping Death Causes in US States\" on Kaggle.com\n
\n
\n\n\n\n

Age Adjusted Death Rate

This map of the US shows the distribution of the Age Adjusted Death Rate (AADR) over the course of little over a decade. Darker stats represent the higher rates, and the lighter states represent lower rates. In 1999 for example, Mississippi is the highest with a death rate of 1043 per hundred thousand inhabitants. These figures are adjusted to account for disproportionate deaths to elderly people, to give a more practical sense of how much the average person is dying in differnt states.

\n
\n

The highest state AADR thoughout the country (for all causes of death) is very close to this figure. Here's how it's parsed out using this dataset:

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"maxOverallAgeAdjustedDeathRate = parseInt(dataset.filter(item=>item.state != 'United States').sort((a,b) => {return b.AADR-a.AADR})[0].AADR); //index 0 to get the item at the top of the sorted list (not including national total)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"html`\n

Top 6 Causes of Death

The top 6 causes of death in each state seem to be very consistent, with the only profound differences being whether cancer or heart disease takes the lead. It might be easier to appreciate the magnitude of the difference between heart disease and the rest of the common causes without looking deeper into the comprehesive list. This is where the second chart is helpful.

\n
\n

\nBelow, we have the causes of death scaled again with the maximum being only the 4th highest cause of death. comparing the differences between the causes on the first set of bar charts to the second can help one see that that heart disease and cancer are in a completely different ballpak when it comes to predicting death.

Other Causes of Death by State

View the other most common causes of death after the first 3

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"//returns array of 3 point dataObjects for a specific state in a specific year\nfunction getDeathData(state,year){\nreturn dataset\n .filter(item=>item.state == state)\n .filter(item=>item.year == year)\n .map((item)=>{\n return {\n cause: item.cause,\n AADR: parseFloat(item.AADR),\n deaths: parseInt(item.deaths)\n }\n })\n .sort((a,b)=>{\n return b.deaths -a.deaths\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1580,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"dataset = d3.csvParse(dataFile, (row) => ({\nyear: row.YEAR,\ncause: row.CAUSE_NAME,\nstate: row.STATE,\ndeaths: row.DEATHS,\nAADR:row.AADR\n\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"stateNames = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','District of Columbia','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming']\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"html`

And here's the remaining UI generation:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"w = 975 //\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"h=610","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"yearsSlider = html`\n \n `;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"dataFile = await FileAttachment(\"leading_cause_death-csv.csv\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3@5\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 45:"$44:body"