Tree diagram (v3)

readme.md

##Explanation If viewing as a d3 block on tree diagrams, click Open below graphic to see full page. Graphic gives example of d3 tree diagram layout with square connectors, data in json format. Data shows how modern materials trace back to petro-chemical roots.

flow.json

{
 "name": "Oil, gas, coal",
 "children": [
  {
   "name": "Ethylene",
   "children": [
		{"name":"LDPE", "children": [{ "name":"Food packaging, film, rubbish bags, nappies, toys, housewares","class":"last"}]},
		{"name":"LLDPE", "children": [{ "name":"Food packaging, film, rubbish bags, nappies, toys, housewares", "class":"last"}]},
		{"name":"HDPE", "children": [{ "name":"Drums, crates, housewares, bottles, food containers", "class":"last"}]},
		{"name":"Ethylene dichloride", "children": [
			{ "name":"Vinyl chloride", "children": [{ "name":"PVC", "children": [{ "name":"Window frames, swimming pool liners, pipes", "class":"last"}]}
			]}]},
		{"name":"Ethylene oxide", "children": [{ "name":"Ethylene Glycol", "children": [
			{"name":"Anti-freeze", "class":"last"},
			{ "name":"Polyester resins", "children": [{ "name":"Bottles, film", "class":"last"}]},
			{ "name":"Fibres", "children": [{ "name":"Hosiery, clothing, carpets", "class":"last"}]}
			]}]},
			
		{"name":"Ethylbenzene", "children": [
			{"name":"Styrene", "children": [
				{"name":"Polystyrene resins", "children": [{ "name":"Models, cups, insulation", "class":"last"}]},
				{"name":"Styrene acrylonitrile resins", "children": [{ "name":"Lenses, housewares", "class":"last"}]},
				{"name":"Styrene Butadiene rubber", "children": [{ "name":"Tyres, footwear, sealants", "class":"last"}]},
				{"name":"Styrene Butadiene latex", "children": [{ "name":"Carpet backing, paper", "class":"last"}]}
			]}]},
		{"name":"Linear alcohols", "children": [{ "name":"Detergent", "class":"last"}]},
		{"name":"Vinyl acetate", "children": [{ "name":"Adhesives, coatings, textile/paper finishing, flooring", "class":"last"}]}
				
	  
     
   ]},

  
  {
   "name": "Propylene",
   "children": [
    {"name":"Propylene oxide", "children": [
	    {"name":"Propylene glycol", "children": [{"name":"Polyesters", "children": [{ "name":"Auto patch compounds, furniture parts, boats, fibres", "class":"last"}]}]},
		{"name":"Polyols", "children": [{ "name":"Polyurethane", "children": [{ "name":"Foams, coatings, lacquers", "class":"last"}]}
	]},
	{"name":"Polypropylene", "children": [
		{"name":"Resins", "children": [{ "name":"Steering wheels, knobs, pipe, film, rope & twine, strapping, auto grilles", "class":"last"}]},
		{"name":"Fibres", "children": [{ "name":"Carpets, matting", "class":"last"}]}
	]},
	{"name":"Isopropanol alcohol", "children": [
		{"name":"Solvents, coatings, cosmetics, health care", "class":"last"},
		{"name":"Acetone", "children": [{ "name":"Methyl methacrylate", "children": [{ "name":"Plastics, signs, plexiglass, paints, lighting panels, rear light lenses", "class":"last"}]}]}
		
	]},
	{"name":"Oxo-alcohols", "children": [
		{ "name":"Plasticizers", "children": [{ "name":"PVC plastics", "children": [{ "name":"Rain coats, inflatable toys", "class":"last"}]}]},
		{"name":"Solvents", "children":[{ "name":"Coatings", "class":"last"}]}
		]}
		    
		    
	]},
    {"name":"Acrylonitrile", "children": [
	    {"name":"Polyacrylonitrile", "children": [
	    	{"name":"Acrylic fibre", "children": [{ "name":"Carpets, jumpers, dresses, coats, curtains", "class":"last"}]},
			{"name":"Acrylic resins", "children": [{ "name":"Lenses, light fixtures, domestics, coatings", "class":"last"}]}
	    ]},
	    {"name":"Modacylic fibre", "children": [{ "name":"Coatings, synthetic furs", "class":"last"}]}
	    
	    ]},
	{"name":"Cumene", "children": [{ "name":"ABS resins", "children": [{ "name":"Phones, baths, auto parts", "class":"last"}]},
	{"name":"Phenol", "children": [{ "name":"Phenol resins, nylon fibres, solvents", "class":"last"}]}
	
	]}
   ]
  },
  {
   "name": "C4",
   "children": [
    
    {"name":"Butadiene", "children": [
	    {"name":"Polybutadiene rubber", "children": [{ "name":"Tyres, golf balls", "class":"last"}]},
		{"name":"Styrene-Butadiene latex", "children": [{ "name":"Carpet backing, adhesives", "class":"last"}]},
		{"name":"ABS resins", "children": [{ "name":"Automotive parts, spas", "class":"last"}]},
		{"name":"Chloroprene rubber", "children": [{ "name":"Gaskets, seals, hoses", "class":"last"}]},
		{"name":"Nitrile rubber", "children": [{ "name":"Shoe soles, kitchen mats, hoses, gaskets", "class":"last"}]},
	    { "name":"Styrene-Butadiene rubber", "children": [{ "name":"Tyres, footwear", "class":"last"}]}]},
	    {"name":"Isobutylene", "children": [{ "name":"Gasoline"},
		    {"name":"Synthetic rubber", "children": [{ "name":"Car tyres, plastic compounds", "class":"last"}]}]},
		{"name":"Butylene oxide", "children": [{ "name":"Unsaturated polyesters", "children": [{ "name":"Foams, insulation", "class":"last"}]}]},
		{"name":"Maleic anhydride", "children": [
			{"name":"Alkyd resins", "children": [{ "name":"", "class":"last"}]},
			{ "name":"Unsaturated polyesters", "children": [{ "name":"Foams, insulation", "class":"last"}]}
		]}
   ]},
  
  {
   "name": "Benzene",
   "children": [
    {"name":"Cumene", "children": [
	    {"name":"Acetone", "children": [{ "name":"", "class":"last"}]},
	    {"name":"Cumene", "children": [{"name":"Phenol", "children":[
		    {"name":"Bisphenol A", "children": [
		    	{"name":"Polycarbonate resins", "children":[{ "name":"Football helmets, spectacles, computers", "class":"last"}]},
				{"name":"Epoxy resins", "children": [{ "name":"Protective coatings, adhesives", "class":"last"}]}
		    
		    
		    ]},
		    {"name":"Phenolic resins", "children": [{ "name":"Plywood coatings, housings", "class":"last"}]}
		
		]}
		
		
		]}
	    
	    
	    ]},
    {"name":"Cyclohexane", "children": [{
	    "name":"Adipic acid", "children": [{ "name":"Nylon fibres and resins", "children": [{ "name":"", "class":"last"}]}]},
	    {"name":"Caprolactam", "children": [{ "name":"Nylon fibres and resins", "children": [{ "name":"", "class":"last"}]}]}
	    
	    
	    ]},
	    {"name":"Aniline", "children": [
		    {"name":"Isocyanates", "children": [{ "name":"", "class":"last"}]},
		    {"name":"Rubber chemicals", "children": [{ "name":"", "class":"last"}]},
		    {"name":"Pesticides, dyes"}
		    
		]},
		{"name":"Chlorobenzenes", "children": [{ "name":"Pesticides, dyes", "class":"last"}]}
    

   ]
  },
  {
   "name": "Xylene",
   "children": [
   		{"name":"Mixed xylenes", "children": [
	   		{"name":"Dyes", "class":"last"},
	   		{"name":"Isophthalic acid", "children": [
		   		{ "name":"Alkyd resins", "children": [{ "name":"TV parts", "class":"last"}]},
		   		{"name":"Polyamide resins", "children": [{ "name":"Adhesives", "class":"last"}]},
		   		{"name":"Unsaturated polyesters", "children": [{ "name":"", "class":"last"}]}
		   		
		   		
		   		]},
		   	{"name":"Solvents", "children": [{ "name":"", "class":"last"}]}
	   		
	   		]},
	   {"name":"Para-xylene", "children": [{ "name":"Terephthalic acid", "children": [{ 
		   "name":"Polyester fibres", "children": [{ "name":"Clothing", "class":"last"}]},
		   {"name":"PET resins", "children": [{ "name":"Bottles, tape, film", "class":"last"}]}
		   
		   ]},
		   {"name":"Dimethyl terephthalate", "children": [
			   {"name":"PET resins", "children": [{ "name":"Bottles, tape, film", "class":"last"}]},
			   { "name":"Polyester fibres", "children": [{ "name":"Clothing", "class":"last"}]}]}
		   
		   ]},
		{"name":"Ortho-xylene", "children": [{ "name":"Phthalic anydride", "children": [
			{"name":"Alkyd resins", "children": [{ "name":"Auto parts, coatings, furniture", "class":"last"}]},
			{ "name":"Plasticizer D.O.P", "children": [{ "name":"Plastic products", "class":"last"}]}]},
			{"name":"Polyester polyol", "children": [
				{"name":"Solvents","class":"last"},
				{"name":"Urethanes", "children": [{ "name":"Foams, insulation", "class":"last"}]}]}
			]}
   		
  ]}
 ]
}

