Horizontal bars with axis

<!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>

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>

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);

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js