title: D3 - word cloud, Chinese text implementation
body: <p>I'm trying to visualize a speech that has been transcribed to Chinese text. I tried pointing to the whole text file as well as a simple hard coded text string, but no matter what, I'm getting no errors. For this reason, I am unsure how to troubleshoot further.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var text_string = "CHINESE TEXT HERE";
  //word cloud start
      //d3.text('jin-bo-speech.txt', function(text) {
  
        //var text_string = text;
  
        drawWordCloud(text_string);
  
        function drawWordCloud(text_string){
  
          var word_count = {};
  
          var words = text_string.split(/[\-\(\)\*":;\[\]|{},.!?]+/);
            if (words.length == 1){
              word_count[words[0]] = 1;
            } else {
              words.forEach(function(word){
                var word = word.toLowerCase();
                if (word != "" &amp;&amp; word.length&gt;1){
                  if (word_count[word]){
                    word_count[word]++;
                  } else {
                    word_count[word] = 1;
                  }
                }
              })
            }
  
          var svg_location = "#chart";
          var width = 1200;
          var height = 600;
  
          var svg = d3.select('body')
              .append('svg')
              .attr('width', width)
              .attr('height', height);
  
          var fill = d3.scale.linear()
                  .range(["#15198e","#adc8f0",'gray']);
  
          var word_entries = d3.entries(word_count);
  
          console.log(word_count)
  
          var xScale = d3.scale.linear()
             .domain([0, d3.max(word_entries, function(d) {
                return d.value;
              })
             ])
             .range([10,100]);
  
          d3.layout.cloud().size([width, height])
            .timeInterval(20)
            .words(word_entries)
            .fontSize(function(d) { return xScale(+d.value); })
            .text(function(d) { return d.key; })
            .rotate(0)
            .font("Teko")
            .on("end", draw)
            .start();
  
          function draw(words) {
            d3.select("svg")
              .append("g")
                .attr("transform", "translate(" + [width &gt;&gt; 1, height &gt;&gt; 1] + ")")
              .selectAll("text")
                .data(words)
              .enter().append("text")
                .style("font-size", function(d) { return xScale(d.value) + "px"; })
                .style("font-family", "Teko")
                .style("fill", 'gray')
                .attr("text-anchor", "middle")
                .attr("transform", function(d) {
                  return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .text(function(d) { return d.key; });
  
  d3.layout.cloud().stop();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="chart"&gt;&lt;/div&gt;
     &lt;script src="https://gist.githubusercontent.com/ericcoopey/6382449/raw/c61e6febb945ca6833089c1d39a5a40bb14d2734/d3.layout.cloud.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I do notice is that when I hard-code the text in my script, the console log correctly shows the text (see the variable <code>text_string</code>). However, despite <code>text_string</code> being defined, the word cloud doesn't draw. </p>
  
  <h2>Question</h2>
  
  <p>Can anyone with experience with Jason Davies' word cloud share their thoughts on visualizing text in other languages?</p>
  
  <p><strong>Note:</strong> For accuracy, I tried including actual Chinese text in the snippet, but that impeded my entire post -- I guess there are English-only rules on SE.</p>