D3 Examples - Labeling speed test

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .stats {
            padding: 10px;          
        }
    </style>
</head>
<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="labeling.js"></script>
​
    <script type="text/javascript">
​
        var width = 900, height = 350, time_mean = 0, count = 0;
​
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);
​
        var div = d3.select("body").append("div");
​
        var alignBtn = div.append("span")
            .append("button")
            .text("Align")
            .on("click", align);
​
        var shuffleBtn = div.append("button")
            .text("Shuffle")
            .on("click", shuffle);  
​
        var stats = d3.select("body").append("div")
            .attr("class", "stats");    
​
        var data = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum elit eget turpis pretium vestibulum. Vestibulum turpis ligula, lobortis quis tempus sit amet, placerat nec sem. Pellentesque luctus lectus mi, volutpat placerat velit scelerisque sed. Pellentesque accumsan fermentum libero vitae fermentum. Nunc cursus urna lacus, id pharetra urna egestas nec. Sed laoreet sem sit amet nunc interdum interdum. Duis massa sapien, suscipit aliquet dolor nec, elementum euismod sapien. Nulla fermentum, odio et mollis suscipit, neque elit vulputate tellus, nec tempus risus felis quis purus. Morbi nunc mauris, elementum a gravida sit amet, consectetur nec ligula. Praesent non felis non orci consequat placerat. Curabitur tincidunt elit vel dolor pulvinar, ut sagittis tortor gravida. Proin id mattis dolor, non posuere lectus. Praesent erat magna, faucibus sed nisi non, mattis congue urna. Mauris ipsum metus, elementum in metus ac, iaculis consequat risus."          
            .replace(/\./g, "")
            .replace(/\,/g, "")
            .split(" ");
​
        function shuffle() {    
            
            svg.selectAll(".label")
                .remove();
​
            stats.html(""); 
                
            svg.selectAll(".label")
                .data(data)
                .enter()    
                .append("text")
                    .attr("class", "label")
                    .attr("x", function(d) { return Math.round(Math.random() * width); })
                    .attr("y", function(d) { return Math.round(Math.random() * height); })
                    .text(function(d) { return d; });
​
            shuffleBtn.attr("disabled", true);
            alignBtn.attr("disabled", null);        
        }
​
        function align() {
​
            var time = new Date(), scaleds = 0,
                total = svg.selectAll(".label")[0].length,
                totalTime,
                format = d3.format(".4r");
​
            var labeling = d3.labeling()
                .select(".label")
                .scale()
                .remove()
                .align();
​
            var lbstats = labeling.getStats();
​
            var txt = "";
​
            txt += lbstats.scaleds + " words scaled, ";
            txt += lbstats.removeds + " words removed ";
            txt += "of " + total + " words.<br/>";
                
            var ft = new Date();
​
            totalTime = ft - time;
​
            // add to mean
            time_mean = time_mean + (totalTime - time_mean)/((count++) + 1);
​
            txt += "Time: " + totalTime + "ms &nbsp;&nbsp;&nbsp; Mean time: " + format(time_mean) + "ms";
​
            stats.html(txt);
            
            shuffleBtn.attr("disabled", null);
            alignBtn.attr("disabled", true);        
        }
​
        shuffle();
​
    </script>
</body>
</html>
    