Cube Structure - High Level

Major cube components

by Tim Williams

CSS

#nodegroup1{
    fill:#000000;
    fon-family: Serif, Georgia;
    font-size: 14px;   
     font-weight: bold;
  }              
  .nodetext{
     font-size:8;
     color: red;
  }
  .edgelabel{
    font-size:12px;
    fill:darkblue;
  }
  .edges{
    stroke: #ccc;
    stroke-width: 2;
   }
   <!------ Reactivate this line to only have node text when mouseovered
   .node:not(:hover) .nodetext{
     display: none;
   }
   ------->
   <!--- nodes.fixed not currently employed ----->
   .nodes.fixed {
     fill: #f00;
   }

JavaScript

var w = 1000;
  var h = 600;
  var svg = d3.select("body").append("svg")
              .attr("width", w)
              .attr("height", h);

  svg.append("text")
     .text("Cube Structure - High Level")
     .attr("x",10)
     .attr("y",15);

  var colors = d3.scale.category10()
                 .range(["#FFFF00",  //YELLOW
                         "#989898",  //GREY
                         "#377eb8",  //BLUE
                         "#4daf4a",  //GREEN
                         "#e41a1c",  //RED
                         "#FF9933"   //ORANGE
                        ]);  
  //  d3.json("/d3/CubeStructure/Struct-CubeOverview.JSON", function(dataset) {
  var dataset = {
    "nodes":[
      {"id":0,"name":"Observations","group":"1"},
      {"id":1,"name":"DataSet","group":"2"},
      {"id":2,"name":"DataStructureDefinition","group":"2"},
      {"id":3,"name":"Dimensions","group":"3"},
      {"id":4,"name":"Attributes","group":"4"},
      {"id":5,"name":"Measure","group":"5"},
      {"id":6,"name":"Codes","group":"6"},
      {"id":7,"name":"CodeClass","group":"6"},
      {"id":8,"name":"CodeLists","group":"6"}
      ],
    "edges":[
      {"source":0,"target":1,"value":""},
      {"source":1,"target":2,"value":""},
      {"source":2,"target":3,"value":""},
      {"source":2,"target":4,"value":""},
      {"source":2,"target":5,"value":""},
      {"source":3,"target":7,"value":""},
      {"source":3,"target":8,"value":""},
      {"source":8,"target":6,"value":""},
      {"source":8,"target":7,"value":""},
      {"source":7,"target":6,"value":""},
      {"source":6,"target":0,"value":""},
      {"source":0,"target":4,"value":""},
      {"source":0,"target":5,"value":""},
      {"source":0,"target":3,"value":""}
      ]
   }
  var force = d3.layout.force()
                .nodes(dataset.nodes)
                .links(dataset.edges)
                .gravity(.05)
                .charge(-180)
                .linkDistance(100)
                .size([w, h])
               ...