Skip to content

Instantly share code, notes, and snippets.

@curran
Last active January 23, 2021 22:18
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save curran/8ac62d283a7aa6e95de8 to your computer and use it in GitHub Desktop.
Horizontal Bar Chart
license: mit
<!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='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>
.axis text {
font-family: 'Poiret One', cursive;
font-size: 24pt;
}
.axis .label {
font-size: 40pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.y.axis path, .y.axis line {
stroke: none;
}
</style>
</head>
<body>
<script>
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 165, top: 0, right: 0, bottom: 90 };
var barPadding = 0.2;
var barPaddingOuter = 0.1;
var xColumn = "population";
var yColumn = "city";
var xAxisLabelText = "Population";
var xAxisLabelOffset = 75;
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 xAxisLabel = xAxisG.append("text")
.style("text-anchor", "middle")
.attr("x", innerWidth / 2)
.attr("y", xAxisLabelOffset)
.attr("class", "label")
.text(xAxisLabelText);
var yAxisG = g.append("g")
.attr("class", "y axis");
var xScale = d3.scale.linear().range([0, innerWidth]);
var yScale = d3.scale.ordinal().rangeRoundBands([0, innerHeight], barPadding, barPaddingOuter);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.ticks(5)
.tickFormat(d3.format("s"))
.outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.outerTickSize(0);
function render(data){
xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
yScale.domain( data.map( function (d){ return d[yColumn]; }));
xAxisG.call(xAxis);
yAxisG.call(yAxis);
var bars = g.selectAll("rect").data(data);
bars.enter().append("rect")
.attr("height", yScale.rangeBand());
bars
.attr("x", 0)
.attr("y", function (d){ return yScale(d[yColumn]); })
.attr("width", function (d){ return xScale(d[xColumn]); });
bars.exit().remove();
}
function type(d){
d.population = +d.population;
return d;
}
d3.csv("top10cities.csv", type, render);
</script>
</body>
</html>
city population
Shanghai 24150000
Karachi 23500000
Beijing 21516000
Tianjin 14722100
Istanbul 14377019
Lagos 13400000
Guangzhou 12700800
Mumbai 12655220
Moscow 12197596
Dhaka 12043977
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment