JSON instead of CSV for bubble chart

Question

I'm using bubble chart which takes input from csv file, is there a way to use JSON instead?

Here is the Problem url: http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/provider-view

Problem Code:

d3.csv(flare.csv, function(d) {

//console.log(d);
  d.value = +d.value;
   d.seq = +d.seq;
  if (d.value) return d;
}, function(error, classes) {
  if (error) throw error;

  var root = d3.hierarchy({children: classes})
      .sum(function(d) { return d.value; })
      .each(function(d) {
        if (id = d.data.id) {
          var id,seq, i = id.lastIndexOf(".");
          d.id = id;//console.log(i + "  " + id);
          d.package = id.slice(0, i);//console.log(d.package);
          d.class = id.slice(i + 1);
          d.seq = d.data.seq;
        }
      });

  var node = svg.selectAll(".node")
    .data(pack(root).leaves())
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
      if(d.seq==1){
      d.x = d.x - 100;
          d.y = d.y + 20;
       return "translate(" + d.x + "," + d.y + ")";
      }else{
      d.x = d.x + 500;
            d.y = d.y + 20;
      return "translate(" + d.x + "," + d.y + ")";
       }      });

  node.append("circle")

      .attr("id", function(d) { return d.id; })
      .attr("r", function(d) { d.r = parseInt(d.r)-5; return d.r; })
      .attr("onclick",function(d) { return "demo('" +d.id + "',"+ d.seq+","+ (d.x+d.r+111)+","+ (d.y+100-30)+");"; })
      .style("fill", function(d) { //console.log(d.seq);
      if(d.seq==1){
       return "url(#gradient1)";
      }else{
      return "#773F9B";
       }    

      });

  node.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.id; })
    .append("use")
      .attr("xlink:href", function(d) { return "#" + d.id; });

  node.append("div")
        .attr("id","tooltip")
       .attr("style","width:100px;height:10px;background-color:gray;z-index:1000");

});

Sample csv :

id,value,seq
demo11,100,1
demo12,200,1
demo13,300,1
demo14,400,1
demo15,500,1
demo16,600,1
demo17,600,1
demo21,50,2
demo22,100,2
demo23,150,2
demo24,200,2
demo25,250,2
demo26,300,2
demo27,350,2

Answer 1

The short answer is: yes.

The long answer: to change the data from a csv file to a json file, it's not simply a matter of changing d3.csv for d3.json. That's necessary, of course, as @RobertLongson said in the comments. But, besides that, you'll have to understand how d3.csv creates an array of objects with your CSV, since you need to create your JSON mimicking that array.

So, given your CSV, this is how d3.csv creates an array of objects:

var data = d3.csvParse(d3.select("#csv").text());

console.log(JSON.stringify(data))

pre {
	display: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">id,value,seq
demo11,100,1
demo12,200,1
demo13,300,1
demo14,400,1
demo15,500,1
demo16,600,1
demo17,600,1
demo21,50,2
demo22,100,2
demo23,150,2
demo24,200,2
demo25,250,2
demo26,300,2
demo27,350,2</pre>

That being said, to change your data from CSV to JSON (without doing any further change in the code), your JSON need to have exactly this structure:

[{
    "id": "demo11",
    "value": "100",
    "seq": "1"
}, {
    "id": "demo12",
    "value": "200",
    "seq": "1"
}, {
    "id": "demo13",
    "value": "300",
    "seq": "1"
}, {
    "id": "demo14",
    "value": "400",
    "seq": "1"
}, {
    "id": "demo15",
    "value": "500",
    "seq": "1"
}, {
    "id": "demo16",
    "value": "600",
    "seq": "1"
}, {
    "id": "demo17",
    "value": "600",
    "seq": "1"
}, {
    "id": "demo21",
    "value": "50",
    "seq": "2"
}, {
    "id": "demo22",
    "value": "100",
    "seq": "2"
}, {
    "id": "demo23",
    "value": "150",
    "seq": "2"
}, {
    "id": "demo24",
    "value": "200",
    "seq": "2"
}, {
    "id": "demo25",
    "value": "250",
    "seq": "2"
}, {
    "id": "demo26",
    "value": "300",
    "seq": "2"
}, {
    "id": "demo27",
    "value": "350",
    "seq": "2"
}]