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

Question

New to D3...

I am trying to replicate a simple example but with my data from mysql. Since I renamed my columns to "name" and "size" it should be an easy transition. I believe the line/item !d.children; is restricting the data to be processed or my code is errored.

How can I add a class to the existing .json?

or

What code do I need to remove to make the existing .json work?

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

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("json.php", function(error, root) {
  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");

</script>

json.php

<?php
$username = "homedbuser"; 
$password = "homedbuser";   
$host = "localhost";
$database="homedb";

$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);

$myquery = "
SELECT  `name`, `size` FROM  `lists`
";
    $query = mysql_query($myquery);

    if ( ! $myquery ) {
        echo mysql_error();
        die;
    }

    $data = array();

    for ($x = 0; $x < mysql_num_rows($query); $x++) {
        $data[] = mysql_fetch_assoc($query);
    }

    echo json_encode($data);     

    mysql_close($server);
?>

Additionally, I think there is an error with root in the script (is suppose to be data). I will continue to update the code with my research until there have been responses.

Answer 1

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");