xxxxxxxxxx<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