vazexqi/visualize.html

## visualize.html
<!--
Modified and derived from
<http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd>
<http://bl.ocks.org/mbostock/4063663>

Code by the Illinois VLSI CAD teaching staff.
Released under the University of Illinois/NCSA Open Source License
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>
  Visualize Placement Result for Programming Assignment #3
</title>

<!-- Serve locally because we need https-->
<script type="text/javascript" src="https://spark-public.s3.amazonaws.com/vlsicad/javascript_tools/d3.min.js" charset="utf-8"></script>

<style>
  #drop_zone{
    border:2px dashed #bbb;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    padding:25px;
    text-align:center;
    font:20pt bold,"Vollkorn";
    color:#bbb
  }

  /* For actual chart */
  svg {
      font: 10px sans-serif;
      padding: 10px;
  }

  .axis,
  .frame {
      shape-rendering: crispEdges;
  }

  .axis line {
      stroke: #ddd;
  }

  .axis path {
      display: none;
  }

  .frame {
      fill: none;
        stroke: #aaa;
  }

  /* For tooltip */
  div.tooltip {
    position: absolute;
    text-align: center;
    width: 200px;
    height: 12px;
    padding: 8px;
    font: 10px sans-serif;
    background: #ddd;
    border: solid 1px #aaa;
    border-radius: 5px;
    pointer-events: none;
  }
</style>


</head>
<body>
<div id="drop_zone">Drop placement result file here</div>

<script type="text/javascript">

if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser. Consider using one from http://www.html5rocks.com/en/features/file_access');
}

var edu = {
  illinois: {
    vlsicad: (function() {
      //////////////////
      // For drag-n-drop
      //////////////////

      var handleFileSelect= function(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files; // FileList object.

        // User can drag-n-drop multiple files at once so we pick only the first one.
        // I don't know of a way to prevent drag-n-drop of multiple files at once.

        var netlist = files[0];
        var reader = new FileReader();
        reader.onload = function(event) {
          var rawText = event.target.result;
          var lines = rawText.split("\n");

          var data = [];

          var lineIndex, rawLine, splitData;
          var id, x, y;
          for(lineIndex = 0; lineIndex < lines.length; lineIndex++) {
            rawLine = lines[lineIndex]; // e.g., 1 xx.xx yy.yyy
            if(!isBlank(rawLine)) {
              splitData = rawLine.trim().split(/\s+/);
              id = parseInt(splitData[0]);
              x = parseFloat(splitData[1]);
              y = parseFloat(splitData[2]);
              data.push({id: id, x: x, y: y}); // Construct a new object on the fly and add it
            }
          }

          drawVisualization(data);

        };
        reader.readAsText(netlist);
      };

      var isBlank = function(string) {
      	return (!string || /^\s*$/.test(string));
      }

      var handleDragOver = function(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
      };

      ////////////////////
      // For visualization
      ////////////////////

      var size = 700, padding = 25;

      var x = d3.scale.linear()
      .domain([0,100])
      .range([padding / 2, size - padding / 2]);

      var y = d3.scale.linear()
      .domain([0,100])
      .range([size - padding / 2, padding / 2]);

       var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickValues([0, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100])
      .tickSize(-size);

      var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickValues([0, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100])
      .tickSize(-size);

      var svg = d3.select("body").append("svg")
      .attr("width", size + padding)
      .attr("height", size + padding)
      .append("g")
      .attr("transform", "translate(" + padding / 2 + "," + padding / 2 + ")");

      var xAxisGroup = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + size + ")")
      .call(xAxis);

      var xAxisGroup = svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

      var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

      function drawVisualization(data) {
        // Clear all previous nodes
        svg.selectAll("circle").remove();

        // Populate with new data
        svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return x(d.x)})
        .attr("cy", function(d) {
          return y(d.y)})
        .attr("r", 2)
        .style("fill", d3.rgb("#3366cc"))
        .on("mouseover", function(d) {
          div.transition()
          .duration(50)
          .style("opacity", .9);

          div.html("Gate " + d.id + " : (" + d.x + ", " + d.y + ")")
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d) {
          div.transition()
          .duration(100)
          .style("opacity", 0);
        });
      }

        return {
          handleDragOver: handleDragOver,
          handleFileSelect: handleFileSelect
        };

      })()
  }
};

  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', edu.illinois.vlsicad.handleDragOver, false);
  dropZone.addEventListener('drop', edu.illinois.vlsicad.handleFileSelect, false);

