CODEWITHSUNDEEP
javascriptphpjsoncsvd3.js
Abbas
Abbas

Reputation: 23

use d3.json instead of d3.csv to create bubble chart

I'm trying to use following code to create a bubble chart: https://bl.ocks.org/mbostock/4063269 This code uses this for loading a csv file:

d3.csv("flare.csv", function(d) {
  d.value= +d.value;
  if (d.value) return d;
}, function(error, classes) {
  if (error) throw error;

I would like to load a json file instead, so I wrote this:

d3.json("data1.php", function(d) {
    d.forEach(function(data) {
        data.value= +data.value;
    });
    if (d.value) return d;
    },function(error, classes) {
  if (error) throw error;

the output of php file is this:

[{"disease":"Cold","value":"33"},{"disease":"Anemia","value":"23"},{"disease":"Hepatitis B","value":"21"},{"disease":"Gum disease","value":"19"},{"disease":"Lung Cancer","value":"17"},{"disease":"Diarrhea","value":"15"},{"disease":"Strep Throat","value":"13"},{"disease":"STDs","value":"11"},{"disease":"Heart Disease","value":"8"},{"disease":"Type 2 Diabetes","value":"6"}]

for some reason my code (using d3.json ...) is not working. and I just get a blank page. I really appreciate your inputs.

Upvotes: 2

Views: 337

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Unlike d3.csv, d3.json does not accept an accessor function.

So, instead of this:

d3.json("data1.php", function(d) {
    d.forEach(function(data) {
        data.value= +data.value;
    });
    if (d.value) return d;
    }, function(error, classes) {
    if (error) throw error;

It should be this:

d3.json("data1.php", function(error, classes) {
    if (error) throw error;

And do your forEach with classes inside the callback.

Upvotes: 1

Related Questions