Skip to content

Instantly share code, notes, and snippets.

@robdodson

robdodson/index.html

Created April 3, 2012 04:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save robdodson/2289263 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save robdodson/2289263 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. robdodson revised this gist Apr 3, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -628,7 +628,7 @@ $( function() {
    .append('g');

    d3.select('svg g')
    .attr('transform', 'translate(0, 50)');
    .attr('transform', 'translate(50, 50)');

    x = d3.time.scale()
    .domain( [data[0].year, data[data.length - 1].year] )
  2. robdodson revised this gist Apr 3, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -608,7 +608,7 @@ $( function() {
    chart,
    bars,
    margin = 100,
    w = 10,
    w = 8,
    h = 500,
    x, y,
    xAxis, yAxis;
  3. robdodson revised this gist Apr 3, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -628,7 +628,7 @@ $( function() {
    .append('g');

    d3.select('svg g')
    .attr('transform', 'translate(50, 50)');
    .attr('transform', 'translate(0, 50)');

    x = d3.time.scale()
    .domain( [data[0].year, data[data.length - 1].year] )
  4. robdodson revised this gist Apr 3, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@
    <body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://github.com/mbostock/d3/raw/v1.8.4/d3.js"></script>
    <script src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>
    <script src="script.js"></script>

    </body>
  5. robdodson created this gist Apr 3, 2012.
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Population Projection</title>

    <link rel="stylesheet" href="main.css">

    </head>

    <body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://github.com/mbostock/d3/raw/v1.8.4/d3.js"></script>
    <script src="script.js"></script>

    </body>
    </html>
    24 changes: 24 additions & 0 deletions main.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    .chart {
    background-color: #eee;
    }

    .chart rect {
    stroke: white;
    fill: steelblue;
    }

    .axis {
    shape-rendering: crispEdges;
    }

    .x.axis line {
    stroke: black;
    }

    .y.axis line {
    stroke: black;
    }

    .axis text {
    font-size: 12px;
    }
    676 changes: 676 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,676 @@
    $( function() {

    var json = [
    {
    "Year": "1950",
    "Population": "2,556,505,579",
    "Annual growth rate (%)": "1.45",
    "Population change": "37,347,602"
    },
    {
    "Year": "1951",
    "Population": "2,593,853,181",
    "Annual growth rate (%)": "1.6",
    "Population change": "41,871,643"
    },
    {
    "Year": "1952",
    "Population": "2,635,724,824",
    "Annual growth rate (%)": "1.7",
    "Population change": "45,323,546"
    },
    {
    "Year": "1953",
    "Population": "2,681,048,370",
    "Annual growth rate (%)": "1.78",
    "Population change": "48,219,116"
    },
    {
    "Year": "1954",
    "Population": "2,729,267,486",
    "Annual growth rate (%)": "1.88",
    "Population change": "51,917,512"
    },
    {
    "Year": "1955",
    "Population": "2,781,184,998",
    "Annual growth rate (%)": "1.9",
    "Population change": "53,250,385"
    },
    {
    "Year": "1956",
    "Population": "2,834,435,383",
    "Annual growth rate (%)": "1.96",
    "Population change": "56,101,768"
    },
    {
    "Year": "1957",
    "Population": "2,890,537,151",
    "Annual growth rate (%)": "1.95",
    "Population change": "56,842,854"
    },
    {
    "Year": "1958",
    "Population": "2,947,380,005",
    "Annual growth rate (%)": "1.77",
    "Population change": "52,643,623"
    },
    {
    "Year": "1959",
    "Population": "3,000,023,628",
    "Annual growth rate (%)": "1.4",
    "Population change": "42,365,981"
    },
    {
    "Year": "1960",
    "Population": "3,042,389,609",
    "Annual growth rate (%)": "1.34",
    "Population change": "41,053,737"
    },
    {
    "Year": "1961",
    "Population": "3,083,443,346",
    "Annual growth rate (%)": "1.81",
    "Population change": "56,201,866"
    },
    {
    "Year": "1962",
    "Population": "3,139,645,212",
    "Annual growth rate (%)": "2.2",
    "Population change": "69,809,783"
    },
    {
    "Year": "1963",
    "Population": "3,209,454,995",
    "Annual growth rate (%)": "2.2",
    "Population change": "71,435,095"
    },
    {
    "Year": "1964",
    "Population": "3,280,890,090",
    "Annual growth rate (%)": "2.09",
    "Population change": "69,261,354"
    },
    {
    "Year": "1965",
    "Population": "3,350,151,444",
    "Annual growth rate (%)": "2.08",
    "Population change": "70,287,296"
    },
    {
    "Year": "1966",
    "Population": "3,420,438,740",
    "Annual growth rate (%)": "2.02",
    "Population change": "69,734,541"
    },
    {
    "Year": "1967",
    "Population": "3,490,173,281",
    "Annual growth rate (%)": "2.04",
    "Population change": "72,054,474"
    },
    {
    "Year": "1968",
    "Population": "3,562,227,755",
    "Annual growth rate (%)": "2.08",
    "Population change": "74,911,189"
    },
    {
    "Year": "1969",
    "Population": "3,637,138,944",
    "Annual growth rate (%)": "2.06",
    "Population change": "75,674,674"
    },
    {
    "Year": "1970",
    "Population": "3,712,813,618",
    "Annual growth rate (%)": "2.08",
    "Population change": "77,855,248"
    },
    {
    "Year": "1971",
    "Population": "3,790,668,866",
    "Annual growth rate (%)": "2",
    "Population change": "76,494,186"
    },
    {
    "Year": "1972",
    "Population": "3,867,163,052",
    "Annual growth rate (%)": "1.94",
    "Population change": "75,826,051"
    },
    {
    "Year": "1973",
    "Population": "3,942,989,103",
    "Annual growth rate (%)": "1.87",
    "Population change": "74,626,636"
    },
    {
    "Year": "1974",
    "Population": "4,017,615,739",
    "Annual growth rate (%)": "1.79",
    "Population change": "72,591,465"
    },
    {
    "Year": "1975",
    "Population": "4,090,207,204",
    "Annual growth rate (%)": "1.73",
    "Population change": "71,216,701"
    },
    {
    "Year": "1976",
    "Population": "4,161,423,905",
    "Annual growth rate (%)": "1.72",
    "Population change": "71,989,405"
    },
    {
    "Year": "1977",
    "Population": "4,233,413,310",
    "Annual growth rate (%)": "1.69",
    "Population change": "72,083,441"
    },
    {
    "Year": "1978",
    "Population": "4,305,496,751",
    "Annual growth rate (%)": "1.73",
    "Population change": "74,933,098"
    },
    {
    "Year": "1979",
    "Population": "4,380,429,849",
    "Annual growth rate (%)": "1.64",
    "Population change": "72,256,895"
    },
    {
    "Year": "1980",
    "Population": "4,452,686,744",
    "Annual growth rate (%)": "1.84",
    "Population change": "82,712,810"
    },
    {
    "Year": "1981",
    "Population": "4,535,399,554",
    "Annual growth rate (%)": "1.75",
    "Population change": "79,967,346"
    },
    {
    "Year": "1982",
    "Population": "4,615,366,900",
    "Annual growth rate (%)": "1.74",
    "Population change": "81,043,957"
    },
    {
    "Year": "1983",
    "Population": "4,696,410,857",
    "Annual growth rate (%)": "1.69",
    "Population change": "80,166,808"
    },
    {
    "Year": "1984",
    "Population": "4,776,577,665",
    "Annual growth rate (%)": "1.69",
    "Population change": "81,519,858"
    },
    {
    "Year": "1985",
    "Population": "4,858,097,523",
    "Annual growth rate (%)": "1.71",
    "Population change": "83,727,559"
    },
    {
    "Year": "1986",
    "Population": "4,941,825,082",
    "Annual growth rate (%)": "1.73",
    "Population change": "86,219,610"
    },
    {
    "Year": "1987",
    "Population": "5,028,044,692",
    "Annual growth rate (%)": "1.71",
    "Population change": "86,904,352"
    },
    {
    "Year": "1988",
    "Population": "5,114,949,044",
    "Annual growth rate (%)": "1.68",
    "Population change": "86,553,193"
    },
    {
    "Year": "1989",
    "Population": "5,201,502,237",
    "Annual growth rate (%)": "1.66",
    "Population change": "87,326,009"
    },
    {
    "Year": "1990",
    "Population": "5,288,828,246",
    "Annual growth rate (%)": "1.56",
    "Population change": "82,961,488"
    },
    {
    "Year": "1991",
    "Population": "5,371,789,734",
    "Annual growth rate (%)": "1.56",
    "Population change": "84,615,734"
    },
    {
    "Year": "1992",
    "Population": "5,456,405,468",
    "Annual growth rate (%)": "1.49",
    "Population change": "82,021,956"
    },
    {
    "Year": "1993",
    "Population": "5,538,427,424",
    "Annual growth rate (%)": "1.44",
    "Population change": "80,603,671"
    },
    {
    "Year": "1994",
    "Population": "5,619,031,095",
    "Annual growth rate (%)": "1.43",
    "Population change": "80,882,232"
    },
    {
    "Year": "1995",
    "Population": "5,699,913,327",
    "Annual growth rate (%)": "1.4",
    "Population change": "80,077,441"
    },
    {
    "Year": "1996",
    "Population": "5,779,990,768",
    "Annual growth rate (%)": "1.35",
    "Population change": "78,382,248"
    },
    {
    "Year": "1997",
    "Population": "5,858,373,016",
    "Annual growth rate (%)": "1.31",
    "Population change": "77,368,308"
    },
    {
    "Year": "1998",
    "Population": "5,935,741,324",
    "Annual growth rate (%)": "1.28",
    "Population change": "76,699,424"
    },
    {
    "Year": "1999",
    "Population": "6,012,440,748",
    "Annual growth rate (%)": "1.26",
    "Population change": "76,242,806"
    },
    {
    "Year": "2000",
    "Population": "6,088,683,554",
    "Annual growth rate (%)": "1.25",
    "Population change": "76,640,086"
    },
    {
    "Year": "2001",
    "Population": "6,165,323,640",
    "Annual growth rate (%)": "1.23",
    "Population change": "76,394,040"
    },
    {
    "Year": "2002",
    "Population": "6,241,717,680",
    "Annual growth rate (%)": "1.21",
    "Population change": "75,708,715"
    },
    {
    "Year": "2003",
    "Population": "6,317,426,395",
    "Annual growth rate (%)": "1.19",
    "Population change": "75,694,545"
    },
    {
    "Year": "2004",
    "Population": "6,393,120,940",
    "Annual growth rate (%)": "1.18",
    "Population change": "76,008,796"
    },
    {
    "Year": "2005",
    "Population": "6,469,129,736",
    "Annual growth rate (%)": "1.18",
    "Population change": "76,754,703"
    },
    {
    "Year": "2006",
    "Population": "6,545,884,439",
    "Annual growth rate (%)": "1.18",
    "Population change": "77,687,516"
    },
    {
    "Year": "2007",
    "Population": "6,623,571,955",
    "Annual growth rate (%)": "1.16",
    "Population change": "77,193,924"
    },
    {
    "Year": "2008",
    "Population": "6,700,765,879",
    "Annual growth rate (%)": "1.13",
    "Population change": "76,151,586"
    },
    {
    "Year": "2009",
    "Population": "6,776,917,465",
    "Annual growth rate (%)": "1.12",
    "Population change": "76,101,949"
    },
    {
    "Year": "2010",
    "Population": "6,853,019,414",
    "Annual growth rate (%)": "1.1",
    "Population change": "76,078,737"
    },
    {
    "Year": "2011",
    "Population": "6,929,098,151",
    "Annual growth rate (%)": "1.09",
    "Population change": "75,690,177"
    },
    {
    "Year": "2012",
    "Population": "7,004,788,328",
    "Annual growth rate (%)": "1.07",
    "Population change": "75,387,222"
    },
    {
    "Year": "2013",
    "Population": "7,080,175,550",
    "Annual growth rate (%)": "1.06",
    "Population change": "75,338,512"
    },
    {
    "Year": "2014",
    "Population": "7,155,514,062",
    "Annual growth rate (%)": "1.04",
    "Population change": "75,049,628"
    },
    {
    "Year": "2015",
    "Population": "7,230,563,690",
    "Annual growth rate (%)": "1.03",
    "Population change": "74,655,713"
    },
    {
    "Year": "2016",
    "Population": "7,305,219,403",
    "Annual growth rate (%)": "1.01",
    "Population change": "74,180,657"
    },
    {
    "Year": "2017",
    "Population": "7,379,400,060",
    "Annual growth rate (%)": "0.99",
    "Population change": "73,486,592"
    },
    {
    "Year": "2018",
    "Population": "7,452,886,652",
    "Annual growth rate (%)": "0.97",
    "Population change": "72,652,993"
    },
    {
    "Year": "2019",
    "Population": "7,525,539,645",
    "Annual growth rate (%)": "0.95",
    "Population change": "71,699,093"
    },
    {
    "Year": "2020",
    "Population": "7,597,238,738",
    "Annual growth rate (%)": "0.93",
    "Population change": "70,803,837"
    },
    {
    "Year": "2021",
    "Population": "7,668,042,575",
    "Annual growth rate (%)": "0.91",
    "Population change": "69,932,250"
    },
    {
    "Year": "2022",
    "Population": "7,737,974,825",
    "Annual growth rate (%)": "0.89",
    "Population change": "68,927,398"
    },
    {
    "Year": "2023",
    "Population": "7,806,902,223",
    "Annual growth rate (%)": "0.87",
    "Population change": "67,841,959"
    },
    {
    "Year": "2024",
    "Population": "7,874,744,182",
    "Annual growth rate (%)": "0.84",
    "Population change": "66,699,289"
    },
    {
    "Year": "2025",
    "Population": "7,941,443,471",
    "Annual growth rate (%)": "0.82",
    "Population change": "65,627,670"
    },
    {
    "Year": "2026",
    "Population": "8,007,071,141",
    "Annual growth rate (%)": "0.8",
    "Population change": "64,618,718"
    },
    {
    "Year": "2027",
    "Population": "8,071,689,859",
    "Annual growth rate (%)": "0.78",
    "Population change": "63,569,367"
    },
    {
    "Year": "2028",
    "Population": "8,135,259,226",
    "Annual growth rate (%)": "0.77",
    "Population change": "62,498,636"
    },
    {
    "Year": "2029",
    "Population": "8,197,757,862",
    "Annual growth rate (%)": "0.75",
    "Population change": "61,409,243"
    },
    {
    "Year": "2030",
    "Population": "8,259,167,105",
    "Annual growth rate (%)": "0.73",
    "Population change": "60,387,312"
    },
    {
    "Year": "2031",
    "Population": "8,319,554,417",
    "Annual growth rate (%)": "0.71",
    "Population change": "59,434,876"
    },
    {
    "Year": "2032",
    "Population": "8,378,989,293",
    "Annual growth rate (%)": "0.7",
    "Population change": "58,473,280"
    },
    {
    "Year": "2033",
    "Population": "8,437,462,573",
    "Annual growth rate (%)": "0.68",
    "Population change": "57,495,609"
    },
    {
    "Year": "2034",
    "Population": "8,494,958,182",
    "Annual growth rate (%)": "0.66",
    "Population change": "56,487,279"
    },
    {
    "Year": "2035",
    "Population": "8,551,445,461",
    "Annual growth rate (%)": "0.65",
    "Population change": "55,520,922"
    },
    {
    "Year": "2036",
    "Population": "8,606,966,383",
    "Annual growth rate (%)": "0.63",
    "Population change": "54,605,240"
    },
    {
    "Year": "2037",
    "Population": "8,661,571,623",
    "Annual growth rate (%)": "0.62",
    "Population change": "53,671,305"
    },
    {
    "Year": "2038",
    "Population": "8,715,242,928",
    "Annual growth rate (%)": "0.6",
    "Population change": "52,712,536"
    },
    {
    "Year": "2039",
    "Population": "8,767,955,464",
    "Annual growth rate (%)": "0.59",
    "Population change": "51,724,342"
    },
    {
    "Year": "2040",
    "Population": "8,819,679,806",
    "Annual growth rate (%)": "0.57",
    "Population change": "50,774,182"
    },
    {
    "Year": "2041",
    "Population": "8,870,453,988",
    "Annual growth rate (%)": "0.56",
    "Population change": "49,865,285"
    },
    {
    "Year": "2042",
    "Population": "8,920,319,273",
    "Annual growth rate (%)": "0.55",
    "Population change": "48,921,986"
    },
    {
    "Year": "2043",
    "Population": "8,969,241,259",
    "Annual growth rate (%)": "0.53",
    "Population change": "47,940,235"
    },
    {
    "Year": "2044",
    "Population": "9,017,181,494",
    "Annual growth rate (%)": "0.52",
    "Population change": "46,926,143"
    },
    {
    "Year": "2045",
    "Population": "9,064,107,637",
    "Annual growth rate (%)": "0.51",
    "Population change": "45,941,983"
    },
    {
    "Year": "2046",
    "Population": "9,110,049,620",
    "Annual growth rate (%)": "0.49",
    "Population change": "44,990,101"
    },
    {
    "Year": "2047",
    "Population": "9,155,039,721",
    "Annual growth rate (%)": "0.48",
    "Population change": "44,017,110"
    },
    {
    "Year": "2048",
    "Population": "9,199,056,831",
    "Annual growth rate (%)": "0.47",
    "Population change": "43,026,715"
    },
    {
    "Year": "2049",
    "Population": "9,242,083,546",
    "Annual growth rate (%)": "0.45",
    "Population change": "42,023,878"
    }
    ];

    var results,
    data = [],
    chart,
    bars,
    margin = 100,
    w = 10,
    h = 500,
    x, y,
    xAxis, yAxis;

    results = d3.map( json );
    results.forEach( function( key, val ) {
    var result = {};
    result.year = new Date(parseInt( val.Year, 10 ), 1, 1);
    result.population = parseInt( val.Population.replace( /,/g, '' ), 10 );
    data.push( result );
    } );

    chart = d3.select( 'body' ).append( 'svg' )
    .attr( 'class', 'chart' )
    .attr( 'width', 1100 )
    .attr( 'height', h )
    .append('g');

    d3.select('svg g')
    .attr('transform', 'translate(50, 50)');

    x = d3.time.scale()
    .domain( [data[0].year, data[data.length - 1].year] )
    .range( [0, (w * data.length) - (margin + w)] );

    y = d3.scale.linear()
    .domain( [0, d3.max( data, function( d ) { return d.population; } )] )
    .rangeRound( [0, h - margin] );

    // Bars
    bars = chart.append('g')
    .attr('class', 'bars');

    bars.selectAll( 'rect' )
    .data( data )
    .enter().append( 'rect' )
    .attr( 'x', function( d, i ) { return x( d.year ) - .5; } )
    .attr( 'y', function( d ) { return (h - margin) - y( d.population ) } )
    .attr( 'width', w )
    .attr( 'height', function( d ) { return y( d.population ) } )
    .append('g');

    // Axis
    xAxis = d3.svg.axis()
    .scale(x)
    .ticks(20)
    .tickSize(6, 3, 1);

    yAxis = d3.svg.axis()
    .scale(d3.scale.linear().domain( [0, d3.max( data, function( d ) { return d.population; } )] ).rangeRound( [h - margin, 0] ))
    .ticks(4)
    .tickSize(6, 3, 1)
    .orient('right');

    chart.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0, ' + (h - margin) + ')')
    .call(xAxis);

    chart.append('g')
    .attr('class', 'y axis')
    .attr('transform', 'translate(' + (x(data[data.length - 1].year) + w) + ',0)')
    .call(yAxis);

    } );