CSS styles for priorisize interface (js) and example data for d3-force collapsible

prio Backup Data

//d3
  var graph = {'name':'Project', 'children':[
      {'name':'analytics', 'children':[
        {'name':'cluster', 'children':[
          {'name':'AgglomerativeCluster', 'size':3938},
          {'name':'CommunityStructure', 'size':3812},
          {'name':'HierarchicalCluster', 'size':6714},
          {'name':'MergeEdge', 'size':743}
        ]},
        {'name':'graph', 'children':[
          {'name':'BetweennessCentrality', 'size':3534},
          {'name':'LinkDistance', 'size':5731},
          {'name':'MaxFlowMinCut', 'size':7840},
          {'name':'ShortestPaths', 'size':5914},
          {'name':'SpanningTree', 'size':3416}
        ]},
        {'name':'optimization', 'children':[
          {'name':'AspectRatioBanker', 'size':7074}
        ]}
      ]}
    ]};



//CSS
@import url(http://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
@import url(http://fonts.googleapis.com/css?family=Denk+One);
#copy{ color: #000000 };

body{
  background-color: #90d1e4;
}

.top-bar{
  background-color: white;
  color: black;
  box-shadow: 0 8px 6px -6px black;
  box-shadow: -1 8px 6px -6px #90d1e4;
}

#logButton{
  height: 80px;
}

#regButton{
  height: 80px;
}

h1{
  font-family: 'Denk One', sans-serif;
  color: white;
  text-shadow: 3px 3px 0px rgba(28, 171, 255, 1);
}


#beta{
  font-family: 'Nothing You Could Do', cursive;
  font-size: 30px;
  color: white;
}


//ELEMENTS
#forms{
  z-index: 1;
  background-color: rgba(138, 193, 201, 0.52);
}

.sandbox{
  border: 3px solid black;
  display: inline-block;
  background-color: white;
  width: 1200px;
  height: 100%;
  min-height: 800px;
  //margin: 10px;
  margin-left: -100px;
  margin-bottom: 100px;
}


//SIZE
.bubble{
  display: inline-block;
  border-radius: 100%;
  margin: 5px;
}

.size-5{
  height: 225px;
  width: 225px;
}

.size-4{
  height: 150px;
  width: 150px;
}

.size-3{
  height: 100px;
  width: 100px;
}

.size-2{
  height: 50px;
  width: 50px;
}

.size-1{
  height: 25px;
  width: 25px;
}






//COLOR
.green{
  background-color: #7ad86b;
}

.red{
  background-color: #ed4747;
}

.yellow{
  background-color: #f0db58;
}

.greenParent{
  background-color: rgba(132, 219, 110, 0.25);
  box-shadow: inset 0 0 100px #7ad86b;
}

.redParent{
  background-color: rgba(240, 72, 72, 0.25);
  box-shadow: inset 0 0 100px #ed4747;
}

.yellowParent{
  background-color: rgba(243, 212, 89, 0.25);
  box-shadow: inset 0 0 100px #f0db58;
}

//COLOR2
.green2{
  background-color: #7ad86b;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.50);
}

.red2{
  background-color: #ed4747;
  box-shadow: 0 0 10px 2px white;
}

.yellow2{
  background-color: #f0db58;
  box-shadow: 0 0 10px 2px white;
}

.greenParent2{
  background-color: rgba(132, 219, 110, 0.25);
  box-shadow: inset 0 0 30px 20px #7ad86b;
}

.redParent2{
  background-color: rgba(240, 72, 72, 0.25);
  box-shadow: inset 0 0 30px 20px #ed4747;
}

.yellowParent2{
  background-color: rgba(243, 212, 89, 0.25);
  box-shadow: inset 0 0 30px 20px #f0db58;
}