I am trying to load a JSON file to be used in a D3 plus visualization using jQuery

Question

I am trying to create a boxplot by using D3plus and uploading/storing JSON data into a variable with jQuery:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head> 
    <script src="./JS/d3.min.js"></script>
    <script src="./JS/d3plus.min.js"></script>
    <script src="./JS/jQuery.min.js"></script>  
</head>
<body>

<div id="viz"></div>

<script>
  var data;

  $.getJSON("./Data/boxplot.json", function(json) {
      data = json;
  });
  var visualization = d3plus.viz()
    .container("#viz")
    .data(data)
    .type("box")
    .id("name")
    .x("building")
    .y("total")
    .time(false)
    .height(800)
    .ui([{ 
        "label": "Visualization Type",
        "method": "type", 
        "value": ["scatter","box"]
      }])
    .draw()
</script>

</body>
</html>

If I copy-and-past the json data into the file, it works. However, when I try to fetch the data from an external json file stored in a folder "Data", it doesn't work. I get the error: "Box Plot visualizations require setting the "data" method".

Here is my file structure:

Here is my json file:

[{"building":"MMB","name":"Shane","total":1},{"building":"MMB","name":"Geneviève, Bérubé","total":1},{"building":"MMB","name":"Dana","total":10},{"building":"MMB","name":"karine","total":2},{"building":"MMB","name":"Anthony","total":1},{"building":"MMB","name":"Erwin","total":6},{"building":"MMB","name":"Jake","total":2},
{"building":"MMB","name":"Karen","total":1},{"building":"MMB","name":"sabrina","total":2},{"building":"MMB","name":"Jeannine","total":4}]

Thank you very much for your time!

EDIT:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head> 
    <script src="./JS/d3.min.js"></script>
    <script src="./JS/d3plus.min.js"></script>
    <script src="./JS/jQuery.min.js"></script>  
</head>
<body>

<div id="viz"></div>

<script>

 $.getJSON("./Data/boxplot.json", function(json) {
  data = json,
  success = function(data){
    .container("#viz")
    .data(data)
        .type("box")
        .id("name")
        .x("building")
        .y("total")
        .time(false)
        .height(800)
        .ui([{ 
            "label": "Visualization Type",
            "method": "type", 
            "value": ["scatter","box"]
        }])
        .draw()
  }
})
</script>

</body>
</html>

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jaromanda X, Oct 10 '16 at 00:08
$.getJSON is asynchronous - therefore data wont be populated until after all that code after the getJSON call runs — Jaromanda X, Oct 10 '16 at 00:09

larz · Accepted Answer · 2016-10-10T02:21:43.387

$.getJSON("./Data/boxplot.json", function(json) {
  data = json,
  success = function(data){
    d3plus.viz()
      .container("#viz")
      .data(data)
      .type("box")
      .id("name")
      .x("building")
      .y("total")
      .time(false)
      .height(800)
      .ui([{ 
          "label": "Visualization Type",
          "method": "type", 
          "value": ["scatter","box"]
      }])
      .draw()
   }
})

Something like that should work. The value of "success" after your getJSON call is a function that will be called after the asynchronous response is return (thus the data parameter which is passed to the function). Didn't check that the D3 stuff worked but that should solve your AJAX call problem.

score 1 · Answer 2 · answered Apr 23 '17 at 18:21

D3plus supports loading data from JSON files. Simply pass the path to the data method:

var visualization = d3plus.viz()
    .container("#viz")
    .data("./Data/boxplot.json")
    .type("box")
    .id("name")
    .x("building")
    .y("total")
    .time(false)
    .height(800)
    .ui([{ 
        "label": "Visualization Type",
        "method": "type", 
        "value": ["scatter","box"]
      }])
    .draw();

And for reference, here are all of the custom properties that can be set for the data method: https://github.com/alexandersimoes/d3plus/wiki/Visualizations#data

I am trying to load a JSON file to be used in a D3 plus visualization using jQuery

2 Answers2