davewood/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.

  
## data.tsv
name	value
SubTest 14487
VarVal  6436
VarQueryPath    3783
Comment 3033
VarCheck        2140
EPP     700
REST    649
VarRand 562
ClearVars       470
CountQueryPath  432
DateAdd 239
Transformation  238
SSH     148
VarCheckRegExp  147
Math    89
DateFormat      86
DateCheck       66
EPPConnect      41
EPPDisconnect   35
DB      28
SOAP    19
PrintVars       18
DBDisconnect    8
DBConnect       8
DataCmp 3
ForLoop 3
Diff    2
Multiline       2

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.title {
  font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 80, right: 180, bottom: 80, left: 180},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, .3);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(8, "%");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  svg.append("text")
      .attr("class", "title")
      .attr("x", x(data[0].name))
      .attr("y", -26)
      .text("Step type distribution");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll(".tick text")
      .call(wrap, x.rangeBand());

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });
});

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

function type(d) {
  d.value = +d.value;
  return d;
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	name value
	SubTest 14487
	VarVal 6436
	VarQueryPath 3783
	Comment 3033
	VarCheck 2140
	EPP 700
	REST 649
	VarRand 562
	ClearVars 470
	CountQueryPath 432
	DateAdd 239
	Transformation 238
	SSH 148
	VarCheckRegExp 147
	Math 89
	DateFormat 86
	DateCheck 66
	EPPConnect 41
	EPPDisconnect 35
	DB 28
	SOAP 19
	PrintVars 18
	DBDisconnect 8
	DBConnect 8
	DataCmp 3
	ForLoop 3
	Diff 2
	Multiline 2
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}

	.title {
	font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	.axis {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 80, right: 180, bottom: 80, left: 180},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1, .3);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(8, "%");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("data.tsv", type, function(error, data) {
	x.domain(data.map(function(d) { return d.name; }));
	y.domain([0, d3.max(data, function(d) { return d.value; })]);

	svg.append("text")
	.attr("class", "title")
	.attr("x", x(data[0].name))
	.attr("y", -26)
	.text("Step type distribution");

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll(".tick text")
	.call(wrap, x.rangeBand());

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	svg.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.name); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.value); })
	.attr("height", function(d) { return height - y(d.value); });
	});

	function wrap(text, width) {
	text.each(function() {
	var text = d3.select(this),
	words = text.text().split(/\s+/).reverse(),
	word,
	line = [],
	lineNumber = 0,
	lineHeight = 1.1, // ems
	y = text.attr("y"),
	dy = parseFloat(text.attr("dy")),
	tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
	while (word = words.pop()) {
	line.push(word);
	tspan.text(line.join(" "));
	if (tspan.node().getComputedTextLength() > width) {
	line.pop();
	tspan.text(line.join(" "));
	line = [word];
	tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
	}
	}
	});
	}

	function type(d) {
	d.value = +d.value;
	return d;
	}

	</script>