Week12: 3 Charts

energy.json

[{"Country":"Qatar","1971":7764.897774,"1972":7810.388335,"1973":10080.65526,"1974":8014.623062,"1975":12419.76961,"1976":8794.778975,"1977":9517.705763,"1978":8445.614474,"1979":13722.34998,"1980":14803.57598,"1981":16715.66157,"1982":17348.32745,"1983":16058.38798,"1984":16483.00546,"1985":15217.74809,"1986":15058.70568,"1987":14613.48083,"1988":14529.96049,"1989":14313.37272,"1990":13697.33755,"1991":14886.8802,"1992":15421.47945,"1993":15921.85443,"1994":15882.7212,"1995":16264.77639,"1996":16892.72932,"1997":19262.16886,"1998":19478.01749,"1999":19833.55268,"2000":18401.30221,"2001":20191.22075,"2002":21517.77934,"2003":21150.57359,"2004":22762.08038,"2005":19911.94063,"2006":19819.72446,"2007":18764.49144,"2008":16375.83174,"2009":15230.3672,"2010":15882.36677,"2011":16793.11832,"2012":18813.45132,"sum":654868.7752},
    {"Country":"Bahrain","1971":6380.357596,"1972":5960.211335,"1973":8483.540399,"1974":9000.916161,"1975":7996.355264,"1976":9581.250903,"1977":8187.114986,"1978":7843.399452,"1979":8813.309259,"1980":7794.491278,"1981":8294.952222,"1982":9071.024744,"1983":8503.038237,"1984":8828.776862,"1985":9916.54527,"1986":10814.77415,"1987":9518.006922,"1988":10487.16455,"1989":10241.97819,"1990":10549.27371,"1991":10105.28515,"1992":10838.75213,"1993":11146.94078,"1994":11558.47117,"1995":11401.67811,"1996":11080.70293,"1997":11963.16703,"1998":12204.43359,"1999":11704.4612,"2000":11912.82213,"2001":11760.838,"2002":11707.23705,"2003":11801.98006,"2004":11106.72918,"2005":11954.60627,"2006":11787.85363,"2007":11284.42733,"2008":11406.31327,"2009":10216.86133,"2010":9871.4219,"2011":9551.765908,"2012":9449.84879,"sum":422083.0784},
    {"Country":"Iceland","1971":4378.310318,"1972":4403.969647,"1973":5268.965745,"1974":5132.197074,"1975":5071.635341,"1976":5085.581002,"1977":5602.870166,"1978":5710.710084,"1979":6515.059694,"1980":6560.998168,"1981":7178.869364,"1982":7076.207988,"1983":7254.286281,"1984":7531.269963,"1985":7334.901928,"1986":7605.56378,"1987":7857.454883,"1988":7882.473773,"1989":7983.037508,"1990":8195.710014,"1991":7954.343922,"1992":7792.562544,"1993":8267.126742,"1994":8208.434672,"1995":8421.59062,"1996":8873.655714,"1997":8952.649671,"1998":9407.999358,"1999":10670.5398,"2000":11023.1646,"2001":11363.58117,"2002":11423.79566,"2003":11305.96053,"2004":11531.68718,"2005":11729.26931,"2006":13690.21535,"2007":15522.1494,"2008":16868.46831,"2009":16904.90394,"2010":16882.49943,"2011":17964.44357,"2012":17755.60621,"sum":392144.7204},
    {"Country":"Luxembourg","1971":11863.08959,"1972":12009.57011,"1973":12648.56042,"1974":13023.88959,"1975":10504.9812,"1976":10668.56744,"1977":10278.55755,"1978":11096.00367,"1979":10458.11286,"1980":9774.650556,"1981":8526.037374,"1982":8057.809999,"1983":7576.207121,"1984":8112.675479,"1985":8346.926421,"1986":8163.548751,"1987":7942.948078,"1988":8158.433525,"1989":8699.936356,"1990":8874.105015,"1991":9353.421189,"1992":9262.081979,"1993":9266.942575,"1994":8823.252466,"1995":7705.407158,"1996":7711.178707,"1997":7409.850995,"1998":7066.88486,"1999":7266.97253,"2000":7643.552601,"2001":7946.499066,"2002":8170.466745,"2003":8508.887806,"2004":9347.395191,"2005":9418.95227,"2006":9157.596633,"2007":8765.934087,"2008":8601.285173,"2009":7944.0459,"2010":8321.891773,"2011":8043.669588,"2012":7706.877912,"sum":378227.6583},
    {"Country":"United Arab Emirates","1971":3677.714784,"1972":3243.469755,"1973":3408.713688,"1974":2967.593617,"1975":3646.75068,"1976":3956.037367,"1977":5682.190886,"1978":5765.452735,"1979":6005.86324,"1980":7112.667427,"1981":8115.418605,"1982":8344.449652,"1983":7645.782422,"1984":9433.464451,"1985":10157.77902,"1986":10893.91128,"1987":11389.13265,"1988":10994.92287,"1989":11965.7722,"1990":11274.93268,"1991":12276.81621,"1992":11073.1986,"1993":11050.32044,"1994":11640.05592,"1995":11779.76991,"1996":12674.1421,"1997":11897.26651,"1998":11727.94529,"1999":11306.78167,"2000":11128.82148,"2001":11613.06767,"2002":11958.47746,"2003":11094.96971,"2004":10652.94314,"2005":9696.483203,"2006":8926.974206,"2007":8374.443686,"2008":8431.669232,"2009":7780.355472,"2010":7414.658562,"2011":7324.992599,"2012":7536.240768,"sum":373042.4139},
    {"Country":"United States","1971":7644.524802,"1972":7940.997832,"1973":8163.603792,"1974":7909.58648,"1975":7656.263579,"1976":8100.562222,"1977":8285.570898,"1978":8438.403077,"1979":8327.041705,"1980":7942.253018,"1981":7647.538054,"1982":7259.078899,"1983":7199.118533,"1984":7443.320017,"1985":7456.262903,"1986":7376.096238,"1987":7622.173017,"1988":7849.75397,"1989":7890.287202,"1990":7671.773066,"1991":7631.467806,"1992":7677.401401,"1993":7709.496589,"1994":7757.830822,"1995":7763.755106,"1996":7844.468266,"1997":7828.581096,"1998":7803.697605,"1999":7923.223893,"2000":8056.86385,"2001":7827.886325,"2002":7843.344849,"2003":7794.23553,"2004":7881.578642,"2005":7846.499688,"2006":7697.652535,"2007":7758.1657,"2008":7488.081638,"2009":7056.777215,"2010":7161.512598,"2011":7029.184189,"2012":6814.823154,"sum":324020.7378},
    {"Country":"North America","1971":7539.350206,"1972":7845.45155,"1973":8064.280905,"1974":7831.721206,"1975":7607.148711,"1976":8019.945585,"1977":8200.147622,"1978":8350.730789,"1979":8279.402183,"1980":7928.772475,"1981":7636.124734,"1982":7248.312439,"1983":7184.63634,"1984":7433.315375,"1985":7454.599331,"1986":7387.510774,"1987":7624.06434,"1988":7850.271078,"1989":7894.60875,"1990":7655.045268,"1991":7607.110499,"1992":7657.597729,"1993":7702.708258,"1994":7765.507545,"1995":7773.473362,"1996":7855.603223,"1997":7842.149484,"1998":7807.039865,"1999":7931.935044,"2000":8068.348719,"2001":7842.271817,"2002":7850.892224,"2003":7841.283878,"2004":7929.18089,"2005":7898.968003,"2006":7762.362499,"2007":7789.489812,"2008":7533.823179,"2009":7091.812955,"2010":7184.178703,"2011":7062.672688,"2012":6855.753187,"sum":323689.6032},
    {"Country":"Canada","1971":6530.335563,"1972":6933.606552,"1973":7123.379215,"1974":7100.548092,"1975":7150.106812,"1976":7272.550047,"1977":7409.530005,"1978":7538.842944,"1979":7837.769659,"1980":7804.220103,"1981":7530.945261,"1982":7149.34406,"1983":7051.629557,"1984":7341.51922,"1985":7439.342071,"1986":7492.11338,"1987":7641.324105,"1988":7854.972039,"1989":7933.567077,"1990":7504.793638,"1991":7388.38249,"1992":7479.477427,"1993":7641.514791,"1994":7834.893085,"1995":7861.630272,"1996":7956.69856,"1997":7965.519322,"1998":7837.520522,"1999":8011.634174,"2000":8173.666562,"2001":7974.16268,"2002":7920.110229,"2003":8272.181052,"2004":8364.817409,"2005":8378.82867,"2006":8355.173492,"2007":8076.397516,"2008":7952.214015,"2009":7411.421169,"2010":7390.372976,"2011":7366.640208,"2012":7225.681895,"sum":320479.3779},
    {"Country":"Trinidad and Tobago","1971":2757.828609,"1972":2772.88277,"1973":2685.515075,"1974":2682.523078,"1975":2295.004286,"1976":2513.215457,"1977":2808.516798,"1978":3328.21084,"1979":3398.727459,"1980":3527.043936,"1981":3686.266169,"1982":3648.187148,"1983":3721.31244,"1984":4142.417459,"1985":4347.664046,"1986":4493.936505,"1987":4188.645321,"1988":4558.488327,"1989":4394.348337,"1990":4899.990507,"1991":4838.275445,"1992":5286.286875,"1993":5030.983358,"1994":5036.355609,"1995":4899.904462,"1996":5779.258005,"1997":5437.913121,"1998":6304.771953,"1999":7348.510137,"2000":7768.142242,"2001":8639.907166,"2002":9361.363708,"2003":10414.17949,"2004":10872.68381,"2005":12423.43436,"2006":13794.3937,"2007":14601.84608,"2008":14112.6974,"2009":14198.86972,"2010":15102.08984,"2011":14779.57731,"2012":14331.71882,"sum":281213.8872},
    {"Country":"Brunei Darussalam","1971":1306.102449,"1972":1236.999069,"1973":2326.304984,"1974":3846.212636,"1975":4604.263708,"1976":5835.554121,"1977":6071.485278,"1978":5469.064134,"1979":5493.714732,"1980":6991.126973,"1981":6525.816527,"1982":6813.231185,"1983":6995.903913,"1984":7839.653654,"1985":7990.356379,"1986":6822.686101,"1987":6804.97076,"1988":5499.114315,"1989":6206.668589,"1990":6721.003818,"1991":7386.458117,"1992":7719.687193,"1993":7225.99985,"1994":6524.86753,"1995":7616.707908,"1996":7478.761709,"1997":7541.998928,"1998":7341.275527,"1999":7324.879869,"2000":7213.665543,"2001":6549.73982,"2002":6282.739681,"2003":7166.027286,"2004":6454.003374,"2005":6125.88114,"2006":8560.426457,"2007":8618.396139,"2008":9300.890789,"2009":7860.922807,"2010":8238.793599,"2011":9695.713781,"2012":9525.673716,"sum":279153.7441}]

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    body {
        font: 10px sans-serif;

    }
