D3 Examples - Horizontal bars with axis

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Week 3</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
​
    <style type="text/css">
        h1 {
            font-family: sans-serif;
            color: Black;
            font-size: 24px;
        }
​
        p {
            font-size: 14px;
            margin: 10px 0 0 0;
            font-family: sans-serif;
        }
​
        rect:hover {
            fill: darkgreen;
        }
​
        .axis path,
        .axis line {
            fill: none;
            stroke: gray;
            shape-rendering: crispEdges;
        }
            
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
​
        .y.axis path,
        .y.axis line {
            opacity: 0;
        }
            
    </style>
</head>
<body>
​
    <h1>United States Government Outlays - <span name="year"></span></h1>
​
    <p>Source: "Table 4.1—Outlays by Agency: 1962–2020" <a href=https://www.whitehouse.gov/omb/budget/Historicals>OMB.gov</a>  In billions of dollars</p>
​
    <form>
        <p>Choose year: <select class="select" /></p>
    </form>
​
    <script type="text/javascript">
​
        d3.csv("OutlaysByAgency1960_2020.csv", function (data) {
            console.log(data);
​
            for (i = 1962; i < 2021; i++) {
                data.forEach(function (d) {
                    if (+d[i] < 0)
                        d[i] = 0;
                    else
                        d[i] = d[i] / 1000;
                });
            }
​
            var years = [];
            // It would be better to just read the fields..
            for (i = 1962; i < 2021; i++) {
                if (i < 2015)
                    years.push(i);
                else
                    years.push(i + " estimate");
            }
​
            var select = d3.select('select').on('change', changeYear);
​
            d3.select('select')
                .selectAll('option')
                .data(years)
                .enter()
                .append('option')
                .text(function (d) {
                    return d;
                })
                .attr("value", (function (d, i) {
                    return i;
                }));
​
            select.property("value", '52');
            drawChart(years[52]);
​
            function drawChart(year) {
                // Show the selected year in the title
                d3.select("span").text(year);
​
                var
                    width = 1000
                    , height = 600
​
                    ,topPad = 40
                    ,rightPad = 0
                    ,bottomPad = 0
                    ,leftPad = 10;
​
                // Function to add columns to numbers 
                var addCommas = d3.format(",d");
​
                d3.select("svg").remove();
                var svg =
                    d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);
​
                // Sort descending on selected year
                data.sort(function (a, b) {
                    return +b[year] - +a[year];
                });
​
                var widthScale = d3.scale.linear()
                    .domain([0, d3.max(data, function(d) { return +d[year]; }) ]) 
                    .range([0, width - 20]);
​
                var heightScale = d3.scale.ordinal()
                    .domain(data.map(function (d) { return d['Department or other unit']; }))
                    .rangeRoundBands([topPad, height], 0.1);
​
                var xAxis = d3.svg.axis()
                    .scale(widthScale)
                    .orient("top")
                    .ticks(5);
​
                var yAxis = d3.svg.axis()
                    .scale(heightScale)
                    .orient("right");
                    
                svg.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect")
                    .attr("x", leftPad)
                    .attr("width", function (d) {
                        var num = +d[year];
                        if (num < 0)
                            return 0;
                        else
                            return widthScale(num);
                    })
                    .attr("y", function (d) {
                        return heightScale(d['Department or other unit']);
                    })
                    .attr("height", heightScale.rangeBand())
                    .style("fill", "lightgreen")
                    .append("title")
                    .text(function (d) {
                        return d[year] + " billion dollars for " + d['Department or other unit'] + " in " + year;
                    });
                
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + leftPad + "," + (topPad - 5) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(5,0)")
                    .call(yAxis);
            }
​
            function changeYear() {
                var yearIndex = d3.select('select').property('value');
                drawChart(years[yearIndex]);
            };
        });
​
    </script>
</body>
</html>
    