D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Mavromatika
Full window
Github gist
Font overlap
<!DOCTYPE html> <meta charset="utf-8"> <title>Font overlap</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> body{ } text{ text-anchor: middle; } </style> <body> <input type="text" id="source"><button id="charge">Update text</button> <script> var W = 1300, H = 500; var svg = d3.select("body") .append("svg") .attr("width", W) .attr("height", H); function charge(data, t){ svg.selectAll("text") .data(data) .enter() .append("text") .attr("x",W/2) .attr("y",H/2) .text(t) .style("font-size","110px") .style("opacity","0.05") .style("font-family", function(d){ return d.font; }); } d3.csv("data.csv", function(data){ charge(data, 'Tristes tropiques'); d3.select("#charge").on("click",function(){ var texte = d3.select("#source").node().value; svg.selectAll("text") .text(texte); }); } ); // Doesn't work because all the different fonts should be joined in a g. function wrap(text, width) { text.each(function() { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 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", lineHeight + dy + "em").text(word); } } }); } </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js