#graphs{
    width: 960px;
    margin: auto;
}
    path.line {
        fill: none;
        stroke: #666;
        stroke-width: 1.5px;
    }

    path.area {
        fill: #e7e7e7;
    }

    .axis {
        shape-rendering: crispEdges;
    }

    .x.axis line {
        stroke: #fff;
    }

    .x.axis .minor {
        stroke-opacity: .5;
    }

    .x.axis path {
        display: none;
    }

    .y.axis line, .y.axis path {
        fill: none;
        stroke: #000;
    }
    .guideline {
        margin-right: 100px;
        float: right;
    }
    .layer{
        opacity: 0.4;
    }

</style>
<body>
<div id="graphs">
<div id="vis1"><h1>Three countries (Animated line chart)</h1></div>
<div id="vis2"><h1>Top 10 Energy consumer (Stacked area chart)</h1></div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="line.js"></script>
</body>

line.js

var margin = {top: 80, right: 80, bottom: 80, left: 80},
    width1 = 960 - margin.left - margin.right,
    height1 = 500 - margin.top - margin.bottom;

var parse = d3.time.format("%Y").parse;
// Scales and axes. Note the inverted domain for the y-scale: bigger is up!
var x = d3.time.scale().range([0, width1]),
    y = d3.scale.linear().range([height1, 0]),
    xAxis = d3.svg.axis().scale(x).tickSize(-height1).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(y).ticks(7).orient("right");
