Skip to content

Instantly share code, notes, and snippets.

/README.md

Created November 21, 2015 19:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/5d1f067bb3a89dfa6675 to your computer and use it in GitHub Desktop.
Save anonymous/5d1f067bb3a89dfa6675 to your computer and use it in GitHub Desktop.
Download ZIP
Largest 5 Countries
Raw
README.md
Raw
index.html
<!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: 21pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis text {
font-size: 22pt;
}
</style>
</head>
<body>
<script>
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 90, top: 48, right: 26, bottom: 65 };
var barPadding = 0.2;
var xColumn = "country";
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");
var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
var yScale = d3.scale.log().range([innerHeight, 0.1]);
// Use a modified SI formatter that uses "B" for Billion.
var siFormat = d3.format("s");
var customTickFormat = function (d){
return siFormat(d).replace("G", "B");
};
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
//.ticks(5)
.tickValues([10,100,1000,10000,100000,1000000,10000000,100000000,1000000000])
.tickFormat(customTickFormat)
.outerTickSize(0);
function render(data){
console.log(data)
xScale.domain( data.map( function (d){ return d[xColumn]; }));
var ymax = d3.max(data, function (d){ return d[yColumn]; })
yScale.domain([0.01, ymax]);
console.log("domain", yScale.domain())
console.log("ymax", ymax)
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]); })
.attr({
"fill-opacity": 0.1
})
bars.exit().remove();
var circles = g.selectAll("circle").data(data)
circles.enter().append("circle")
circles.attr({
cx: function (d){ return xScale(d[xColumn]) + xScale.rangeBand()/2 },
cy: function(d,i) { return yScale(d[yColumn]) },
r: 50
})
}
function type(d){
d.population = +d.population;
return d;
}
d3.csv("populationByCountry2015.csv", type, render);
</script>
</body>
</html>
Raw
populationByCountry2015.csv
country population
China 1376048943
India 1311050527
USA 321773631
Indonesia 257563815
Brazil 207847528
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment