Skip to content

Instantly share code, notes, and snippets.

@curran
Last active February 1, 2016 01:19
Show Gist options
  • Save curran/fea34ca9b3b8886e3ab8 to your computer and use it in GitHub Desktop.
Save curran/fea34ca9b3b8886e3ab8 to your computer and use it in GitHub Desktop.
Colored Bar Chart
<!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: 20pt;
}
.axis .label {
font-size: 20pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis text {
font-size: 20pt;
}
</style>
</head>
<body>
<script>
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 90, top: 16, right: 30, bottom: 85 };
var barPadding = 0.2;
var xColumn = "religion";
var yColumn = "population";
var colorColumn = "religion";
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.linear().range([innerHeight, 0]);
var colorScale = d3.scale.category10();
// 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)
.tickFormat(customTickFormat)
.outerTickSize(0);
function render(data){
xScale.domain( data.map( function (d){ return d[xColumn]; }));
yScale.domain([0, d3.max(data, function (d){ return d[yColumn]; })]);
colorScale.domain(data.map(function (d){ return d[colorColumn]; }));
xAxisG
.call(xAxis)
.selectAll("text")
.attr("dx", "-0.4em")
.attr("dy", "1.24em")
.attr("transform", "rotate(-16)" );
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", function (d){ return colorScale(d[colorColumn]); });
bars.exit().remove();
}
function type(d){
d.population = +d.population;
return d;
}
d3.csv("religionWorldTotals.csv", type, render);
</script>
</body>
</html>
religion population
Christian 2173100000
Muslim 1598360000
Unaffiliated 1126280000
Hindu 1032860000
Buddhist 487320000
Folk Religions 404890000
Other Religions 57770000
Jewish 13640000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment