D3 Examples - Aggregate information about homelessness in the USA by state over time + random gray dots.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Loading CSV Data with D3</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
​
<p>Random grey dots: Some code here borrowed from the awesome <a href="https://jfire.io/animations/">John Firebaugh</a>.</p>
​
<script type="text/javascript">
​
    var index = 0;
    var width = 100, height = 100,
            cols = 11;
    var scale = d3.scale.ordinal()
            .domain(d3.range(0, cols))
            .rangePoints([0, width], 2);
    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .style("background", "white");
    var data = d3.range(0, cols * cols)
            .map(function(d) {
                return { x: d % cols, y: ~~(d / cols) };
            });
    var nextColor = function() {
        var colors = ['#d3d3d3','#bdbdbd','#a8a8a8','#939393','#7e7e7e','#696969','#545454','#3f3f3f','#2a2a2a','#151515','#000000'];
        //['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
        var color = colors[index % colors.length];
        index += 1;
        return color;
    };
    var randomSize = function() {
        return Math.floor((Math.random() * 4));
    };
    var dots = svg.selectAll("circle")
            .data(data)
            .enter().append("circle")
            .attr("fill", nextColor)
            .attr("cx", function(d) { return scale(d.x); })
            .attr("cy", function(d) { return scale(d.y); })
            .attr("r", randomSize);
​
    function repeat() {
        dots.transition()
                .ease("linear")
                .duration(5000)
                .attr("r", randomSize)
                .transition()
                .delay(30)
                .attr("r", randomSize)
                .each("end", function(d, i) { if (i === 0) setTimeout(repeat, 10); });
    }
    setTimeout(repeat, 10);
</script>
<script type="text/javascript">
​
    //Load in contents of CSV file
    d3.csv("pit_states_over_years_total.csv", function(data) {
​
        //Now CSV contents have been transformed into
        //an array of JSON objects.
​
        //Log 'data' to the console, for verification.
        console.log(data);
​
    });
​
​
</script>
​
</body>
</html>
    