D3 Examples - nations-scatterplot-v2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
​
    <style>
        body { 
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
​
        .title {
            font-family: "Georgia";
            font-size: 32px;
            fill: #000;
        }
​
        .axis {
            font-family: "Arial";
            font-size: 11px;
            fill: #808080;
        }
​
        .circle {
            fill-opacity: 0.65;
            stroke: #c0c0c0;
        }
​
        .domain{
            stroke: #c0c0c0;
        }
​
        .tick > line {
            stroke: #c0c0c0;
        }
    </style>
</head>
<body>
    <script>
        /*  Input: nations.json
            Output:     x-axis = income
                        y-axis = lifeExpectancy
                        radius = population
                        color  = region
​
            Bonus: use the raw data from class 3 and create the final dataset yourself. Add axes and labels.
            For extra practice: visualize the barley yield data. */
​
        var getAttrByYear = function(input, output, year, attr) {
            input[attr].forEach(function(d) { 
                if (d[0] === year) { 
                    return output[attr] = d[1];
                }
            });
        };
​
        var filterByYear = function(input, year) {
            var result = [];
​
            input.forEach(function(i) {
                var country = {
                    year: null,
                    country: null,
                    region: null,
                    income: null,
                    lifeExpectancy: null,
                    population: null
                }
​
                var getIncome = getAttrByYear(i, country, year, "income");
                var getLifeExpectancy = getAttrByYear(i, country, year, "lifeExpectancy");
                var getPopulation = getAttrByYear(i, country, year, "population");
                country.country = i.name;
                country.region = i.region;
                country.year = year;
                result.push(country);
            });
            return result;
        };
​
        var getMaxAttr = function(input, attr) {
            var result = 0;
            input.forEach(function(d) {
                d[attr].forEach(function(i) {
                    if (i[1] > result) {
                        result = i[1];
                    }
                });
            });
            return result;
        };
        
        d3.json("nations.json", function(error, data) {
            if (error) return error;
            console.log(data);      // original data
​
            // data
            newData = filterByYear(data, 1800);
            console.log(newData);   // filtered data
​
            // vars -----------------------------------------------------------
​
            var margin = { top: 20, right: 20, bottom: 20, left: 20 };
            var width = 960 - margin.left - margin.right;
            var height = 500 - margin.top - margin.bottom;
​
            // min-max
            var xExtent = d3.extent(newData, function(d) { return d.income });
            var yExtent = d3.extent(newData, function(d) { return d.lifeExpectancy });
            var rExtent = d3.extent(newData, function(d) { return d.population });
            var colorDomain = d3.nest().key(function(d) { return d.region }).object(newData);
            console.log("xExtent = ", xExtent, "yExtent = ", yExtent, "rExtent = ", rExtent);
            // console.log(colorRange);
            var xMax = getMaxAttr(data, "income");
            var yMax = getMaxAttr(data, "lifeExpectancy");
            var rMax = getMaxAttr(data, "population");
            console.log("xMax = ", xMax, "yMax = ", yMax, "rMax = ", rMax);
​
            // scales
            var xScale = d3.scaleLog()
                .domain(xExtent)
                .range([0, width + margin.left]);
            var yScale = d3.scaleLinear()
                .domain([0, yMax])
                .range([height, 0]);
            var rScale = d3.scaleSqrt()
                .domain([0, rMax])
                .range([0, 100]);
            var colorScale = d3.scaleOrdinal()
                .domain(colorDomain)
                .range(["LemonChiffon", "LightCyan", "Gainsboro", "Thistle", "MintCream", "MistyRose"]);
​
            // axes
            var x = d3.axisBottom()
                .scale(xScale)
                .ticks(10, ".0f");
            var y = d3.axisLeft()
                .scale(yScale);
​
            // graph ----------------------------------------------------------
​
            // svg
            var svg = d3.select("body")
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
​
            // circles
            var dataPts = svg.selectAll("circle")
                .data(newData)
                .enter()
                .append("circle")
                .attr("class", "circle")
                .attr("cx", function(d) { return xScale(d.income) })
                .attr("cy", function(d) { return yScale(d.lifeExpectancy) })
                .attr("r", function(d) { return rScale(d.population) })
                .attr("id", function(d) { return d.country })
                .attr("fill", function(d) { return colorScale(d.region) } );
​
            // axes
            var xAxis = svg.append("g")
                .call(x)
                .attr("transform", "translate(0, " + height + ")");
            var yAxis = svg.append("g")
                .call(y);
​
            // labels
            var xLabel = xAxis.append("text")
                .text("income per capita, inflation adjusted (dollars)")
                .attr("class", "axis")
                .attr("transform", "translate(" + (width + margin.left) + ", " + 0.5 * -margin.bottom + ")")
                .attr("text-anchor", "end");
            var yLabel = yAxis.append("text")
                .text("life expectancy (years)")
                .attr("class", "axis")
                .attr("transform", "translate(" + (margin.left * 0.85) + ", 0) rotate(-90)")
        });
    </script>
</body>
</html>
    