jSon to D3js grouping data from nested arrays

Question

I'm very new to doing anything with d3 and jSon. Here is a pice of data I'm trying to get out from json and I would just like to know if I'm even on the right path.

Basically each status group would have more servers inside than just one like at the moment and the idea would be to get rectangle graph for one server and list these nicely next to each other.

I've been reading a lot of tutorials and trying to browse for similiar kind of issues other people might've had, but so far had really no luck...

jSon data I'm trying to pull out

[
{
    "status": "ok",
    "servers":
            [
                {
                    "id": "VR01",
                    "servername": "Server_1",
                    "cpu": 45, "mem": 25,
                    "diskIO": 0, "bandwith": 200
                }

            ]
},
{
    "status": "attention",
    "servers":
            [
                {
                    "id": "VR10",
                    "servername": "Server_10",
                    "cpu": 55, "mem": 35,
                    "diskIO": 1, "bandwith": 2000
                }
            ]

},
{
    "status": "warning",
    "servers":
            [
                {
                    "id": "VR02",
                    "servername": "Server_02",
                    "cpu": 98, "mem": 85,
                    "diskIO": 1,
                    "bandwith": 2000
                }
            ]

},
{
    "status": "dead",
    "servers":
            [
                {
                    "id": "VR20",
                    "servername": "Server_20",
                    "cpu": 0, "mem": 0,
                    "diskIO": 0,
                    "bandwith": 0
                }
            ]

}

]

the D3 bit

   <script> 

      var width = ("width", 1000);
      var height = ("height", 800);



    d3.json("mydata.json", function(data) {

        var canvas = d3.select("body").append("svg")
             .attr("width", width)
             .attr("height", height)


      var status = function sortData(data){

          for (i = 0; i < d.length; i++) {

                if(d.status ==="ok")
                    canvas.selectAll("rect")
                    .data(d.server)
                    .enter()
                        .append("rect")
                        .attr("x", 25)
                        .attr("y", function(d, i){return 25 * i;})
                        .attr("fill", "purple")
                  }

              }



          })
    </script>          

Really appreciate any suggestions you might have!

Answer 1

I think that it would be better to use nested selections to create your dashboard.

// Create one group for each server group
var serverGroup = svg.selectAll('g')
   .data(data)
   .enter()
   .append('g')
   .attr('transform', function(d, i) { return 'translate(0, ' + 50 * i + ')');

// Create the inner elements for each group
var servers = serverGroup.selectAll('rect')
    .data(function(d) { return d.servers; })
    .enter()
    .append('rect')
    // ... more settings here ...

This will create three groups, one for each group of servers and translate each one vertically. Each group contains the group data, so we can use the group data to create elements inside each group. Also, you can add a title, background color and other settings for each group using this structure. This article contains the concepts that you need to work on your problem: How Selections Work . Regards,