D3 Examples - Scatterplot with transitions

xxxxxxxxxx
 
<!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>
​
    <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:  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>
​
    <script type="text/javascript">
​
        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>
    