D3 Examples - Barchart D3

xxxxxxxxxx
 
</html><!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="utf-8">
        <title>Barchart of Number of Diseases</title>
        <script src = "https://d3js.org/d3.v4.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <h3> Barchart of Diseases and Count </h3>
        <script type = "text/javascript">
            //Width and height"
            var w = 700;
            var h = 500;
            var barPadding = 1;
            var padding = 100;
​
            var xScale = d3.scaleBand();
                
            var yScale = d3.scaleLinear();
​
            var yAxScale = d3.scaleLinear();
            
            var yAxis = d3.axisLeft()
                            .scale(yAxScale)
                            .ticks(7);
​
​
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width",w)
                        .attr("height",h);
​
​
            var rowConverter = function(d) {
                return {
                    number: parseInt(d.number),
                    disease: d.disease
                }
            }
​
            var dataset;
            //var max = 0;
​
            d3.csv("health.csv", rowConverter, function(data) {
                dataset = d3.nest()
                    .key(function(d) { return d.disease; })
                    .rollup(function(v) { return d3.sum(v, function(d) { return d.number; })})
                    .entries(data);
​
​
​
                xScale.domain(d3.range(dataset.length))
                        .rangeRound([padding,w-padding])
                        .paddingInner(0.05);
​
                yScale.domain([0,d3.max(dataset, function(d) { return d.value})])
                        .range([padding, h - padding]);
​
                yAxScale.domain([0,d3.max(dataset, function(d) { return d.value})])
                        .range([h - 5, padding]);
​
​
                svg.selectAll("rect")
                    .data(dataset)
                    .enter()
                    .append("rect")
                    .attr("x", function(d, i) {
                        return xScale(i);
                    })
                    .attr("y", function(d) {
                        return h - yScale(d.value);
                    })
                    .attr("width", xScale.bandwidth())
                    .attr("height", function(d) {
                        return yScale(d.value);
                    });
                svg.selectAll("text")
                    .data(dataset)
                    .enter()
                    .append("text")
                    .text(function(d) {
                        return d.key;
                    })
                    .attr("text-anchor", "middle")
                    .attr("x", function(d, i) {
                        return xScale(i) + xScale.bandwidth() / 2;
                    })
                    .attr("y", function(d) {
                        return h - yScale(d.value) + 14;
                    })
                    .attr("font-family", "sans-serif")
                    .attr("font-size", "11px")
                    .attr("fill", "white");
​
               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");
​
​
            });
​
​
                
​
​
​
        </script>
    </body>
</html>
    