NY_Death_Interactive

This dataset is about the leading causes of death by sex and ethnicity in New York City in since 2007, the raw json file can be found here.

More about this theme click this link.

This line chart presents the top 5 causes of death each year.

Chart code forked from d3noob’s block.

Resize inspired by connieGao0819’s Block and Qingquan "Q" Zhao’s Block. Text resize inspired by Curran Kelleher’s Block.

This interactive vis use highlighting as technique, hover on text or line, the selected disease will increase opacity and stroke width.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>New York City Leading Causes of Death</title>
    <style>
        body {
            font: 12px Arial;
    	}

path {
            stroke: steelblue;
/*            stroke-width: 2;*/
            fill: none;
        }

svg {
            padding-top: 10px;
            padding-left: 50px;
        }

.axis path,
        .axis line {
            fill: none;
            stroke: grey;
            stroke-width: 1;
            shape-rendering: crispEdges;
        }

.legend {
/*            font-size: 10px;*/
            font-weight: bold;
            text-anchor: middle;
        }
    </style>
</head>
<body>
<div id="chart"></div>

var chartDiv = document.getElementById("chart"),
        svg = d3.select(chartDiv).append("svg"),
        xAxis = svg.append("g"),
        yAxis = svg.append("g"),
        g = svg.append("g");

function mouseOver(className) {
        d3.selectAll("." + className)
        .style("opacity", 1.0)
        .style("stroke-width", 4)
        .style("font-size", "18px");
    }

function mouseOut(className) {
        d3.selectAll("." + className)
        .style("opacity", 0.8)
        .style("font-size", "10px")
        .style("stroke-width", 2);
    }

function redraw() {

var chartDivWidth = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth,
            chartDivHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

var margin = {top: 30, right: 20, bottom: 70, left: 50},
            width = chartDivWidth - margin.left - margin.right,
            height = chartDivHeight - margin.top - margin.bottom;

var parseDate = d3.timeParse("%Y");

var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);

var numline = d3.line()
            .x(function (d) {
                return x(d.Year);
            })
            .y(function (d) {
                return y(d.Deaths);
            });

svg
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

d3.csv("NY_Death.csv", function (error, data) {
            data.forEach(function (d) {
                d.Year = parseDate(d.Year);
                d.Deaths = +d.Deaths;
            });

x.domain(d3.extent(data, function (d) {
                return d.Year;
            }));
            y.domain([0, d3.max(data, function (d) {
                return d.Deaths;
            })]);

var dataNest = d3.nest()
                .key(function (d) {
                    return d.Cause;
                })
                .entries(data);

var color = d3.scaleOrdinal(d3.schemeCategory10);

legendSpace = width / dataNest.length;

dataNest.forEach(function (d, i) {

var path = g.selectAll("#tag" + d.key.replace(/\s+/g, "")).data([data]),
                    text = svg.selectAll("#text" + d.key.replace(/\s+/g, "")).data([data]);

path.exit().remove();

path.enter()
                    .append("path")
                    .attr("class", "line")
                    .attr("stroke-width", 2)
                    .style("stroke", function () {
                        return d.color = color(d.key);
                    })
                    .style("opacity", 0.8)
                    .attr("class", d.key.replace(/\s+/g, ""))
                    .attr("id", "tag" + d.key.replace(/\s+/g, ""))
                    .merge(path)
                    .attr("d", numline(d.values))
                    .on("mouseover", function(d){
                        mouseOver(this.className.baseVal)
                    })
                    .on("mouseout", function(d){
                        mouseOut(this.className.baseVal);
                    });

text.enter().append("text")
                    .style("opacity", 0.8)
                    .style("font-size", "10px")
                    .attr("class", "legend")
                    .attr("class", d.key.replace(/\s+/g, ""))
                    .attr("id", "text" + d.key.replace(/\s+/g, ""))
                    .text(d.key)
                    .merge(text)
                    .attr("x", (legendSpace / 2) + i * legendSpace)
                    .attr("y", height + (margin.bottom / 2) + 5)
                    .style("fill", function () {
                        return d.color = color(d.key);
                    })
                    .on("mouseover", function(d){
                        mouseOver(this.className.baseVal)
                    })
                    .on("mouseout", function(d){
                        mouseOut(this.className.baseVal);
                    });

});

xAxis
                .merge(xAxis)
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x));

yAxis
                .merge(yAxis)
                .attr("class", "axis")
                .call(d3.axisLeft(y));

});
    }

redraw();
    window.addEventListener("resize", redraw);

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js