Skip to content

Instantly share code, notes, and snippets.

@jasondavies

jasondavies/index.html

Forked from robdodson/index.html
Created April 4, 2012 10:02
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save jasondavies/2300078 to your computer and use it in GitHub Desktop.
Save jasondavies/2300078 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js Population Bar Chart
Raw
index.html
<!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://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
main.css
.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;
}
Raw
script.js
$( 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 = 8,
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 ), 0, 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, d3.time.year.offset(data[data.length - 1].year, 1)] )
.range( [0, w * data.length] )
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 ) + .5 } )
.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] ))
.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.range()[1] + ')')
.call(yAxis);
} );
@biovisualize
Copy link

Hi Jason. Could you please fix the broken link to d3.js, using http://d3js.org/d3.v2.min.js ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment