Interactive: What kills Minneapolis residents?
Cancer, heart disease are on top
Published September 13, 2016
Cancer has overtaken heart disease as the
leading cause of death in 22 states, a trend that mirrors numbers in Minneapolis.
According to a
new Centers for Disease Control and Prevention report, cancer was the leading
cause of death in only two states — Minnesota and Alaska — in 2000. In 2014,
that number rose to 22 states.
In the state
of Minnesota, 7,571 people died of heart disease in 2014 — around 18 percent of
deaths.
A Minneapolis
Health Department report found that more residents die from cancer than from
any other cause including heart disease, which has been the leading cause of
death in the country since the early 1900s.
function dashboard(id, dData) { var barColor = "LightSteelBlue";
function segColor(c){
return {"<1 year":"#0066CC", "1-4 years": "#1A66C2", "5-14 years": "#3366B8", "15-24 years": "#4D66AD", "25-34 years": "#6666A3", "35-44 years": "#806699", "54-45 years": "#99668F", "55-64 years": "#B36685", "65-74 years": "#CC667A", "75-84 years": "#E66670", "85+ years": "#FF6666"} [c]; }
dData.forEach(function(d){d.total=d.total;});
function histoGram(fD){
var hG={}, hGDim = {t: 15, r: 2, b: 160, l: 30};
hGDim.w = 550 - hGDim.l - hGDim.r,
hGDim.h = 300 - hGDim.t - hGDim.b;
var hGsvg = d3.select(id).append("svg")
.attr("width", 500 + hGDim.l + hGDim.r)
.attr("height", 300).append("g")
.attr("transform", "translate(" + hGDim.l + "," + 50 + ")");
d3.select("svg").append("text")
.attr('x', hGDim.w/2)
.attr("y", 30)
.style("text-anchor", "middle")
.style("font-size", "large")
.style("font-family", "Oswald")
.style("z-index", 100000)
.text("What Kills Us: Leading Causes of Death in Minneapolis, 2014");
d3.select("svg").append("text")
.attr('x', hGDim.w/2)
.attr("y", 30)
.style("text-anchor", "middle")
.style("font-size", "large")
.style("font-family", "Oswald")
.style("z-index", 100000)
.text("");
d3.select("svg").append("text")
.attr('x', hGDim.w/2)
.attr("y", 43)
.style("text-anchor", "middle")
.style("font-size", "x-small")
.style("font-family", "Oswald")
.style("z-index", 100000)
.text("Source: Minneapolis Health Department");
// d3.select("svg").append("text")
// .attr('x', hGDim.w/2)
// .attr("y", 43)
// .style("text-anchor", "middle")
// .style("font-size", "x-small")
// .style("font-family", "Oswald")
// .style("z-index", 100000)
// .text("Source: Minneapolis Health Department 2014 ");
// create function for x-axis mapping.
var x = d3.scale.ordinal().rangeRoundBands([0, hGDim.w], 0.1)
.domain(fD.map(function(d) { return d[0]; }));
// Add x-axis to the histogram svg.
hGsvg.append("g").attr("class", "x axis")
.attr("transform", "translate(0," + hGDim.h + ")")
.call(d3.svg.axis().scale(x).orient("bottom"))
.selectAll("text")
.attr("dy", "-.7em")
.attr("dx", "-.7em")
.attr("transform", "rotate(-90)")
.style("font-size", "10px")
.style("text-anchor", "end");
// Create function for y-axis map.
var y = d3.scale.linear().range([hGDim.h, 0])
.domain([0, d3.max(fD, function(d) { return d[1]; })]);
// Create bars for histogram to contain rectangles and freq labels.
var bars = hGsvg.selectAll(".bar").data(fD).enter()
.append("g").attr("class", "bar");
//create the rectangles.
bars.append("rect")
.attr("x", function(d) { return x(d[0]); })
.attr("y", function(d) { return y(d[1]); })
.attr("width", x.rangeBand())
.attr("height", function(d) { return hGDim.h - y(d[1]); })
.attr('fill',barColor)
.on("mouseover",mouseover)// mouseover is defined below.
.on("mouseout",mouseout);// mouseout is defined below.
//Create the frequency labels above the rectangles.
bars.append("text").text(function(d){ return d3.format(",")(d[1]) + "%"})
.attr("x", function(d) { return x(d[0])+x.rangeBand()/2; })
.attr("y", function(d) { return y(d[1])-5; })
.attr("text-anchor", "middle")
.style("font-size", "13px");
function mouseover(d){
var st = dData.filter(function(s){ return s.cause == d[0];})[0],
nD = d3.keys(st.ages).map(function(s){ return {type:s, ages:st.ages[s]};});
// call update functions of pie-chart and legend.
pC.update(nD);
leg.update(nD);
}
function mouseout(d){
pC.update(tF);
leg.update(tF);
}
// create function to update the bars. This will be used by pie-chart.
hG.update = function(nD, color){
// update the domain of the y-axis map to reflect change in frequencies.
y.domain([0, d3.max(nD, function(d) { return d[1]; })]);
// Attach the new data to the bars.
var bars = hGsvg.selectAll(".bar").data(nD);
// transition the height and color of rectangles.
bars.select("rect").transition().duration(500)
.attr("y", function(d) {return y(d[1]); })
.attr("height", function(d) { return hGDim.h - y(d[1]); })
.attr("fill", color);
// transition the frequency labels location and change value.
bars.select("text").transition().duration(500)
.text(function(d){ return d3.format(",")(d[1]) + "%"})
.attr("y", function(d) {return y(d[1])-5; });
}
return hG;
}
// function to handle pieChart.
function pieChart(pD){
var pC ={}, pieDim ={w:350, h: 350};
pieDim.r = Math.min(pieDim.w, pieDim.h+ 30) / 2;
// create svg for pie chart.
var piesvg = d3.select(id).append("svg")
.attr("width", pieDim.w).attr("height", 400).append("g")
.attr("transform", "translate("+pieDim.w/2.1+","+pieDim.h/2+")");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1);
// create function to draw the arcs of the pie slices.
var arc = d3.svg.arc().outerRadius(pieDim.r - 10).innerRadius(0);
var pie = d3.layout.pie().sort(null).value(function(d) { return d.ages})
piesvg.selectAll("path").data(pie(pD)).enter().append("path").attr("d", arc)
.each(function(d) { this._current = d; })
.style("fill", function(d) { return segColor(d.data.type); })
.on("mousemove",mouseover).on("mouseout",mouseout);
pC.update = function(nD){
piesvg.selectAll("path").data(pie(nD)).transition().duration(500)
.attrTween("d", arcTween);
}
// Utility function to be called on mouseover a pie slice.
function mouseover(d){
// call the update function of histogram with new data.
hG.update(dData.map(function(v){
return [v.cause,v.ages[d.data.type]];}),segColor(d.data.type));
d3.select(this)
div.transition()
.duration(100)
.style("opacity", 1)
div .html(d.data.type)
.style("left", "810px")
.style("top", "325px");
}
//Utility function to be called on mouseout a pie slice.
function mouseout(d){
// call the update function of histogram with all data.
hG.update(dData.map(function(v){
return [v.cause,v.total];}), barColor);
d3.select(this)
div.transition()
.delay(50)
.duration(100)
.style("opacity", 0)
}
// Animating the pie-slice requiring a custom function which specifies
// how the intermediate paths should be drawn.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) { return arc(i(t)); };
}
return pC;
}
function legend(lD){
var leg = {};
// create table for legend.
var legend = d3.select(id).append("table").attr('class','legend').attr("transform", "translate("+200+","+0+")");
// create one row per segment.
var tr = legend.append("tbody").selectAll("tr").data(lD).enter().append("tr");
// create the first column for each segment.
tr.append("td").append("svg").attr("width", '8').attr("height", '8').append("rect")
.attr("width", '8').attr("height", '8')
.on("mouseover", mouseover)
.attr("fill",function(d){ return segColor(d.type); });
// create the second column for each segment.
tr.append("td").text(function(d){ return d.type;}).style("font-size", "12px");
// create the fourth column for each segment.
tr.append("td").attr("class",'legendPerc')
.text(function(d){ return getLegend(d,lD);}).style("font-size", "12px");
function mouseover(d){
var st = dData.filter(function(s){ return s.cause == d[0];})[0];
nD = d3.keys(st.ages).map(function(s){ return {type:s, ages:st.ages[s]};});
// call update functions of pie-chart and legend.
pC.update(nD);
}
// Utility function to be used to update the legend.
leg.update = function(nD){
// update the data attached to the row elements.
var l = legend.select("tbody").selectAll("tr").data(nD);
// update the percentage column.
l.select(".legendPerc").text(function(d){ return getLegend(d,nD);});
}
function getLegend(d,aD){ // Utility function to compute percentage.
return d3.format("%")(d.ages/d3.sum(aD.map(function(v){ return v.ages; })));
}
return leg;
}
// calculate total frequency by segment for all ages.
var tF = ['<1 year', '1-4 years', '5-14 years', '15-24 years', '25-34 years', '35-44 years', '54-45 years', '55-64 years', '65-74 years', '75-84 years', '85+ years'].map(function(d){
return {type:d, ages: d3.sum(dData.map(function(t){ return t.ages[d];}))};
});
// calculate total frequency by state for all segment.
var sF = dData.map(function(d){return [d.cause,d.total];});
var hG = histoGram(sF), // create the histogram.
pC = pieChart(tF), // create the pie-chart.
leg= legend(tF); // create the legend.
}
In
Minneapolis, 520 deaths were caused by cancer and 332 by heart disease in 2014.
The CDC study,
which examined nationwide numbers up to 2014, found that about 591,000 people
died of cancer that year; about 614,000 people died of heart disease.
Accidents,
lower respiratory disease and stroke are the third, fourth and fifth leading
causes of death in Minneapolis.