Search code examples
javascriptjqueryjsond3.jsd3plus

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

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:

enter image description here

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>
Solution 
  • $.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.