title: Dataframe to Json to D3 via Flask
body: <p>I'm currently building a flask webapp and trying to create a d3 chart. D3 takes json as the data input, so I converted my dataframe to json in the following way:</p>
  <pre><code>df  = pd.DataFrame({'Name':  ['JOHN DOE', 'APPLE INC', 'MIKE LOWRY'],
          'Value': ['10', '20','30']})
  
  df_json_output = df.to_json()
  
  </code></pre>
  <p>Then after taking <a href="https://www.d3-graph-gallery.com/graph/treemap_json.html" rel="nofollow noreferrer">the sample d3 treemap code</a> on the d3 website I just changed the data source</p>
  <p>From:</p>
  <pre><code>// read json data
  d3.json(&quot;https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json&quot;, function(data) {
  
  </code></pre>
  <p>to</p>
  <pre><code>// read json data
  d3.json({{ df_json_putput }}, function(data) {
  
  </code></pre>
  <p>Unfortunately I'm getting the following error:
  <a href="https://i.stack.imgur.com/I0gp4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I0gp4.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/RyNAo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RyNAo.png" alt="enter image description here" /></a></p>
  <p>My hunch is that the script is only meant to take a link to a json file, not the actual values? Is it possible to do without a link? But actually just feed it the json values?</p>
  <p>Full script:</p>
  <pre><code>
      &lt;script&gt;
  
                                  // set the dimensions and margins of the graph
                                  var margin = {top: 10, right: 10, bottom: 10, left: 10},
                                    width = 450 - margin.left - margin.right,
                                    height = 450 - margin.top - margin.bottom;
                                  
                                  // append the svg object to the body of the page
                                  var svg = d3.select(&quot;#treemap&quot;)
                                  .append(&quot;svg&quot;)
                                    .attr(&quot;width&quot;, width + margin.left + margin.right)
                                    .attr(&quot;height&quot;, height + margin.top + margin.bottom)
                                  .append(&quot;g&quot;)
                                    .attr(&quot;transform&quot;,
                                          &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
                                  
                                  // read json data
                                  d3.json({{ df_json_output  }}, function(data) {
                                  
                                    // Give the data to this cluster layout:
                                    var root = d3.hierarchy(data).sum(function(d){ return d.value}) // Here the size of each leave is given in the 'value' field in input data
                                  
                                    // Then d3.treemap computes the position of each element of the hierarchy
                                    d3.treemap()
                                      .size([width, height])
                                      .padding(2)
                                      (root)
                                  
                                    // use this information to add rectangles:
                                    svg
                                      .selectAll(&quot;rect&quot;)
                                      .data(root.leaves())
                                      .enter()
                                      .append(&quot;rect&quot;)
                                        .attr('x', function (d) { return d.x0; })
                                        .attr('y', function (d) { return d.y0; })
                                        .attr('width', function (d) { return d.x1 - d.x0; })
                                        .attr('height', function (d) { return d.y1 - d.y0; })
                                        .style(&quot;stroke&quot;, &quot;black&quot;)
                                        .style(&quot;fill&quot;, &quot;slateblue&quot;)
                                  
                                    // and to add the text labels
                                    svg
                                      .selectAll(&quot;text&quot;)
                                      .data(root.leaves())
                                      .enter()
                                      .append(&quot;text&quot;)
                                        .attr(&quot;x&quot;, function(d){ return d.x0+5})    // +10 to adjust position (more right)
                                        .attr(&quot;y&quot;, function(d){ return d.y0+20})    // +20 to adjust position (lower)
                                        .text(function(d){ return d.data.name })
                                        .attr(&quot;font-size&quot;, &quot;15px&quot;)
                                        .attr(&quot;fill&quot;, &quot;white&quot;)
                                  })
                                  &lt;/script&gt;
  
  
  </code></pre>