D3OG

All examples By author By category About

maggie-lee

Full window Github gist

1116

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  font: 12px sans-serif;
  
}

body {
   font-family: Helvetica; 
}

.link {
  fill: none;
  stroke: black;  
}

.note{
  font-size: 30px;
  fill: red;
}

.explainer{
  font-size: 14px;
  fill: black;
  
}

.legend{
  font-size: 14px;

}

/********************* NODES *******************/
/* branches of gov*/
.legislative {
  font-size: 22px;
}
.judicial {
  font-size: 22px;
}
.executive {
  font-size: 22px;
}

.other_node{
  opacity: 0.0;

}

.default {
  font-size: 14px;
}

.gboard 
{
  font-size: 14px;

} /* most important boards; gov only appoints */
.cboard
{
  font-size: 14px;

} /* 2nd most important boards; gov appoints, senate confirms */

.aboard
{
  font-size: 14px;  
} 
/* least important boards; everybody & anybody appoints */

.advisory_node
{
  font-size: 14px;
}

.boss {
  font-size: 14px;
}
.eboss {
  font-size: 14px;
}

.court {
  font-size: 14px;
}

.enode
{
  font-size: 12px;
}
/**************END OF NODES *********************/

/****************LINE TYPES*************** */

.under {
  fill: none;
  stroke: #727980;
  stroke-width: 2px;
}

.admin {
  fill: none;
  stroke: #727980;
  stroke-width: 2px;
}

/**** federal programs run thru ga govt*/

.federal {
  fill: none;
  stroke: orange;
  stroke-width: 2px;
}

/****************END OF LINES*********************/

html { -webkit-font-smoothing: antialiased; }

</style>
<body>
<script src="https://d3js.org/d3.v2.js?2.9.3"></script>
<script>

//are all "boss" appointed?

var diameter = 5000;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 120])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [(d.y), (d.x) / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter*1.5)
    .attr("height", diameter*1.2)
  .append("g")
    .attr("transform", "translate(" + diameter / 1.5 + "," + diameter / 2 + ")");

var nodeColor = d3.scale.ordinal()
  .domain([
    "executive",
    "legislative",
    "judicial",
    "default",
    "board",
    "boss",
    "gboard",
    "gboss",
    "court",
    "elected",
    "enode",
    "jdefault",
    "ldefault",  
    "other_node"
 ])

.range([
    "darkblue", // "executive"
    "red", //legislative
    "darkgreen", // judiciary
    "dodgerblue", // default
    "lightblue", // board
    "dodgerblue", // boss
    "gold", //gboard
    "gold", //gboss
    "green",
    "orange", //elected
    "white", //enode
    "lightgreen", //jdefault
    "pink", //ldefault
    "#FFFFFF" //other
    ]);

var legendColor = d3.scale.ordinal() // simplified color scale for legend
  .domain([
    "default",
    "board",
    "elected",
    "gboard",
    "court",
    "jdefault",
    "ldefault", 
 ])

.range([
    "dodgerblue", // executive default
    "lightblue", // board small boards
    "orange", //elected
    "gold", //gboard anything by gov
    "green", //court
    "lightgreen", //jdefault
     "pink", //ldefault
    ]);

////////////////////////////
////////////////////////////
////////////////////////
/////////////////////////////////
////////////////////////
/////// file name ->

d3.csv("orgchartc1119.csv", function(links) {

var nodesByName = {};

// Create nodes for each unique source and target.
  links.forEach(function(link) {
    var parent = link.source = nodeByName(link.source),
        child = link.target = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
  });

for (var i = links.length - 1; i >= 0; i--) {
  links[i].name = links[i].target.name;
};

// Extract the root node and compute the layout.
var nodes = tree.nodes(links[0].source);

var ColorFinder = function(my_string)
{
  for (var i = links.length - 1; i >= 0; i--) 
  {
    if (links[i].name == my_string) {return nodeColor(links[i].label_type);}
  }
};

// var diagonalFinder = function(diameter, some_num)
// {
//   var temp_num = diameter/some_num
//   if (temp_num <= 4)
//     {return (10);}
//   else
//     {return (0.3);}
// }

var dots_array = ("3,3");

// Create the node circles.
  var node = svg.selectAll(".node")
      .data(nodes)
    .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });

var widthFinder = function(diameter, some_num)
{
  var temp_num = diameter/some_num
  if (temp_num <= 4)
      {return (diameter*0.065);}
  else
      {return (diameter * 0.045);}
};

