skreuzer · December 10, 2015 04:38
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Bar Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?2.6.0"></script>
    <style type="text/css">
 
 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>
  </head>
  <body>
    <script type="text/javascript">
 
 var m = [30, 10, 10, 30],
    w = 1000 - m[1] - m[3],
    h = 1200 - 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("port-count.csv", function(data) {
 
  // 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>
  </body>
 </html>
diff --git a/port-count.csv b/port-count.csv
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bar Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?2.6.0"></script>
	<style type="text/css">

	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>
	</head>
	<body>
	<script type="text/javascript">

	var m = [30, 10, 10, 30],
	w = 1000 - m[1] - m[3],
	h = 1200 - 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("port-count.csv", function(data) {

	// 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>
	</body>
	</html>
	name	value
	accessibility	65
	arabic	10
	archivers	225
	astro	135
	audio	939
	benchmarks	81
	biology	103
	cad	115
	chinese	144
	comms	195
	converters	199
	databases	935
	deskutils	320
	devel	4776
	dns	169
	editors	373
	emulators	225
	finance	175
	french	32
	ftp	125
	games	1173
	german	48
	graphics	1178
	hebrew	9
	hungarian	15
	irc	152
	japanese	372
	java	560
	korean	47
	lang	503
	mail	835
	math	692
	misc	585
	multimedia	437
	net	1487
	net-im	194
	net-mgmt	350
	net-p2p	123
	news	102
	palm	40
	polish	25
	ports-mgmt	84
	portuguese	19
	print	406
	russian	60
	science	236
	security	1119
	shells	47
	sysutils	1116
	textproc	1699
	ukrainian	17
	vietnamese	24
	www	2811
	x11	502
	x11-clocks	60
	x11-drivers	57
	x11-fm	40
	x11-fonts	219
	x11-servers	11
	x11-themes	189
	x11-toolkits	306
	x11-wm	171