index.html

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

.node circle {
  fill: #fff;
}

.node.depth0 circle {
	fill: #003368;

}

.node.depth1 circle {
	fill: #005CB9;
}
.node.depth2 circle {
	fill: #0F86FF;
}
.node.depth3 circle {
	fill: #45A1FF;
}

.node.depth4 circle {
	fill: #5FAEFF;
}
.node.depth5 circle {
	fill: #8AC4FF;
}
.node.depth6 circle {
	fill: #B2D8FF;
}


.node.depth7 circle {
	fill: #CEE6FF;
	stroke: gray;
	stroke-width: 0.5px;
}

.node {
/*   font: 11px sans-serif; */
  font-size: 11px;
  font-family: sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.rectLabel {
	fill: white;
	opacity: 1;
}


</style>
<body>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script>




var d = document, e = d.documentElement, w = e.clientWidth, h = e.clientHeight ;

var width = w,
    height = Math.max(h,800);

var cluster = d3.layout.cluster()
    .size([height, width - 500]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
  
  var svg = d3.select("body").select("svg").append("g")
    .attr("transform", "translate(80,0)");

d3.json("flow.json", function(json) {
  var nodes = cluster.nodes(json);
  

  
  var yValues = [];
  var maxDepth = 0;
  
  for (var k=0; k<nodes.length; k++) {
	  
	  if (nodes[k].depth > maxDepth) {
		  maxDepth = nodes[k].depth;
	  }
	  
	  
	  
	  
	  if (k==0) {
		  yValues.push(nodes[k].y);
	  } else {
		  if (yValues.indexOf(nodes[k].y)==-1) {
			  yValues.push(nodes[k].y);
		  }
	  }
  }
  
	for (var k=0; k<nodes.length; k++) {
	  	
	  	if (!nodes[k].children) {
		  	nodes[k].depth = maxDepth;
	  	}
		  
	}  

  maxDepth++;
  var xGap = (w-230)/maxDepth;
	for (var k=0; k<nodes.length; k++) {
	  	
	  	
		 nodes[k].y = (w-100-(nodes[k].depth*xGap));
	  	
		  
	} 



  

  yValues.sort();
  var newX = w - 50;


  var link = svg.selectAll("path.link")
      .data(cluster.links(nodes))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", elbow);

  var node = svg.selectAll("g.node")
      .data(nodes)
    .enter().append("g")
      .attr("class", function(d,i){ return "node depth"+d.depth; })
      .attr("name", function(d,i){ return d.depth; })
      .attr("transform", function(d) { return "translate(" + d.y+ "," + d.x + ")"; });

  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dx", -8)
      .attr("class","textLabel")
      .attr("id",function(d,i){ return "txt"+i; })
      .attr("dy", 3)
      .attr("text-anchor", "end")
      .text(function(d) { return d.name; });


var objs = document.querySelectorAll("text.textLabel");
var widths = [];

for (var o=0; o<objs.length; o++) {
	var obj = document.getElementById(objs[o].id);
	var bb = obj.getBoundingClientRect();
	widths.push(bb.width);
}

  node.append("rect")
      .attr("x", function(d,i){ return -widths[i]-12;})
      .attr("class","rectLabel")
      .attr("id",function(d,i){ return "rect"+i; })
      .attr("y", -5)
      .attr("height","11")
      .attr("width", function(d,i) { return widths[i] + 6; });

  node.append("text")
      .attr("dx", -8)
      .attr("class","textLabel")
      .attr("id",function(d,i){ return "txt"+i; })
      .attr("dy", 3)
      .attr("text-anchor", "end")
      .text(function(d) { return d.name; });

});


function elbow(d, i) {
  return "M" + d.source.y + "," + d.source.x
      + "V" + d.target.x + "H" + (d.target.y-0);
}

</script>

thumbnail.png