// An area generator, for the light fill.
var area = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y0(height1)
    .y1(function(d) { return y(d.mortality); });

// A line generator, for the dark stroke.
var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.mortality); });

d3.csv("lines.csv", type, function(error, data) {

    // Filter to one country; the S&P 500.
    var values = data.filter(function(d) {
        return d.country == "PRK";;
    });

    var msft = data.filter(function(d) {
        return d.country == "BRA";
    });

    var ibm = data.filter(function(d) {
        return d.country == 'PAK';
    });

    // Compute the minimum and maximum date, and the maximum mortality.
    x.domain([values[0].date, values[values.length - 1].date]);
    y.domain([0, 68]);

    // Add an SVG element with the desired dimensions and margin.
    var svg = d3.select("#vis1").append("svg")
        .attr("width", width1 + margin.left + margin.right)
        .attr("height", height1 + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

    // Add the clip path.
    svg.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width1)
        .attr("height", height1);

    // Add the x-axis.
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height1 + ")")
        .call(xAxis);

    // Add the y-axis.
    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + width1 + ",0)")
        .call(yAxis);


    var colors = d3.scale.category10();
    svg.selectAll('.line')
        .data([values, msft, ibm])
        .enter()
        .append('path')
        .attr('class', 'line')
        .style('stroke', function(d) {
            return colors(Math.random() * 50);
        })
        .attr('clip-path', 'url(#clip)')
        .attr('d', function(d) {
            return line(d);
        })

    /* Add 'curtain' rectangle to hide entire graph */
    var curtain = svg.append('rect')
        .attr('x', -1 * width1)
        .attr('y', -1 * height1)
        .attr('height', height1)
        .attr('width', width1)
        .attr('class', 'curtain')
        .attr('transform', 'rotate(180)')
        .style('fill', '#ffffff')

    /* Optionally add a guideline */
    var guideline = svg.append('line')
        .attr('stroke', '#333')
        .attr('stroke-width', 0)
        .attr('class', 'guide')
        .attr('x1', 1)
        .attr('y1', 1)
        .attr('x2', 1)
        .attr('y2', height1)

    /* Create a shared transition for anything we're animating */
    var t = svg.transition()
        .delay(750)
        .duration(6000)
        .ease('linear')
        .each('end', function() {
            d3.select('line.guide')
                .transition()
                .style('opacity', 0)
                .remove()
        });

    t.select('rect.curtain')
        .attr('width', 0);
    t.select('line.guide')
        .attr('transform', 'translate(' + width1 + ', 0)')

    d3.select("#show_guideline").on("change", function(e) {
        guideline.attr('stroke-width', this.checked ? 1 : 0);
        curtain.attr("opacity", this.checked ? 0.75 : 1);
    })
    svg.append("text")
        .attr("transform", "translate(" + x(parse("1996")) + "," + y(31.7) + ")")
        .attr("dy", ".35em")
        .attr("text-anchor", "start")
        .style("fill", "black")
        .transition()
        .delay(2000)
        .text("Korea DPR: flood in 1996");

    svg.append("text")
        .attr("transform", "translate(" + x(parse("2010")) + "," + y(10.7) + ")")
        .attr("dy", ".35em")
        .attr("text-anchor", "start")
        .style("fill", "black")
        .transition()
        .delay(6000)
        .text("Brazil: flood in 2010");

    svg.append("text")
        .attr("transform", "translate(" + x(parse("1992")) + "," + y(66.4) + ")")
        .attr("dy", ".35em")
        .attr("text-anchor", "start")
        .style("fill", "black")
        .transition()
        .delay(1000)
        .text("Pakistan: flood in 1992");
});

