Current world population visualized using a single rectangle. This is example 5 from the screencast Splitting Charts.
Last active
November 21, 2015 03:30
-
-
Save curran/a364f9c0b9a114c90efa to your computer and use it in GitHub Desktop.
World Population Single Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3 Example</title> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> | |
<style> | |
.axis text { | |
font-family: 'Open Sans', sans-serif; | |
font-size: 63pt; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: #000; | |
stroke-width: 5px; | |
shape-rendering: crispEdges; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var outerWidth = 960; | |
var outerHeight = 500; | |
var margin = { left: 137, top: 4, right: 23, bottom: 100 }; | |
var barPadding = 0.2; | |
var xColumn = "name"; | |
var yColumn = "population"; | |
var innerWidth = outerWidth - margin.left - margin.right; | |
var innerHeight = outerHeight - margin.top - margin.bottom; | |
var svg = d3.select("body").append("svg") | |
.attr("width", outerWidth) | |
.attr("height", outerHeight); | |
var g = svg.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var xAxisG = g.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + innerHeight + ")"); | |
var yAxisG = g.append("g") | |
.attr("class", "y axis"); | |
// Create a modified number formatter that uses "B" for Billion instead of "G". | |
var siFormat = d3.format("s"); | |
var customTickFormat = function (d){ | |
return siFormat(d).replace("G", "B"); | |
}; | |
var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding); | |
var yScale = d3.scale.linear().range([innerHeight, 0]); | |
var xAxis = d3.svg.axis().scale(xScale).orient("bottom") | |
.tickSize(20) | |
.outerTickSize(0); // Turn off the marks at the end of the axis. | |
var yAxis = d3.svg.axis().scale(yScale).orient("left") | |
.ticks(5) // Use approximately 5 ticks marks. | |
.tickSize(20) | |
.tickFormat(customTickFormat) // Use intelligent abbreviations, e.g. 5M for 5 Million, 5B for 5 billion. | |
.outerTickSize(0); // Turn off the marks at the end of the axis. | |
function render(data){ | |
xScale.domain( data.map( function (d){ return d[xColumn]; })); | |
yScale.domain([0, d3.max(data, function (d){ return d[yColumn]; })]); | |
xAxisG.call(xAxis); | |
yAxisG.call(yAxis); | |
var bars = g.selectAll("rect").data(data); | |
bars.enter().append("rect") | |
.attr("width", xScale.rangeBand()); | |
bars | |
.attr("x", function (d){ return xScale(d[xColumn]); }) | |
.attr("y", function (d){ return yScale(d[yColumn]); }) | |
.attr("height", function (d){ return innerHeight - yScale(d[yColumn]); }); | |
bars.exit().remove(); | |
} | |
function type(d){ | |
d.population = +d.population; | |
return d; | |
} | |
d3.csv("worldPopulation2015.csv", type, render); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name | population | |
---|---|---|
World | 7349472099 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment