Bubble chart in d3.js

Question

http://plnkr.co/edit/7aw93EnMyCR3HjTu1uHa?p=preview

I have added the working fiddle. I need to plot bubble chart on the basis of "profit" value in properties of "taluks.geojson" file. This is working for flare.json but not for taluks.geojson file.

I have tried modifying the code in index.html as-

d3.json("taluks.geojson", function(error, root) { if (error) throw error;

var node = svg.selectAll(".node") .data(bubble.nodes(classes(root)) .filter(function(d) { return !d.properties; }))

// Returns a flattened hierarchy containing all leaf nodes under the root.

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

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

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

But the code is not working for taluks.geojson but only working for flare.json. Please help regarding how to plot bubble chart on the basis of profit in properties of taluks.geojson file. Please kindly suggest any further modificatons.

Thank you.

Answer 1

To render bubble chart or tree chart data should be in relational format parent and child, If you see flare.json data

{
 "name": "flare",//root parent or level 0
 "children": [
  {
   "name": "analytics",//child node or level 1
   "children": [
    {
     "name": "cluster", //child node to analytics or level 2
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    }]
  }]
}
/*
 * In the above the data is hierarchical here flare will be like parent and children are in children array, name will be name of the node and at the end node or leaf node we don't have any children so here we reached to leaf 

and taluks.geojson is not having the structure of desired manner. So we have to make it into our desired structure.
     * 
     */
    var data= d3.nest().key(function(d){ return d.properties.NAME_2;}).key(function(d){ return d.properties.NAME_3;}).entries(root.features);
    /*
     * d3.nest function will perform the grouping operation mentioned/returned by the key function, this function is used to group elements by using key and it takes the data from entries function.
     * so as per above code we are grouping by NAME_2 which is district name and again we are grouping that data based on NAME_3
     * from above we'll get data in below format
     * [{"key":"East Godavari","values":[
     *      {"key":"Kottapeta","values":[
     *      {"type":"Feature","properties":{"NAME_2":"East Godavari","NAME_3":"Kottapeta","profit":326,"npa":174},
     *      "geometry":{"type":"MultiPolygon","coordinates":[
     *      [[[81.75195312500006,16.772489547729492],[81.76336669921892,16.7611598968507],[81.7764129638673,16.755041122436637],[81.76336669921875,16.7611598968507],[81.75195312500006,16.772489547729492]]]
     *      ]}}]
     *      },
     *      {"key":"Rajahmundry","values":[{"type":"Feature","properties":{"NAME_2":"East Godavari","NAME_3":"Rajahmundry","profit":1762,"npa":1683},"geometry":{"type":"MultiPolygon","coordinates":[
     *      [[[81.71717071533203,17.0606307983399],[81.72284698486357,17.047969818115348],[81.72709655761736,17.035369873046875],[81.72931671142607,17.02490997314453],[81.73168945312517,17.009309768676758],[81.73249053955084,16.990680694580135],[81.731689453125,17.009309768676758],[81.7293167114259,17.02490997314453],[81.72709655761719,17.035369873046875],[81.7228469848634,17.047969818115348],[81.71717071533203,17.0606307983399]]],
     *      ]}}]
     *      },
     *      {"key":"Rampa Chodavaram","values":[{"type":"Feature","properties":{"NAME_2":"East Godavari","NAME_3":"Rampa Chodavaram","profit":376,"npa":362},"geometry":{"type":"MultiPolygon","coordinates":[[[[81.64000701904303,17.217769622802678],[81.63854217529308,17.24398994445812],[81.64405822753918,17.25922966003418],[81.64591217041021,17.293151855468864],[81.64405822753935,17.25922966003418],[81.63854217529325,17.24398994445812],[81.64000701904303,17.217769622802678]]],
     *      [[[81.51127624511724,17.463871002197266],[81.51648712158232,17.458469390869084],[81.52410888671903,17.454042434692326],[81.53122711181658,17.4517498016358],[81.55007171630854,17.447589874267692],[81.5312271118164,17.4517498016358],[81.52410888671886,17.454042434692326],[81.51648712158214,17.458469390869084],[81.51127624511724,17.463871002197266]]]]}}]
     *      },
     *      {"key":"Razole","values":[
     *      {"type":"Feature","properties":{"NAME_2":"East Godavari","NAME_3":"Razole","profit":1185,"npa":1141},"geometry":{"type":"MultiPolygon","coordinates":[
     *      [[[81.6993026733399,16.41020011901867],[81.70881652832048,16.383939743041992],[81.7134628295899,16.35638809204113],[81.70881652832031,16.383939743041992],[81.6993026733399,16.41020011901867]]],
     *      ]}}]
     *      }
     * .........
     * ]}]
To know more about d3 nest function go this link https://github.com/mbostock/d3/wiki/Arrays
     * above structure is generated by d3.nest function, now we need to arrange that data into parent child hierarchical data, for this we are using below code
     */
    var myData={name:'flare', children:[]};//this will be root 
    data.forEach(function(distc){
            var dis={};
            dis.name=distc.key;//here distc will hold one level write console.log(distc); and observe the data
            dis.children = [];
            myData.children.push(dis);
            distc.values.forEach(function(chil){
              var chis={};
              chis.name=chil.key;
              // chis.children=chil.values;
              chis.size=chil.values[0].properties.profit;//we are using size as value in recurse function of classes function and we want to display bubble chart on profit value
              dis.children.push(chis);



    });

});
console.log(myData);//myData has the desired structure
root=myData;//assigning that json to root variable

I think you know what happens with the rest of the code. Hope everything is clear, If not ask me for more. :D

In order to create bubble chart we are using d3 pack layout, this layout we are generated at var bubble = d3.layout.pack() .sort(null) .size([diameter, diameter]) .padding(1.5); and this bubble calling nodes at this line

var node = svg.selectAll(".node") .data(bubble.nodes(classes(root))//here bubble.nodes takes the json, that json should be in leaf structure, nodes function will generate relational data, write console.log(bubble.nodes(classes(root))); Here we are using classes function, because flare.json has already relational format json but bubbles.nodes need leaf structure so in classes function we are converting that flare.json relational structure into leaf .filter(function(d) { return !d.children; })) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });