Abbas Abbas - 1 month ago 13
Javascript Question

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.

Answer

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.

Comments