D3 Examples - Touches Bar Chart

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>
​
    
        <script type="text/javascript">     
​
        var padding = 0;
        var lastPlayer;
​
        var svg = d3.select("body")
            .append("svg")
            .attr("width", 900)
            .attr("height", 2000);
​
​
            //Load in contents of CSV file
            d3.csv("TouchesData.csv", function(data) {
​
                var rects = svg.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect");
​
                rects.attr("x", 0)
                    .attr("y", function(d, i) {
                        if (d.Player !== lastPlayer) {
                            padding += 1;
                        }
                        lastPlayer = d.Player;
                        return i * 10 + (10 * padding);
                    })
                    .attr("width", function(d) {
                        return d.YScm / 4;
                    })
                    .attr("height", 8)
                    .style("fill",function(d) {
                        return d.Touches >= 420 ? "red" : "black";
                    });
            });
​
​
        </script>
​
    </body>
</html>
    