D3 Examples - Week 5 - Scatterplot Fix

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->
​
<html lang="en">
​
<head>
    <meta charset="utf-8">
    <title>Formatting Ticks</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <style type="text/css">
        body {
            background-color: white;
            font-family: Helvetica, Arial, sans-serif;
        }
        
        h1 {
            font-size: 24px;
            margin: 0;
        }
        
        p {
            font-size: 14px;
            margin: 10px 0 0 0;
        }
        
        svg {
            background-color: white;
        }
        
        circle.dots {
            fill: steelblue;
          opacity: .7;
          stroke: black;
            
        }
        
        circle:hover {
            fill: orange;
        }
        
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
</head>
​
<body>
​
    <h1>Time for Leisure vs. Money</h1>
​
     <p>Better Life Index &ldquo;Life Satisfaction&rdquo; Household Net Financial Wealth vs. Time Devoted To Leisure and Personal Care. Source: <a href="https://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</p>
​
    <script type="text/javascript">
        // Scott is "cheating" and not using the full pattern for margins.
        // It is better to use the object style with margin.top, margin.right, etc.
​
        var fullwidth = 700;
        var fullheight = 600;
​
        var margin = {
            top: 20,
            left: 70,
            right: 50,
            bottom: 70
        }; //Top, right, bottom, left
​
        // what do you need to do to make the width and height for the chart?
        var height = fullheight - margin.top - margin.bottom;
        var width = fullwidth - margin.left - margin.right;
​
        var dotRadius = 5; // fix this to a nice value.
​
        // fill in the margin values here.
        var xScale = d3.scale.linear()
            .range([0, width]);
​
        // top to bottom:
        var yScale = d3.scale.linear()
            .range([height, 0]);
​
        //  Custom tick count if you want it.
        // Create your axes here.
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(10); // fix this to a good number of ticks for your scale later.
​
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left");
​
        var svg = d3.select("body")
            .append("svg")
            .attr("width", fullwidth)
            .attr("height", fullheight)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
        d3.csv("betterlifeindex.csv", function (data) {
​
            // look at the data file and pick 2 columns to contrast with each other.
​
            xScale.domain(
                d3.extent(data, function (d) {
                    return +d.householdNetFinancialWealth;
                }));
​
            yScale.domain(
                d3.extent(data, function (d) {
                    return +d.timeDevotedToLeisureAndPersonalCare;
                }));
​
            var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .classed("dots", true);
​
            // Circles in SVG have cx, cy, and r attributes. x location, y location, radius.
​
            circles.attr("cx", function (d) {
                    return xScale(+d.householdNetFinancialWealth);
                })
                .attr("cy", function (d) {
                    return yScale(+d.timeDevotedToLeisureAndPersonalCare);
                })
                .attr("r", dotRadius) // you might want to increase your dotRadius
                .style("fill", function (d) {
                    if (d.country === "United States") {
                        return "red";
                    } else {
                        return "grey";
                    }
                })
                .append("title")
                .text(function (d) {
                    return d.country;
                });
​
            // fix these translates so they use your margin and height width as needed
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
            
                svg.append("text")
                    .attr("class", "xlabel")
            .attr("transform", "translate(" + width/2 + " ," +
                        height + ")")
            .style("text-anchor", "middle")
            .attr("dy", "35")
            .text("Household Net Financial Wealth");
            
​
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);
            
            svg.append("text")
            .attr("class", "axis text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left) // you may need to adjust this
        .attr("x", 0 - (height / 2)) // you may need to adjust
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Time Devoted To Leisure And Personal Care");
            
​
        });
    </script>
​
</body>
​
</html>
    