D3 Examples - linechart d3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="utf-8">
        <title>Line chart of disease over time</title>
        <script src = "https://d3js.org/d3.v4.min.js"></script>
        <style type="text/css">
​
​
        path {
            fill: none;
            stroke: slategrey;
        }
        </style>
    </head>
    <body>
        <h3> Linechart of Disease Count per Year </h3>
        <script type = "text/javascript">
            //Width and height"
            var w = 700;
            var h = 500;
            var barPadding = 1;
            var padding = 75;
​
            var xScale = d3.scaleLinear();
                
            var yScale = d3.scaleLinear();
            
            var xAxis = d3.axisBottom()
                            .scale(xScale)
                            .ticks(7);  
​
            var yAxis = d3.axisLeft()
                            .scale(yScale)
                            .ticks(7);
​
​
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width",w)
                        .attr("height",h);
​
            var line = d3.line();
​
​
            var rowConverter = function(d) {
                return {
                    number: parseInt(d.number),
                    year: parseInt(d.year)
                };
            }
​
            var dataset;
            
​
            d3.csv("health.csv", rowConverter, function(data) {
                dataset = d3.nest()
                    .key(function(d) { return d.year; })
                    .rollup(function(v) { return d3.sum(v, function(d) { return d.number; })})
                    .entries(data);
​
                console.log(dataset);
​
                xScale.domain([d3.min(dataset, function(d) {return d.key;}), d3.max(dataset, function(d) {return d.key;})])
                    .rangeRound([padding,w-padding]);
​
                yScale.domain([0,d3.max(dataset, function(d) { return d.value})])
                    .range([h - padding, padding]);
​
                line.x(function(d) {console.log(xScale(d.key));return xScale(d.key);})
                    .y(function(d) {console.log(yScale(d.value)); return yScale(d.value);});
​
​
                svg.append("path")
                    .datum(dataset)
                    .attr("class", "line")
                    .attr("d", line);
                
                svg.append("g") 
                    .attr("class", "axis") 
                    .attr("transform", "translate(0," + (h-padding) + ")") 
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(" + padding + ",0)")
                    .call(yAxis);
​
                svg.append("text") 
                    .attr("transform", "translate (" + 15 + "," + (h/2) + ") rotate(-90)")
                    .attr("text-anchor", "middle")
                    .text("Disease Count")
                    .attr("fill", "black");
​
                svg.append("text") 
                    .attr("x", w/2 )
                    .attr("y", h - 10)
                    .attr("text-anchor", "middle")
                    .text("Time")
                    .attr("fill", "black");
​
    
            });
​
​
        </script>
    </body>
</html>
    