djagdish/gist:7169810

## gistfile1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Visualizing email metadata</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
      body {
        background-color: #000;
      }

      .header {
        font-size: 24px;
        font-family: 'Helvetica Neue', 'Arial', 'sans serif';
        color: #c6c6c6;
        margin-left: 30px;
        margin-top: 20px;
      }

      #plot {
        margin-left: 50px;
      }

      .emailinfo {
        position: absolute;
        text-align: center;
        width: 100px;
        height: 30px;
        padding: 5px;
        font-size: 18px;
        font-family: 'Helvetica Neue', 'Arial', 'sans serif';
        border: 0px;
        border-radius: 5px;
        color: #fff;
        pointer-events: none;
        background: rgba(0,0,0,0.7);
      }

    </style>
  </head>
  <body>
    <div class="header">Evolution of Top Collaborators</div>
    <div id="plot"></div>
    <script type="text/javascript">
      var data = [{"ranks": [0, 2, 1, 1, 1, 1, 3, 6, 16], "email": "v@gmail.com"}, {"ranks": [0, 5, 2, 2, 2, 2, 2, 2, 3], "email": "p@gmail.com"}, {"ranks": [6, 3, 3, 4, 4, 3, 1, 5, 5], "email": "t@gmail.com"}, {"ranks": [0, 0, 13, 3, 3, 6, 10, 9, 46], "email": "s@gmail.com"}, {"ranks": [0, 0, 7, 5, 7, 9, 12, 8, 12], "email": "j@gmail.com"}, {"ranks": [0, 28, 4, 6, 6, 8, 13, 11, 11], "email": "h@gmail.com"}, {"ranks": [0, 8, 8, 10, 9, 7, 11, 10, 6], "email": "a@gmail.com"}, {"ranks": [7, 4, 10, 20, 50, 20, 9, 4, 7], "email": "m@gmail.com"}, {"ranks": [0, 0, 46, 8, 16, 17, 15, 13, 14], "email": "a@gmail.com"}, {"ranks": [0, 0, 0, 0, 0, 27, 5, 3, 13], "email": "r@gmail.com"}];

      var width = screen.width-150,
          height = screen.height-200;

      var svg = d3.select("#plot")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(30,20)");

      var color = d3.scale.category20();

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

      var drawline = d3.svg.line()
          .x(function(d, i) {return (i*(width-100)/10); })
          .y(function(d) {
            if(d==0) {return height+20;}
            return 20+d*30; })
          .interpolate("linear");

      svg.selectAll("g")
          .data(data)
          .enter()
          .append("path")
          .attr('d', function(d) { return drawline(d['ranks']); })
          .attr("stroke", function(d,i) { return color(i); })
          .attr("stroke-width", 5)
          .attr("fill", "none")
          .on("mouseover", function(d, i) {
            this.t
            showEmail(d['email'], i);
          })
          .on("mouseout", function(){ hideEmail();});

      function showEmail(email, index) {
        emailinfo.transition()
            .duration(200)
            .style("opacity", 1);
        emailinfo.html(email+'</br>rank: '+(index+1))
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 40) + "px");
      }

      function hideEmail() {
        emailinfo.transition()
            .duration(200)
            .style("opacity", 0);
      }
    </script>
  </body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Visualizing email metadata</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	body {
	background-color: #000;
	}

	.header {
	font-size: 24px;
	font-family: 'Helvetica Neue', 'Arial', 'sans serif';
	color: #c6c6c6;
	margin-left: 30px;
	margin-top: 20px;
	}

	#plot {
	margin-left: 50px;
	}

	.emailinfo {
	position: absolute;
	text-align: center;
	width: 100px;
	height: 30px;
	padding: 5px;
	font-size: 18px;
	font-family: 'Helvetica Neue', 'Arial', 'sans serif';
	border: 0px;
	border-radius: 5px;
	color: #fff;
	pointer-events: none;
	background: rgba(0,0,0,0.7);
	}

	</style>
	</head>
	<body>
	<div class="header">Evolution of Top Collaborators</div>
	<div id="plot"></div>
	<script type="text/javascript">
	var data = [{"ranks": [0, 2, 1, 1, 1, 1, 3, 6, 16], "email": "v@gmail.com"}, {"ranks": [0, 5, 2, 2, 2, 2, 2, 2, 3], "email": "p@gmail.com"}, {"ranks": [6, 3, 3, 4, 4, 3, 1, 5, 5], "email": "t@gmail.com"}, {"ranks": [0, 0, 13, 3, 3, 6, 10, 9, 46], "email": "s@gmail.com"}, {"ranks": [0, 0, 7, 5, 7, 9, 12, 8, 12], "email": "j@gmail.com"}, {"ranks": [0, 28, 4, 6, 6, 8, 13, 11, 11], "email": "h@gmail.com"}, {"ranks": [0, 8, 8, 10, 9, 7, 11, 10, 6], "email": "a@gmail.com"}, {"ranks": [7, 4, 10, 20, 50, 20, 9, 4, 7], "email": "m@gmail.com"}, {"ranks": [0, 0, 46, 8, 16, 17, 15, 13, 14], "email": "a@gmail.com"}, {"ranks": [0, 0, 0, 0, 0, 27, 5, 3, 13], "email": "r@gmail.com"}];

	var width = screen.width-150,
	height = screen.height-200;

	var svg = d3.select("#plot")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(30,20)");

	var color = d3.scale.category20();

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

	var drawline = d3.svg.line()
	.x(function(d, i) {return (i*(width-100)/10); })
	.y(function(d) {
	if(d==0) {return height+20;}
	return 20+d*30; })
	.interpolate("linear");

	svg.selectAll("g")
	.data(data)
	.enter()
	.append("path")
	.attr('d', function(d) { return drawline(d['ranks']); })
	.attr("stroke", function(d,i) { return color(i); })
	.attr("stroke-width", 5)
	.attr("fill", "none")
	.on("mouseover", function(d, i) {
	this.t
	showEmail(d['email'], i);
	})
	.on("mouseout", function(){ hideEmail();});

	function showEmail(email, index) {
	emailinfo.transition()
	.duration(200)
	.style("opacity", 1);
	emailinfo.html(email+'</br>rank: '+(index+1))
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 40) + "px");
	}

	function hideEmail() {
	emailinfo.transition()
	.duration(200)
	.style("opacity", 0);
	}
	</script>
	</body>
	</html>