mbostock · November 7, 2023 18:39
diff --git a/.block b/.block
 height: 930
 license: gpl-3.0
 redirect: https://observablehq.com/@d3/d3-horizontal-bar-chart
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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>
diff --git a/sample-data.csv b/sample-data.csv
diff --git a/thumbnail.png b/thumbnail.png
	height: 930
	license: gpl-3.0
	redirect: https://observablehq.com/@d3/d3-horizontal-bar-chart
	<!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