CODEWITHSUNDEEP
d3.jschartsgeojson
Venkat Kiran
Venkat Kiran

Reputation: 37

how to draw a d3 bubble chart for a local geojson file

I want to plot a d3 bubble chart. By taking the example from d3 This link i tried to get the bubble chart for my local file i.e myfile.geojson. The code which i tried is in the plunker link. I want to plot a bubble chart based on the value "Profit". Tried everything in the google and youtube but i didnt get the solution to my problem. Plunker link
I am new to d3. If i do any mistakes in the code please suggest me to make them correct. Thanks In advance.

Upvotes: 2

Views: 461

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Your data is way different from flare.json so copying the recurse code will not make your data. Your dataset is very simple it does not need a recursion to flatten the dataset.

function classes(root) {
  var classes = [];

  function recurse(profit, node) {
    if (node.profit) node.profit.forEach(function(child) { recurse(node.profit, child); });
    else classes.push({packageName: type, className: node.profit, value: node.profit});
  }

  recurse(null, root);
  return {features: classes};
}

This should have been:

function classes(root) {
  var classes = root.features.map(function(f, i) {
    //here i is the index
    return {
      value: f.properties.profit,
      className: "Hello" + i,////just giving some dummy values
      packageName: i//just giving some dummy values
    }
  });
  return classes;
}

Now pass this data to the bubble layout like this:

var node = svg.selectAll(".node")
        .data(bubble.nodes({
          children: classes(root)
        }).filter(function(d) {
          return !d.children;
        }))
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) {

          return "translate(" + d.x + "," + d.y + ")";
        });

EDIT

The bubble chart is based on the profit value:

The radius of the circle depends on the value you give here inside the classes function.

return {
          value: f.properties.profit,
          className: "Hello" + i,////just giving some dummy values
          packageName: i//just giving some dummy values
        }

Thus more the value or f.properties.profit the bigger will be the radius. The radius will be relative to the diameter you setting here:

 var bubble = d3.layout.pack()
      .sort(null)
      .size([diameter, diameter])

Read Domain range in d3 https://www.dashingd3js.com/d3js-scales

In place of className and packageName what should i give to get the bubble chart based on the profit value.

This i don't know what to answer I think your concept is not clear so is the naive question.

If you see the code packageName defines the color

.style("fill", function(d) {
          return color(d.packageName);
        });

and className defines the text to be displayed in the bubble

   .text(function(d) {
      return d.className;
    });

Kindly see the code in fiddle its very simple to understand.

Working code here.

Upvotes: 1

Related Questions