CODEWITHSUNDEEP
javascriptpythonflaskd3.js
mikelowry
mikelowry

Reputation: 1727

Dataframe to Json to D3 via Flask

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:

df  = pd.DataFrame({'Name':  ['JOHN DOE', 'APPLE INC', 'MIKE LOWRY'],
        'Value': ['10', '20','30']})

df_json_output = df.to_json()

Then after taking the sample d3 treemap code on the d3 website I just changed the data source

From:

// read json data
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json", function(data) {

to

// read json data
d3.json({{ df_json_putput }}, function(data) {

Unfortunately I'm getting the following error: enter image description here

enter image description here

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?

Full script:


    <script>

                                // 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("#treemap")
                                .append("svg")
                                  .attr("width", width + margin.left + margin.right)
                                  .attr("height", height + margin.top + margin.bottom)
                                .append("g")
                                  .attr("transform",
                                        "translate(" + margin.left + "," + margin.top + ")");
                                
                                // 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("rect")
                                    .data(root.leaves())
                                    .enter()
                                    .append("rect")
                                      .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("stroke", "black")
                                      .style("fill", "slateblue")
                                
                                  // and to add the text labels
                                  svg
                                    .selectAll("text")
                                    .data(root.leaves())
                                    .enter()
                                    .append("text")
                                      .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
                                      .attr("y", function(d){ return d.y0+20})    // +20 to adjust position (lower)
                                      .text(function(d){ return d.data.name })
                                      .attr("font-size", "15px")
                                      .attr("fill", "white")
                                })
                                </script>

Upvotes: 1

Views: 198

Answers (2)

readyplayer77
readyplayer77

Reputation: 2159

Yes. d3.json is only meant to read the json file. Try directly setting the variable data to the value you have returned from python. To prevent the unexpected token error, use the tojson in jinja2 so javascript would recognize the JSON correctly.

let data = {{ df_json_putput|tojson }};

Upvotes: 1

ee2Dev
ee2Dev

Reputation: 1998

In case you have a JSON object instead of a file just change

d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json", function(data) {

// do something

}

to

  let data = myJSonVariable; // in your case: data = {{ df_json_putput }};
  // do something

Upvotes: 1

Related Questions