function draw(data) { "use strict"; d3.select("body") .append("div") .attr("class","chart") .selectAll("div.line") .data(data) .enter() .append("div") .attr("class","line") d3.selectAll("div.line") .append("div") .attr("class","label") .text(function(d){return d.jahr}) d3.selectAll("div.line") .append("div") .attr("class","bar") .style("width", function(d){ return d.zwillinge*8 + "px"}) .text(function(d){return d.zwillinge}); } draw(d3.csv('https://docs.google.com/spreadsheet/pub?key=0AnPrU5riz1tMdC10Nl9NOUxvVVc0YzBvSmJVOGNURHc&single=true&gid=0&output=csv', function(data){ draw(data); }));
div.chart{ font-family:sans-serif; font-size:0.7em; } div.bar { background-color:DarkRed; color:white; height:3em; line-height:3em; padding-right:1em; margin-bottom:2px; text-align:right; margin-left:22em; } div.label { height:3em; line-height:3em; padding-right:1em; margin-bottom:2px; float:left; width:20em; text-align:right; }