D3 Examples - Week #3 Exercise

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Week #3 Exercise</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: white;
            }
​
            svg {
                background-color: white;
            }
            rect:hover{
                fill: orange;
            }
​
        </style>
    </head>
    <body>
​
        <script type="text/javascript">
​
            var w = 800;
            var h = 350;
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("class", "chart")
                        .attr("width", w)
                        .attr("height", h);
​
​
            d3.csv("Parisian Associations_2.csv", function(error, data) {
                if (error) {
                    console.log(error);
                } else {
​
                    //data.sort(function(a, b) {
                        //return d3.ascending(a.parisPostalCode, b.Members);
​
                        //If your numeric values aren't sorting properly,
                        //try commenting out the line above, and instead using:
                        //
                        //return d3.descending(b.parisPostalCode);
                        //
                        //Data coming in from the CSV is saved as strings (text),
                        //so the + signs here force JavaScript to treat those
                        //strings instead as numeric values, thereby fixing the
                        //sort order (hopefully!).
                    //});
​
                    console.log(data);
​
                    var rects = svg.selectAll("rect")
                                   .data(data)
                                   .enter()
                                   .append("svg:rect");
​
                    rects.attr("x", 0)
                         .attr("y", function(d, i) {
                            return i * 17;
                         })
                         .attr("width", function(d) {
                            return d.Members / 4000;
                         })
                         .attr("height", 15)
                         .attr("fill", "green")
​
                         // Title
                         .append("title")
                         .text(function(d) {
                            return "Paris - " + d.parisPostalCode + " > " + d.Members + " Members";
                         });
​
                    // svg.selectAll("text")
                    //    .data(data)
                    //    .enter()
                    //    .append("text")
                    //    .text(function(d){
                    //          return "Paris - " + d.parisPostalCode + " > " + d.Members + " Members";
                    //       })
                    //    .attr("x", function(d, i){
                    //          return (d.Members / 4000) + 10;
                    //    })
                    //    .attr("y", function(d, i) {
                    //      return i * 17 + 10;
                    //    })
                    //    .attr({
                    //       "font-family": "sans-serif",
                    //      "font-size": "11px",
                    //      "fill": "grey",
                    //      "font-weight": "bold"
                    //    });
​
                    //    rects.selectAll("line")
                    //         .data(x.ticks(10))
                    //         .enter().append("svg:line")
                    //         .attr("x1", 0)
                    //         .attr("x2", 10)
                    //         .attr("y1", 0)
                    //         .attr("y2", 120)
                    //         .attr("stroke", "#ccc");
                         
                }
            });
​
​
        </script>
​
    </body>
</html>
    