</script>
</body>
</html>
	<!--
	Modified and derived from
	<http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd>
	<http://bl.ocks.org/mbostock/4063663>

	Code by the Illinois VLSI CAD teaching staff.
	Released under the University of Illinois/NCSA Open Source License
	-->

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

	<title>
	Visualize Placement Result for Programming Assignment #3
	</title>

	<!-- Serve locally because we need https-->
	<script type="text/javascript" src="https://spark-public.s3.amazonaws.com/vlsicad/javascript_tools/d3.min.js" charset="utf-8"></script>

	<style>
	#drop_zone{
	border:2px dashed #bbb;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding:25px;
	text-align:center;
	font:20pt bold,"Vollkorn";
	color:#bbb
	}

	/* For actual chart */
	svg {
	font: 10px sans-serif;
	padding: 10px;
	}

	.axis,
	.frame {
	shape-rendering: crispEdges;
	}

	.axis line {
	stroke: #ddd;
	}

	.axis path {
	display: none;
	}

	.frame {
	fill: none;
	stroke: #aaa;
	}

	/* For tooltip */
	div.tooltip {
	position: absolute;
	text-align: center;
	width: 200px;
	height: 12px;
	padding: 8px;
	font: 10px sans-serif;
	background: #ddd;
	border: solid 1px #aaa;
	border-radius: 5px;
	pointer-events: none;
	}
	</style>


	</head>
	<body>
	<div id="drop_zone">Drop placement result file here</div>

	<script type="text/javascript">

	if (window.File && window.FileReader && window.FileList && window.Blob) {
	// Great success! All the File APIs are supported.
	} else {
	alert('The File APIs are not fully supported in this browser. Consider using one from http://www.html5rocks.com/en/features/file_access');
	}

	var edu = {
	illinois: {
	vlsicad: (function() {
	//////////////////
	// For drag-n-drop
	//////////////////

	var handleFileSelect= function(evt) {
	evt.stopPropagation();
	evt.preventDefault();

	var files = evt.dataTransfer.files; // FileList object.

	// User can drag-n-drop multiple files at once so we pick only the first one.
	// I don't know of a way to prevent drag-n-drop of multiple files at once.

	var netlist = files[0];
	var reader = new FileReader();
	reader.onload = function(event) {
	var rawText = event.target.result;
	var lines = rawText.split("\n");

	var data = [];

	var lineIndex, rawLine, splitData;
	var id, x, y;
	for(lineIndex = 0; lineIndex < lines.length; lineIndex++) {
	rawLine = lines[lineIndex]; // e.g., 1 xx.xx yy.yyy
	if(!isBlank(rawLine)) {
	splitData = rawLine.trim().split(/\s+/);
	id = parseInt(splitData[0]);
	x = parseFloat(splitData[1]);
	y = parseFloat(splitData[2]);
	data.push({id: id, x: x, y: y}); // Construct a new object on the fly and add it
	}
	}

	drawVisualization(data);

	};
	reader.readAsText(netlist);
	};

	var isBlank = function(string) {
	return (!string \|\| /^\s*$/.test(string));
	}

	var handleDragOver = function(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
	};

	////////////////////
	// For visualization
	////////////////////

	var size = 700, padding = 25;

	var x = d3.scale.linear()
	.domain([0,100])
	.range([padding / 2, size - padding / 2]);

	var y = d3.scale.linear()
	.domain([0,100])
	.range([size - padding / 2, padding / 2]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickValues([0, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100])
	.tickSize(-size);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickValues([0, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100])
	.tickSize(-size);

	var svg = d3.select("body").append("svg")
	.attr("width", size + padding)
	.attr("height", size + padding)
	.append("g")
	.attr("transform", "translate(" + padding / 2 + "," + padding / 2 + ")");

	var xAxisGroup = svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + size + ")")
	.call(xAxis);

	var xAxisGroup = svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	function drawVisualization(data) {
	// Clear all previous nodes
	svg.selectAll("circle").remove();

	// Populate with new data
	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return x(d.x)})
	.attr("cy", function(d) {
	return y(d.y)})
	.attr("r", 2)
	.style("fill", d3.rgb("#3366cc"))
	.on("mouseover", function(d) {
	div.transition()
	.duration(50)
	.style("opacity", .9);

	div.html("Gate " + d.id + " : (" + d.x + ", " + d.y + ")")
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	div.transition()
	.duration(100)
	.style("opacity", 0);
	});
	}

	return {
	handleDragOver: handleDragOver,
	handleFileSelect: handleFileSelect
	};

	})()
	}
	};

	// Setup the dnd listeners.
	var dropZone = document.getElementById('drop_zone');
	dropZone.addEventListener('dragover', edu.illinois.vlsicad.handleDragOver, false);
	dropZone.addEventListener('drop', edu.illinois.vlsicad.handleFileSelect, false);

	</script>
	</body>
	</html>