title: I'm trying to build D3.js by using CodeMirror editor, but anything I input in there can't be properly visualized by D3.js. What am I missing?
body: <p>I'm new to D3.js and CodeMirror (and to StackOverflow as well, please pardon my mistakes) and I want to try some cool stuff for my newest project, so these two are my best bet but I had some problem. Please help me noticing what I'm doing wrong, and what the best solution to make this program work out. I'm glad we have good forum here.</p>
  
  <p>So, long story short, I'm trying to build a visualization tools by using D3.js and CodeMirror as my editor. For example, <a href="http://bl.ocks.org/mbostock/4061502" rel="nofollow">this</a> is what I try to visualize, but instead of reading the <code>morley.csv</code> data (<a href="http://bl.ocks.org/mbostock/4061502#morley.csv" rel="nofollow">hard-coded</a>), I want to input the data from my CodeMirror editor. So this is what I write for the editor:</p>
  
  <pre><code>&lt;textarea id="values"&gt;&lt;/textarea&gt;
  
  &lt;script&gt;
    var editor = CodeMirror.fromTextArea(values, {
      lineNumbers: true,
      matchBrackets: true,
      theme : '3024-day'
    });
  &lt;/script&gt;
  
  &lt;a id="gen" class="btn btn-primary btn-block" role="button"&gt;Generate Visualization&lt;/a&gt;
  </code></pre>
  
  <p>And this for the visualization builder:</p>
  
  <pre><code>&lt;div class="row" id="chart"&gt;
    &lt;script&gt;
      d3.select("#gen").on("click", function(){
        d3.event.preventDefault(); 
        d3.select("#chart svg").remove();
        var dataset = editor.getValue();
  
        var margin = {top: 10, right: 50, bottom: 20, left: 50},
        width = 120 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
  
        var min = Infinity,
        max = -Infinity;
  
        var chart = d3.box()
        .whiskers(iqr(1.5))
        .width(width)
        .height(height);
  
        d3.csv(dataset, function(error, csv) {
          if (error) throw error;
  
          var data = [];
  
          csv.forEach(function(x) {
          var e = Math.floor(x.Expt - 1),
          r = Math.floor(x.Run - 1),
          s = Math.floor(x.Speed),
          d = data[e];
          if (!d) d = data[e] = [s];
          else d.push(s);
          if (s &gt; max) max = s;
          if (s &lt; min) min = s;
          });
  
          chart.domain([min, max]);
  
          var svg = d3.select("#chart").selectAll("svg")
          .data(data)
          .enter().append("svg")
          .attr("class", "box")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.bottom + margin.top)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          .call(chart);
  
          setInterval(function() {
          svg.datum(randomize).call(chart.duration(1000));
          }, 2000); 
        });
  
        function randomize(d) {
          if (!d.randomizer) d.randomizer = randomizer(d);
          return d.map(d.randomizer);
        }
  
        function randomizer(d) {
          var k = d3.max(d) * .02;
          return function(d) {
          return Math.max(min, Math.min(max, d + k * (Math.random() - .5)));
          };
        }
  
        function iqr(k) {
          return function(d, i) {
            var q1 = d.quartiles[0],
            q3 = d.quartiles[2],
            iqr = (q3 - q1) * k,
            i = -1,
            j = d.length;
            while (d[++i] &lt; q1 - iqr);
            while (d[--j] &gt; q3 + iqr);
            return [i, j];
          };
        }
      });
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Let's just assumed I used the same <code>morley.csv</code> for my input data.</p>
  
  <p>Somehow it didn't work as I planned. I don't understand what I'm missing here, but my best guess it must have something to do with how <code>d3.csv</code> can't parse my input from <code>textarea values</code>. The output <code>div chart</code> is always show nothing..</p>
  
  <p>Thanks for helping out, although I'm new here. Any help is more than appreciated.</p>