Mysql to JSON to D3js no Visual... "class" identification error

The chart you're trying requires the data to be in hierarchical format. With the query you've given it doesn't seems that the data is in hierarchy.

I've used csv data but it doesn't matter, I've given the format i used to for the chart you've given in the link.

Write your SQL Query to get the data in the below format and use the d3.json and import the php file, everything should work fine.

I've pasted all the codes and sample data.

This might help you out. Any issues please provide with the sample data too.

Data:

    name,size    level1,23    level1,23    level1,23    level1,23    level1,23    level1,23    level1,23    level1,23    level1,23    level2,23    level2,23    level2,23    level2,23    level2,23    level2,23    level2,23    level2,23    level2,23

Function Used to Convert to Hierarchy :

    d3.csv("data.csv", function(root) {                var newData = { name :"root", children : [] },                    levels = ["name"];                // For each data row, loop through the expected levels traversing the output tree                root.forEach(function(d){                    // Keep this as a reference to the current level                    var depthCursor = newData.children;                    // Go down one level at a time                    levels.forEach(function( property, depth ){                        // Look to see if a branch has already been created                        var index;                        depthCursor.forEach(function(child,i){                            if ( d[property] == child.name ) index = i;                        });                        // Add a branch if it isn't there                        if ( isNaN(index) ) {                            depthCursor.push({ name : d[property], children : []});                            index = depthCursor.length - 1;                        }                        // Now reference the new child array as we go deeper into the tree                        depthCursor = depthCursor[index].children;                        // This is a leaf, so add the last element to the specified branch                        if ( depth === levels.length - 1 ) depthCursor.push({ name : d.name, size : d.size });                    });                });                //Print what we've got                d3.select('body').append('pre')                           .text(JSON.stringify(newData, null, '  '));            })

Script by combining both the function :

    var diameter = 960,        format = d3.format(",d"),        color = d3.scale.category20c();    var bubble = d3.layout.pack()        .sort(null)        .size([diameter, diameter])        .padding(1.5);    var svg = d3.select("body").append("svg")        .attr("width", diameter)        .attr("height", diameter)        .attr("class", "bubble");    d3.json("yourphpfile.php", function(error, data) {        var root = { name :"root", children : [] },                    levels = ["name"];                // For each data row, loop through the expected levels traversing the output tree                data.forEach(function(d){                    // Keep this as a reference to the current level                    var depthCursor = root.children;                    // Go down one level at a time                    levels.forEach(function( property, depth ){                        // Look to see if a branch has already been created                        var index;                        depthCursor.forEach(function(child,i){                            if ( d[property] == child.name ) index = i;                        });                        // Add a branch if it isn't there                        if ( isNaN(index) ) {                            depthCursor.push({ name : d[property], children : []});                            index = depthCursor.length - 1;                        }                        // Now reference the new child array as we go deeper into the tree                        depthCursor = depthCursor[index].children;                        // This is a leaf, so add the last element to the specified branch                        if ( depth === levels.length - 1 ) depthCursor.push({ name : d.name, size : d.size });                    });                });      var node = svg.selectAll(".node")          .data(bubble.nodes(classes(root))          .filter(function(d) { return !d.children; }))        .enter().append("g")          .attr("class", "node")          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });      node.append("title")          .text(function(d) { return d.className + ": " + format(d.value); });      node.append("circle")          .attr("r", function(d) { return d.r; })          .style("fill", function(d) { return color(d.packageName); });      node.append("text")          .attr("dy", ".3em")          .style("text-anchor", "middle")          .text(function(d) { return d.className.substring(0, d.r / 3); });    });    // Returns a flattened hierarchy containing all leaf nodes under the root.    function classes(root) {      var classes = [];      function recurse(name, node) {        if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });        else classes.push({packageName: name, className: node.name, value: node.size});      }      recurse(null, root);      return {children: classes};    }    d3.select(self.frameElement).style("height", diameter + "px");