Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 26, 2019
Embed
What would you like to do?
A Bar Chart
height: 930
license: gpl-3.0
redirect: https://observablehq.com/@d3/d3-horizontal-bar-chart

This simple bar chart demonstrates two new features of D3 2.6:

  • Namespaces are now optional! You can now append an SVG element by just saying append("svg"), without specifying the namespace explicitly as "svg:svg". Adding an element whose name is a known prefix (in d3.ns.prefix) implies a namespace; similarly, appending or inserting an element will inherit the namespace from its parent.

  • The axis component now supports ordinal scales. The labels on the left side of the bar chart are rendered with the axis component.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.bar rect {
fill: steelblue;
}
.bar text.value {
fill: white;
}
.axis {
shape-rendering: crispEdges;
}
.axis path {
fill: none;
}
.x.axis line {
stroke: #fff;
stroke-opacity: .8;
}
.y.axis path {
stroke: black;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var m = [30, 10, 10, 30],
w = 960 - m[1] - m[3],
h = 930 - m[0] - m[2];
var format = d3.format(",.0f");
var x = d3.scale.linear().range([0, w]),
y = d3.scale.ordinal().rangeRoundBands([0, h], .1);
var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
var svg = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.csv("sample-data.csv", function(error, data) {
if (error) throw error;
// Parse numbers, and sort by value.
data.forEach(function(d) { d.value = +d.value; });
data.sort(function(a, b) { return b.value - a.value; });
// Set the scale domain.
x.domain([0, d3.max(data, function(d) { return d.value; })]);
y.domain(data.map(function(d) { return d.name; }));
var bar = svg.selectAll("g.bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });
bar.append("rect")
.attr("width", function(d) { return x(d.value); })
.attr("height", y.rangeBand());
bar.append("text")
.attr("class", "value")
.attr("x", function(d) { return x(d.value); })
.attr("y", y.rangeBand() / 2)
.attr("dx", -3)
.attr("dy", ".35em")
.attr("text-anchor", "end")
.text(function(d) { return format(d.value); });
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
name value
AL 4708708
AK 698473
AZ 6595778
AR 2889450
CA 36961664
CO 5024748
CT 3518288
DE 885122
DC 599657
FL 18537969
GA 9829211
HI 1295178
ID 1545801
IL 12910409
IN 6423113
IA 3007856
KS 2818747
KY 4314113
LA 4492076
ME 1318301
MD 5699478
MA 6593587
MI 9969727
MN 5266214
MS 2951996
MO 5987580
MT 974989
NE 1796619
NV 2643085
NH 1324575
NJ 8707739
NM 2009671
NY 19541453
NC 9380884
ND 646844
OH 11542645
OK 3687050
OR 3825657
PA 12604767
RI 1053209
SC 4561242
SD 812383
TN 6296254
TX 24782302
UT 2784572
VT 621760
VA 7882590
WA 6664195
WV 1819777
WI 5654774
WY 544270
PR 3967288
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment