This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.
Forked from Mike's Gist as a personal journey to study various aspects of D3. Some additional features added:
It turns out that some features (tooltip, alert) can only be used by using open in new window in bl.ocks.
| id | name | value | notes | |
|---|---|---|---|---|
| 7 | Family in feud with Zuckerbergs | .17 | Well, there's nothing else we can do about that, eh? | |
| 12 | Committed 671 birthdays to memory | .19 | Or hire a secretary to do that | |
| 11 | Ex is doing too well | .10 | I can't stand reading her happy statuses everyday | |
| 8 | High school friends all dead now | .15 | I left alone | |
| 3 | Discovered how to “like” things mentally | .27 | And the first thing I like is marshmellow | |
| 1 | Not enough politics | .12 | Better watch TV or sit around cafes |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Vertical bar chart with D3</title> | |
| <meta charset="utf-8" /> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://rawgithub.com/Caged/d3-tip/master/index.js"></script> | |
| <style> | |
| body { | |
| font: normal 10px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| .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; | |
| } | |
| .d3-tip { | |
| line-height: 1; | |
| padding: 5px; | |
| background: #eee; | |
| border: 1px solid #999; | |
| color: black; | |
| width: 100px; | |
| border-radius: 2px; | |
| } | |
| .d3-tip .notes { | |
| border-bottom: 1px solid #999; | |
| padding-bottom: 5px; | |
| margin-bottom: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <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 tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .direction('n') | |
| .offset([-5, 0]) | |
| .html(function(d) { | |
| return '<div class="notes">' + d.notes + '</div>' + | |
| '<div class="attrib">Pct: ' + d.value * 100 + '%' + | |
| '<br />ID: ' + d.id + '</div>'; | |
| }) | |
| 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 + ")"); | |
| // Read TSV data. All functions that depends on the data should be put | |
| // inside this function | |
| 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; })]); | |
| // Title | |
| svg.append("text") | |
| .attr("class", "title") | |
| .attr("x", x(data[0].name)) | |
| .attr("y", -26) | |
| .text("Why Are We Leaving Facebook?"); | |
| // Axes | |
| 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); | |
| // Data bars | |
| svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function (d) { return x(d.name); }) | |
| .attr("y", function (d) { return height; }) | |
| .attr("width", x.rangeBand()) | |
| .attr("height", function (d) { return 0; }) | |
| .call(tip) | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide) | |
| .on("click", function(d) { | |
| alert(d.name + ' clicked!'); | |
| // window.location = ...; // Can be use to go to certain pages | |
| }) | |
| .transition() | |
| .duration(1000) | |
| .delay(500) | |
| .attr("y", function (d) { return y(d.value); }) | |
| .attr("height", function(d) { return height - y(d.value) }); | |
| }); | |
| /** | |
| * Wrap text | |
| * | |
| * @param string text Text to be wrapped | |
| * @param int width Wrap width | |
| */ | |
| 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); | |
| } | |
| } | |
| }); | |
| } | |
| /** | |
| * What's this for? | |
| */ | |
| function type(d) { | |
| d.value = +d.value; | |
| return d; | |
| } | |
| </script> | |
| </body> | |
| </html> |
