How to display two d3 wordclouds on one page

I’m trying to put two (or even more -> that depends on the users settings) d3 Wordclouds to one page. However I’ll get the following result:

(sorry the image upload doesn’t work) Therefore I’ll insert a link to the output image:
http://jdev.pemasoft.de/_stackoverflow/StackOverflow_d3_wordcloud_output.jpg

It seems, that the word list won’t be parsed correct.

My code looks like this:
(The php $Block variable specifies the position, where the recent wordcloud should be shown.)

var container = "svg_<?php echo $Block;?>";

var w = $('#word_cloud_<?php echo $Block;?>').width();
var h = w*0.75;

if($( window ).width()<400){
    var maxRange=20;
}else if($( window ).width()<800){
    var maxRange=40;
}else if($( window ).width()<1200){
    var maxRange=60;
}else if($( window ).width()>=1200){
    var maxRange=95;
}

var list_<?php echo $Block;?>=<?php echo $jsonWort; ?>;

var wordSize=12;
var layout;

generate_<?php echo $Block;?>(list_<?php echo $Block;?>);

function generate_<?php echo $Block;?>(list) {

    //Blacklist wird gefiltert!
    var blacklist=["ein","sind"];
    list=list.filter(function(x) { return blacklist.indexOf(x) < 0 });

    // Liste wird verarbeitet
    result = { };
    for(i = 0; i < list.length; ++i) {
        if(!result[list[i]])
            result[list[i]] = 0;
        ++result[list[i]];
    }

    var newList = _.uniq(list);



    var frequency_list = [];
    var len = newList.length;
    for (var i = 0; i < len; i++) {

        var temp = newList[i];
        frequency_list.push({
            text : temp,
            freq : result[newList[i]],
            time : 0 
        });

    }
    frequency_list.sort(function(a,b) { return parseFloat(b.freq) - parseFloat(a.freq) } );  


    for(var t = 0 ; t < len ; t++)
    {
        var addTime = (100 * t) +500;
        frequency_list[t].time=addTime;
    }


    for(i in frequency_list){
        if(frequency_list[i].freq*wordSize > 160)   
            wordSize = 3;
    }


    var sizeScale = d3.scale.linear().domain([0, d3.max(frequency_list,  function(d) { return d.freq} )]).range([5, maxRange]);
    layout= d3.layout.cloud().size([w, h])
        .words(frequency_list)
        .padding(5)
        .rotate(function() { return ~~(Math.random() * 2) * 90; })
        .font("Impact")
        .fontSize(function(d) { return sizeScale(d.freq); })
        .on("end",draw)
        .start();
}


function draw(words) {

    var fill = d3.scale.category20();

    d3.select(container).remove();

    d3.select("#word_cloud_<?php echo $Block;?>").append(container)
        .attr("width", w)
        .attr("height", h) 
        .append("g")
        .attr("transform", "translate(" + [w/2, h/2] + ")")
        .selectAll("text")
        .data(words)
        .enter().append("text")

        .transition()
        .duration(function(d) { return d.time}  )
        .attr('opacity', 1)
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
        return "rotate(" + d.rotate + ")";
    })
        .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
        .text(function(d) { return d.text; });
}

I believe that the mistake has to be somewhere in

   var sizeScale = d3.scale.linear().domain([0, d3.max(frequency_list,  function(d) { return d.freq} )]).range([5, maxRange]);
layout= d3.layout.cloud().size([w, h])
    .words(frequency_list)
    .padding(5)
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font("Impact")
    .fontSize(function(d) { return sizeScale(d.freq); })
    .on("end",draw)
    .start();

But I’m not able to find it.


Source: stackoverflow-php