Index: vue/src/assets/images/devops/DevSupport/github.png
===================================================================
diff -u -r21e81b7695a881040eab315fd8f160b779972e95 -r15b4b56447ef95ed39ac1117497f694fb80df680
--- vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 21e81b7695a881040eab315fd8f160b779972e95)
+++ vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 15b4b56447ef95ed39ac1117497f694fb80df680)
@@ -3915,41 +3915,41 @@
 
 /* Analysis 분석 종료 */
 
-#tree_container .link {
+#tree_bar_container .link {
 	fill: none;
 	stroke: #ccc;
 	stroke-opacity: 0.4;
 	stroke-width: 1px;
 }
-#tree_container text {
+#tree_bar_container text {
 	font-family: "Arial Black", Gadget, sans-serif;
 	fill: white;
 	font-weight: bold;
 	font-size: 12px;
 	text-shadow: none;
 }
 
-#tree_container .xAxis .tick text {
+#tree_bar_container .xAxis .tick text {
 	fill: white;
 }
-#tree_container .grid .tick line {
+#tree_bar_container .grid .tick line {
 	stroke: grey;
 	stroke-dasharray: 5, 10;
 	opacity: 0.7;
 }
-#tree_container .grid path {
+#tree_bar_container .grid path {
 	stroke-width: 0;
 }
 
-#tree_container .node circle {
+#tree_bar_container .node circle {
 	fill: #999;
 }
-#tree_container .node--internal circle {
+#tree_bar_container .node--internal circle {
 	fill: #555;
 }
-#tree_container .node--internal text {
-	font-size: 14px;
-}
-#tree_container .node--internal .root {
+/*#tree_bar_container .node--internal text {*/
+/*	font-size: 14px;*/
+/*}*/
+#tree_bar_container .node--internal .root {
 	transform: translateX(10px);
 }
Index: arms/html/analysisScope/content-container.html
===================================================================
diff -u -r21e81b7695a881040eab315fd8f160b779972e95 -r15b4b56447ef95ed39ac1117497f694fb80df680
--- arms/html/analysisScope/content-container.html	(.../content-container.html)	(revision 21e81b7695a881040eab315fd8f160b779972e95)
+++ arms/html/analysisScope/content-container.html	(.../content-container.html)	(revision 15b4b56447ef95ed39ac1117497f694fb80df680)
@@ -905,7 +905,7 @@
 								</blockquote>
 								<div class="body">
 									<div
-										id="tree_container"
+										id="tree_bar_container"
 										style="height: 620px">
 										<svg></svg>
 									</div>
Index: arms/js/analysisScope.js
===================================================================
diff -u -r43b8b9b35d842441ef9c7e06d023d0e338592858 -r15b4b56447ef95ed39ac1117497f694fb80df680
--- arms/js/analysisScope.js	(.../analysisScope.js)	(revision 43b8b9b35d842441ef9c7e06d023d0e338592858)
+++ arms/js/analysisScope.js	(.../analysisScope.js)	(revision 15b4b56447ef95ed39ac1117497f694fb80df680)
@@ -1148,10 +1148,10 @@
 }
 
 function renderTreeBar(data) {
-	const $container = document.getElementById("tree_container"),
+	const $container = document.getElementById("tree_bar_container"),
 		width = $container.offsetWidth,
 		height = $container.offsetHeight,
-		svg = d3.select("#tree_container svg"),
+		svg = d3.select("#tree_bar_container svg"),
 		g = svg.append("g").attr("transform", "translate(20,0)"),
 		experienceName = ["", "1", "2", "3", "4", "5"],
 		formatSkillPoints = function (d) {
@@ -1168,48 +1168,31 @@
 
 	tree(root);
 
-	var link = g
+	const link = g
 		.selectAll(".link")
 		.data(root.descendants().slice(1))
 		.enter()
 		.append("path")
 		.attr("class", "link")
 		.attr("d", function (d) {
-			return (
-				"M" +
-				d.y +
-				"," +
-				d.x +
-				"C" +
-				(d.parent.y + 100) +
-				"," +
-				d.x +
-				" " +
-				(d.parent.y + 100) +
-				"," +
-				d.parent.x +
-				" " +
-				d.parent.y +
-				"," +
-				d.parent.x
-			);
+			return `M${d.y},${d.x}C${d.parent.y + 100},${d.x} ${d.parent.y + 100},${d.parent.x} ${d.parent.y},${d.parent.x}`;
 		});
 
-	var node = g
+	const node = g
 		.selectAll(".node")
 		.data(root.descendants())
 		.enter()
 		.append("g")
 		.attr("class", function (d) {
-			return "node" + (d.children ? " node--internal" : " node--leaf");
+			return `node${d.children ? " node--internal" : " node--leaf"}`;
 		})
 		.attr("transform", function (d) {
-			return "translate(" + d.y + "," + d.x + ")";
+			return `translate(${d.y}, ${d.x})`;
 		});
 
 	node.append("circle").attr("r", 4);
 
-	var leafNodeG = g
+	const leafNodeG = g
 		.selectAll(".node--leaf")
 		.append("g")
 		.attr("class", "node--leaf-g")
@@ -1239,8 +1222,7 @@
 			return d.data.name;
 		});
 
-	// Write down text for every parent datum
-	var internalNode = g.selectAll(".node--internal");
+	const internalNode = g.selectAll(".node--internal");
 	internalNode
 		.append("text")
 		.attr("class", (d) => d.data.id === "1" && "root")
@@ -1250,22 +1232,18 @@
 			return d.data.name;
 		});
 
-	// Attach axis on top of the first leaf datum.
-	var firstEndNode = g.select(".node--leaf");
+	const firstEndNode = g.select(".node--leaf");
 	firstEndNode
 		.insert("g")
 		.attr("class", "xAxis")
 		.attr("transform", "translate(" + 7 + "," + -14 + ")")
 		.call(xAxis);
 
-	// tick mark for x-axis
 	firstEndNode
 		.insert("g")
 		.attr("class", "grid")
 		.attr("transform", "translate(7," + (height - 15) + ")")
 		.call(d3.axisBottom().scale(xScale).ticks(5).tickSize(-height, 0, 0).tickFormat(""));
 
-	// Emphasize the y-axis baseline.
 	svg.selectAll(".grid").select("line").style("stroke-dasharray", "1,1").style("stroke", "white");
-	// });
 }