Scatterplot with transitions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Week 5</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:  1960 - 2020</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>

d3.csv("OutlaysByAgency1960_2020.csv", function (data) {
            //console.log(data);

var years = [];
            for (i = 1962; i < 2021; i++) {
               data.forEach(function (d) {
                    if (+d[i] < 0)
                        d[i] = 0;
                    else
                        d[i] = d[i] / 1000;
               });
               years.push(i);
            }

var departments = [];
            data.forEach(function (d) {
                departments.push(d['Department or other unit']);
            });
            console.log(departments);
                      
            drawChart();

function drawChart() {
               
                var w = 1000,
                    h = 500

var margin = {top: 10, right: 50, bottom: 50, left: 100};

var width = w - margin.left - margin.right,
                    height = h - margin.top - margin.bottom;
            
                var svg = d3.select("body").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                var circleData = [];
                years.forEach(function (year) {
                    data.forEach(function (d) {
                        circleData.push(new Array(d['Department or other unit'], +year, d[year]));
                    });
                });
                
                var colorScale = d3.scale.category20c();

var xScale = d3.scale.linear()
                    .domain([1960, 2020])
                    .range([0, width]);

var yScale = d3.scale.linear()
                    .domain([0, d3.max(circleData,
                        function (d) {
                            return +d[2];
                        })
                    ])
                    .range([margin.top + height, margin.top]);

var xAxis = d3.svg.axis()
				    .scale(xScale)
				    .orient("bottom")
                    .tickFormat(function (d) {
                        return d; // default has commas - don't want the  for years get rid of the commas in years 
                    })
					.ticks(10);

var yAxis = d3.svg.axis()
				    .scale(yScale)
					.orient("left");

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (height + margin.top) + ")")
					.call(xAxis);

svg.append("g")
					.attr("class", "y axis")
					.call(yAxis);

var circles = svg.selectAll("circle")
				    .data(circleData)
                    .enter()
					.append("circle");

circles
                    .attr("cx", function (d) { return xScale(d[1]); })
                    .attr("cy", function (d, i) { return yScale(d[2]); })
                    .attr("r", 0)
                    .attr("fill", function (d) {
                        return colorScale(departments.indexOf(d[0]));
                    })
                    .transition()
                    .delay(function (d, i) {
                        return ((departments.indexOf(d[0]) * 150) + (d[1] - 1960) * 20);
                    })
                    .duration(1000)
                    .attr("r", 5)

circles
                    .append("title")
				    .text(function (d) {
				        return 'In ' + d[1] + ', outlays for ' + d[0] + ' were ' + d[2];
				    });
            }
        });

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

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

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