// Parse dates and numbers. We assume values are sorted by date.
function type(d) {
    d.date = parse(d.date);
    d.mortality = +d.mortality;
    return d;
}

//stacked area chart
var x1 = d3.time.scale()
    .range([0, width1]);

var y1 = d3.scale.linear()
    .range([height1, 0]);

var z = d3.scale.category20c();

var xAxis1 = d3.svg.axis()
    .scale(x1)
    .orient("bottom");
var yAxis1 = d3.svg.axis()
    .scale(y1)
    .orient("left");

var area = d3.svg.area()
    .interpolate("cardinal")
    .x(function(d) {
        return x1(parse(d.year));
    })
    .y0(height1)
    .y1(function(d) {
        return y1(+d.amount);
    });
var svg1 = d3.select("#vis2").append("svg")
    .attr("width", width1 + margin.left + margin.right)
    .attr("height", height1 + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("energy.json", function(error, data) {
    var years = ["1971","1972","1973","1974","1975","1976","1977","1978","1979","1980","1981","1982","1983","1984","1985","1986","1987","1988","1989","1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];
    var dataset = [];
    data.forEach(function (d, i) {
        var NDeaths = [];
        years.forEach(function (y) {
            if (d[y]) {
                NDeaths.push({
                    year: y,
                    amount: d[y]
                });
            }
        });
        dataset.push( {
            country: d.Country,
            Deaths: NDeaths  // we just built this!
        } );
    });
console.log(dataset);
    x1.domain(
        d3.extent(years, function(d) {
            return parse(d);
        }));
    y1.domain([0,
        d3.max(dataset, function(d) {
            return d3.max(d.Deaths, function(d) {
                return +d.amount;
            });
        })
    ]);
    svg1.selectAll(".layer")
        .data(dataset)
        .enter().append("path")
        .attr("class", "layer")
        .attr("d", function(d) { return area(d.Deaths); })
        .style("fill", function(d, i) { return z(i); });

    svg1.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height1 + ")")
        .call(xAxis1);

    svg1.append("g")
        .attr("class", "y axis")
        .call(yAxis1);
});

lines.csv

thumbnail.png