D3 Examples - Scatter Plot

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Module 5</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: beige;
            }
​
            svg {
                background-color: white;
            }
​
            }
​
            h1 {
                font-size: 24px;
                font-family: sans-serif;
                margin: 0;
            }
​
            p {
                font-family: sans-serif;
                font-size: 14px;
                margin: 10px 0 0 0;
            }
​
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 9px;
            }
​
            
            circle:hover {
                fill: blue;
            } /* fill with some color when the mouse is passing through */
            
​
        </style>
    
    </head>
    
    <body>
​
        <h1>Scatter Plot - Module 5</h1>
​
        <p> Scatter Plot showing the expectancy of life vs. the number of years of education. </p> 
​
        <script type="text/javascript">
​
                
​
            var w = 400;
            var h = 500;
​
            //padding (margins): setting a room for the axis
​
            var padding = [20,10,20,50]; // Top, right, bottom, left
​
            //setting the domain
​
            var xscale = d3.scale.linear().range([ padding[3], w - padding[1] ]);
​
            var yscale = d3.scale.linear().range([ padding[0], h - padding[2] ]);
            
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            var xAxis = d3.svg.axis().scale(xscale).orient("bottom").ticks(15); //ticks: add recomendations to d3, for example the number of "divisions" in the x axis
​
            var yAxis = d3.svg.axis().scale(yscale).orient("left");
​
            //If you need to format the axis with percentages use this:
​
            /* .tickFormat (function(d){
                   return d + "%";
            });*/
​
​
            d3.csv("betterlifeindex.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(+a.lifeExpectancy, +b.lifeExpectancy);                 
​
                });
​
                //setting the domains
​
                xscale.domain([ 
                    d3.min(data, function(d) {
                        return +d.lifeExpectancy;
                    }), 
                    d3.max( data, function(d){
                        return +d.lifeExpectancy;
                    })
                ]);
​
                // using max and min to avoid that the points acumulate in ust one point of the graphic
                //set as the first number of the scale the max and the last one, the min (for y axis) - the first number in the top originally starts in 0 
​
                yscale.domain([
                    d3.max( data, function(d){
                        return +d.yearsInEducation;
                    }),             
                    d3.min(data, function(d) {
                        return +d.yearsInEducation;
                    }) 
                ]);
​
                
                var circles = svg.selectAll("circle").data(data).enter().append("circle");
​
​
​
                circles.attr("cx", function(d){
                    return xscale(d.lifeExpectancy);
                })
                    .attr("cy", function(d, i) { //set where each bar is going to beggining
                        return yscale(d.yearsInEducation);
                    })
                    .attr("r", 0.1)                 
                    .attr("fill", "firebrick")
                    .append("title")
                    .text(function(d) {
                        return d.country + "'s life expectancy and years of education is, respectively, " + d.lifeExpectancy + " and " + d.yearsInEducation;
                    })
​
                circles.sort(function(a, b) {
                        return d3.ascending(+a.lifeExpectancy, +b.lifeExpectancy);
                    })
                    .transition()
                    .delay(function(d, i) {
                        return i * 50; //delay for the transition happens
                    })
                    .duration(2000).attr("r",4); //setting transition (obs: the durations is in ms)
​
​
                svg.append("g").attr("class", "x axis").attr("transform", "translate (0," + (h - padding[2]) + ") ").call(xAxis);
​
                svg.append("g").attr("class", "y axis").attr("transform", "translate(" + (padding[3] - 5) + ",0)").call(yAxis);
​
            });
​
​
        </script>
​
    </body>
</html>
    