Week 5 - Scatterplot Fix - Josh's

forked from CafeConVega's block: Week 5 - Scatterplot Fix

<!DOCTYPE html>

<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>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js