// var opacityFinder = function(diameter, some_num)
// {
//   var temp_num = diameter/some_num
//   if (temp_num <= 5)
//     {return (10);} // dark ones
//   else
//     {return (0.3);}
// }

else
    {return (-diameter/100);}
}

node.append("rect")
    .attr("x", function(d) {return xFinder(diameter, d.y);})
    .attr("y", -7)
    .attr("width", function(d) {return widthFinder(diameter, d.y); })
    .attr("height", 20)
    //.attr("height", function(d) {return LabelFinder(d.name) == "default" ? 10 : 20; })
    .attr("rx", 15)
    .attr("ry", 15)
    .attr("fill", function(d) {return ColorFinder(d.name); })
 //   .style("opacity", function(d) {return opacityFinder(diameter, d.y);})
    .attr("class", function(d) {return LabelFinder(d.name); });

node.append("g:text")
     
      .attr("x", function(d) { return d.x < 180 ? (xFinder(diameter, d.y)) : -xFinder(diameter, d.y); }  )
      .attr("y", 4)
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d)   { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
      .attr("class", function(d) {return LabelFinder(d.name);})
      .attr("fill", "black")
      .attr("id", "tspan")
      .text(function(d) { return TextFinder(d.name); });

var legend = svg.selectAll(".legend")
      .data(legendColor.domain())
    .enter().append("g")
      .attr("class", "legend");

legend.append("rect")
      .attr("x", diameter/-2)
      .attr("y", function(d,i) {return i*(diameter*.02);})
      .attr("width", diameter*0.01)
      .attr("height", diameter*0.01)
      .attr("fill", function(d) {return legendColor(d); });

legend.append("text")
      .attr("x", diameter/-2.05)
      .attr("y", function(d,i) {return i*(diameter*.02);})
      .attr("dy", ".35em")
      .style("text-anchor", "start")
      .text("LEGEND TEXT");

svg.append("text")
  .text("DRAFT ONLY!!")
  .attr("class", "note");

svg.append("text") // state financing and investment commission
  .text("Issues general obligation bonds")
  .attr("class", "explainer");

svg.append("text") // georgia highway authority
  .text("Issues revenue bonds")
  .attr("class", "explainer");

svg.append("text") // Georgia Charter Schools Commission
  .text("The Board of Education appoints members from recommendations from the governor and leaders of the House and Senate")
  .attr("class", "explainer");

svg.append("text") // Dept of Education
  .text("180 school systems & 17 state special charter schools")
  .attr("class", "explainer");

svg.append("text") // add creative commons copyright
  .text("add creative commons copyright")
  .attr("class", "explainer");

svg.append("text") 
  .text("add regents progams under 31 colleges and universities")
  .attr("class", "explainer");

function nodeByName(name) {

return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

// cafr: "component units" are legally separate organizations for which the states elected officlals are financially accountable

// DONT COUNT EX OFFICIOs

// Not pictured are divisions common across many offices, like Communications or Administration or Human Resources. Adding those would be like saying every office has desks and computers. Of course they do. But I'm focusing on each office's unique functions.

//some things in code don't seem to really exist, like the "Ineragency Council on Solid Management" in DCA
//the Commission on Regional Planning/14 sboard, the Education Coordinating Council/10  sboard seems moribund

// or Commission for Saving the Cure under DPH

//why some not others -- also drew on the nonmajor discretely presented component units -- notes to financial statements

//sources start with the governor's 2014 budget in brief report, supplemented by department annual reports and websites and the State of Georgia 2013 Agency Directory

//punch up corners with some fast stats?

// make sure opb is very important

// dobule check commission on family violence.  code says doc but i have doubts

// § 50-4-4.  Advisory councils

//dotted line could be administrative or auxillary maybe?

//    A department head or the Governor may create advisory councils. Any other official or agency of the executive branch of state government may also create advisory councils but only if federal laws or regulations require that the official or agency create the advisory council as a condition to the receipt of federal funds. Advisory councils may be created only for the purpose of acting in an advisory capacity. Unless otherwise provided by law, any such advisory council shall have a definite termination date in the instrument creating it, such date not to extend beyond the term of the Governor holding office at the time of the creation of the council.

//poster: redbubble A2 $19 23.4 x 16.5, A1, $33.25  33.1 x 23.4
//cafepress: small poster $13.99 16x20, large poster 17.99 23x35

</script>

Modified http://d3js.org/d3.v2.js?2.9.3 to a secure url

https://d3js.org/d3.v2.js?2.9.3