mbostock/.block

## .block
height: 930
license: gpl-3.0
redirect: https://observablehq.com/@d3/d3-horizontal-bar-chart

## README.md

      
    Raw
  

              README.md
            
          
    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.


## 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>

## sample-data.csv

          
            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

## thumbnail.png

      
    Raw
  

              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