Horizontal Tree.

forked from kishoreiiitn's block: fresh block

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style>
		body {
			margin: 0;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

svg {
			display: block;
			margin: auto;
		}

#app {
			width: calc(100vw - 100px);
			height: 100vh;
			overflow: auto;
		}
	</style>
</head>

<body>
	<div id="app"></div>
	<script>
		// Feel free to change or delete any of the code you see in this editor!
		const margin = {
			left: 100,
			top: 100,
			right: 100,
			bottom: 100
		};
		const width = 1500 - margin.left - margin.right;
		const height = 700 - margin.top - margin.bottom;

var svg = d3.select("#app").append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
			.append("g")
			.attr("transform", `translate(${margin.left}, ${margin.top})`);

const colors = ["CSE", "ECE", "Mechanical", "Civil", "MME", "Chemical"];
			const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
				.domain(colors);

const json = d3.json("data.json").then(data => {
			const nest = d3.nest()
				.key(d => d.batch)
      	.sortKeys(d3.ascending)
				.key(d => d.branch)
      	.sortKeys(d3.ascending)
				.key(d => d.cls)
      	.sortKeys(d3.ascending)
				.entries(data);
			const hierarchyData = ({ key: "iiit", values: nest });

const root = d3.hierarchy(hierarchyData, data => data.values);

const tree = d3.tree()
				.size([width, height])(root);

// Draw tree structure here.

svg.selectAll("path")
				.data(tree.links())
				.enter()
				.append("path")
				.attr("d", d3.linkVertical()
					.x(d => d.x)
					.y(d => d.y))
				.attr("fill", "none")
				.attr("stroke", d => {
					if (d.source.depth === 2)
						return colorScale(d.source.data.key);
					if (d.source.depth === 3) {
						return colorScale(d.target.data.branch);
					}
					return "grey";
				})
			const nodes = svg.selectAll("g.node")
				.data(tree.descendants())
				.enter()
				.append("g")
				.attr("transform", d => {
					return `translate(${d.x},${d.y})`
				});

nodes.append("text")
				.attr("x", 0)
				.attr("y", -10)
				.attr("font-family", "Arial")
				.style("font-size", "12px")
				.attr("text-anchor", "middle")
				.text(d => d.depth < 2 ? d.data.key : "")
			nodes.append("circle")
				.attr("fill", "rgba(0,0,0, 0.6)")
				.attr("r", 3);
      
      
      
      // LEGEND GOES HERE.
      
    let legend = svg.append("g")
    	.attr("transform", `translate(0, 0)`);
//     legend.append("rect")
//     	.attr("fill", "white")
//     	.attr("width", 200)
//     	.attr("height", colors.length*20)
//     	.attr("x", 0)
//     	.attr("y", 0)
    legend = legend.selectAll("g")
        	.data(colors)
      		.enter()
      		.append("g")
      		.attr("transform", (d,i)=>`translate(10, ${i*20})`);
    
    legend.append("rect")
    	.attr("width", 10)
    	.attr("height", 10)
    	.attr("fill", d=>colorScale(d))
    legend.append("text")
    	.attr("transform", `translate(20, 5)`)
    	.text(d=>d)
    	.attr("alignment-baseline", "middle")
    	.style("font-size", 12)
    	.style("font-family", "Arial")
      
      
      
      
      
      
      
		});

</script>
</body>

https://d3js.org/d3.v5.min.js