recursionbane · February 27, 2017 16:48
diff --git a/.block b/.block
 license: gpl-3.0
 height: 1063
diff --git a/README.md b/README.md
diff --git a/flare.csv b/flare.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  font: 10px sans-serif;
  margin: 3px;
  position: relative;
 }

 .node {
  position: absolute;
  overflow: hidden;
  padding: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
  box-sizing: border-box;
 }

 .node--internal {
  font-weight: bold;
 }

 .node--hover {
  padding: 2px;
  border: solid 1px #000;
 }

 </style>
 <body>
 <script src="//d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
 <script>

 var width = 960,
    height = 1060,
    offset = 3;

 var format = d3.format(",d");

 var color = d3.scaleMagma()
    .domain([-4, 4]);

 var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

 var treemap = d3.treemap()
    .size([width, height])
    .paddingInner(1)
    .paddingOuter(offset)
    .paddingTop(function(d) { return d.depth < 3 ? 19 : offset; })
    .round(true);

 d3.csv("flare.csv", function(error, data) {
  if (error) throw error;

  var root = stratify(data)
      .sum(function(d) { return d.value; })
      .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

  cascade(treemap(root));

  d3.select("body")
    .selectAll(".node")
    .data(root.descendants())
    .enter().append("div")
      .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--left"); })
      .attr("title", function(d) { return d.id + "\n" + format(d.value); })
      .style("left", function(d) { return d.x0 + "px"; })
      .style("top", function(d) { return d.y0 + "px"; })
      .style("width", function(d) { return d.x1 - d.x0 + "px"; })
      .style("height", function(d) { return d.y1 - d.y0 + "px"; })
      .style("background", function(d) { return color(d.depth); })
      .each(function(d) { d.node = this; })
      .on("mouseover", hovered(true))
      .on("mouseout", hovered(false))
      .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g).join("\u200b"); });
 });

 function cascade(root) {
  return root.eachAfter(function(d) {
    if (d.children) {
      d.heightRight = 1 + d3.max(d.children, function(c) { return c.x1 === d.x1 - offset ? c.heightRight : NaN; });
      d.heightBottom = 1 + d3.max(d.children, function(c) { return c.y1 === d.y1 - offset  ? c.heightBottom : NaN; });
    } else {
      d.heightRight =
      d.heightBottom = 0;
    }
  }).eachBefore(function(d) {
    d.x1 -= 2 * offset * d.heightRight;
    d.y1 -= 2 * offset * d.heightBottom;
  });
 }

 function hovered(hover) {
  return function(d) {
    d3.selectAll(d.ancestors().map(function(d) { return d.node; }))
        .classed("node--hover", hover);
  };
 }

 </script>
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
	id	value
	my__prc
	my__prc.blockA
	my__prc.blockA.ipo1234_run1
	my__prc.blockA.ipo1234_run1.setup	1
	my__prc.blockA.ipo1234_run1.prep	2
	my__prc.blockA.ipo1234_run1.plan	3
	my__prc.blockA.ipo1234_run1.place	4
	my__prc.blockA.ipo1234_run1.cts	5
	my__prc.blockA.ipo1234_run1.postcts	6
	my__prc.blockA.ipo1234_run1.route	7
	my__prc.blockA.ipo1234_run1.postroute	8
	my__prc.blockA.ipo1234_run1.fill	9
	my__prc.blockA.ipo1234_run2
	my__prc.blockA.ipo1234_run2.setup	1
	my__prc.blockA.ipo1234_run2.prep	2
	my__prc.blockA.ipo1234_run2.plan	3
	my__prc.blockA.ipo1234_run2.place	4
	my__prc.blockA.ipo1234_run2.cts	5
	my__prc.blockA.ipo1234_run2.route	6
	my__prc.blockA.ipo1234_run2.postroute	7
	my__prc.blockA.ipo1234_run2.fill	8
	my__prc.blockB
	my__prc.blockB.ipo1234_run1
	my__prc.blockB.ipo1234_run1.setup	1
	my__prc.blockB.ipo1234_run1.prep	2
	my__prc.blockB.ipo1234_run1.plan	3
	my__prc.blockB.ipo1234_run1.place	4
	my__prc.blockB.ipo1234_run1.cts	5
	my__prc.blockB.ipo1234_run1.postcts	6
	my__prc.blockB.ipo1234_run1.route	7
	my__prc.blockB.ipo1234_run1.postroute	8
	my__prc.blockB.ipo1234_run1.fill	9
	my__prc.blockB.ipo1234_run2
	my__prc.blockB.ipo1234_run2.setup	1
	my__prc.blockB.ipo1234_run2.prep	2
	my__prc.blockB.ipo1234_run2.plan	3
	my__prc.blockB.ipo1234_run2.place	4
	my__prc.blockB.ipo1234_run2.cts	5
	my__prc.blockB.ipo1234_run2.route	6
	my__prc.blockB.ipo1234_run2.postroute	7
	my__prc.blockB.ipo1234_run2.fill	8
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	margin: 3px;
	position: relative;
	}

	.node {
	position: absolute;
	overflow: hidden;
	padding: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,0.4);
	box-sizing: border-box;
	}

	.node--internal {
	font-weight: bold;
	}

	.node--hover {
	padding: 2px;
	border: solid 1px #000;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
	<script>

	var width = 960,
	height = 1060,
	offset = 3;

	var format = d3.format(",d");

	var color = d3.scaleMagma()
	.domain([-4, 4]);

	var stratify = d3.stratify()
	.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

	var treemap = d3.treemap()
	.size([width, height])
	.paddingInner(1)
	.paddingOuter(offset)
	.paddingTop(function(d) { return d.depth < 3 ? 19 : offset; })
	.round(true);

	d3.csv("flare.csv", function(error, data) {
	if (error) throw error;

	var root = stratify(data)
	.sum(function(d) { return d.value; })
	.sort(function(a, b) { return b.height - a.height \|\| b.value - a.value; });

	cascade(treemap(root));

	d3.select("body")
	.selectAll(".node")
	.data(root.descendants())
	.enter().append("div")
	.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--left"); })
	.attr("title", function(d) { return d.id + "\n" + format(d.value); })
	.style("left", function(d) { return d.x0 + "px"; })
	.style("top", function(d) { return d.y0 + "px"; })
	.style("width", function(d) { return d.x1 - d.x0 + "px"; })
	.style("height", function(d) { return d.y1 - d.y0 + "px"; })
	.style("background", function(d) { return color(d.depth); })
	.each(function(d) { d.node = this; })
	.on("mouseover", hovered(true))
	.on("mouseout", hovered(false))
	.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g).join("\u200b"); });
	});

	function cascade(root) {
	return root.eachAfter(function(d) {
	if (d.children) {
	d.heightRight = 1 + d3.max(d.children, function(c) { return c.x1 === d.x1 - offset ? c.heightRight : NaN; });
	d.heightBottom = 1 + d3.max(d.children, function(c) { return c.y1 === d.y1 - offset ? c.heightBottom : NaN; });
	} else {
	d.heightRight =
	d.heightBottom = 0;
	}
	}).eachBefore(function(d) {
	d.x1 -= 2 * offset * d.heightRight;
	d.y1 -= 2 * offset * d.heightBottom;
	});
	}

	function hovered(hover) {
	return function(d) {
	d3.selectAll(d.ancestors().map(function(d) { return d.node; }))
	.classed("node--hover", hover);
	};
	}

	</script>