D3 Examples - Data Visualization and Infographics with D3

xxxxxxxxxx
 
<!doctype html>
<html lang="en">    
    <head>
        <meta charset="utf-8">
        <title>Exercise 3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            body {
                background-color: #AED7FF; 
            }
            svg {
                background-color: #AED7FF;
            }
​
            rect {
                fill:   #04529C;
                stroke: #04529C;
            }
​
            /* Add transparent hover interactivity */
            rect:hover { 
                fill: rgba(4, 82, 156, 0.8);
            }
        </style>
    </head>
    <body>
        <h2>Golden State Warriors Players by PER</h2>
​
        <script type="text/javascript">
​
            var w = 800; 
            var h = 600;
            var barSpacing = 25;
            var barHeight = barSpacing - 5;         // set the height of the bar in relation to space between bars
            var dataset; 
​
            // set reference to svg
            var svg = d3.select("body")
                        .append("svg")
                        .attr({
                            width: w, 
                            height: h
                        });
​
            // load CSV file
            d3.csv("goldenStateWarriors.csv", function(data) {
​
                // CSV has been loaded and transformed into array of JSON objects
                // Logging the data to the console for verification
                console.log(data);
​
                // to use data outside of function
                var dataset = data;
​
                // sort dataset in descending order by PER
                data.sort(function(a,b) {
                    return d3.descending(a.PER, b.PER);
                });
​
                // save reference to all rectangles
                var rects = svg.selectAll("rect")
                            .data(data)
                            .enter()
                            .append("rect");
​
                // iterate through array of rectangles and set attributes to rectangles
                rects.attr({
                    x: 0, 
                    y: function(d,i) {return i * barSpacing;},
                    width: function(d) {return d.PER * 30;},
                    height: barHeight,
                    // fill: "#04529C",
                    // create gradient fill as a function of the datum (PER)
                    // fill: function(d) {return "rgb(4, 82, " + d + ")";},
                    // stroke: "#04529C"
                }); 
​
                // append title to add tooltip interactivity
                rects.append('title')                   
                    .text(function(d) {
                        return d.Player + "'s PER is " + d.PER;
                }); 
​
                // // store reference to all labels
                // var labels = svg.selectAll("text")
                //  .data(data)
                //  .enter()
                //  .append("text");
​
                // labels.text(function(d) {return d;})
                //  .attr({
                //      x: function(d,i) {return d.PER * 30;},
                //      y: function(d,i) {return i * barSpacing;}
                //  });
​
            });
​
        </script>
​
    </body>
</html> 
    