dervalp/gist:8e4ee4d7964df5a0c719

## gistfile1.txt
var divs = d3.select("#playground").append("svg")
                                   .attr("width", 200)
                                   .attr("height", 200)
                                   .selectAll("rect").data($data);
// Your code here, or choose a preset from above
var colorScale = d3.scale.linear()
    .range(['#f2f2f2', 'darkgreen']) // or use hex values
    .domain([0, 10]);

var tooltip = d3.select("#playground")
  .append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.text("a simple tooltip");

var week = 0;
var row = 0;
divs.enter()
    .append("rect")
    .attr("x", function(d, i){
      var e = (i % 7);

      if(e === 0) {
        week++;
      }

      return (week * 17);
    })
    .attr("y", function(d, i){
      var e = (i % 7);

      if(e === 0) {
        row++;
      }

      var r = (i - (( row - 1 ) * 7 ));
      var res = r * 17;

      return res;
    })
    .attr("width", 15)
    .attr("height", 15)
    .attr("stroke-width", 1)
    .attr("stroke", "#ddd")
    .attr("fill", function(d) {
      var c = d.activity;
      if(c > 10) {
        c = 10;
      }
      return colorScale(d.activity);
    })
    .on("mouseover", function(d){
      console.log("X:" + d.x, "Y:" + d.y)
      d3.select(this).style("fill", "red");
      tooltip.style("visibility", "visible");

      var rec = d3.select(this);
      var x = (+rec.attr("x")) + 7;
      var y = (+rec.attr("y")) - 11;
      console.log("x hover");
      console.log(x);
      tooltip.text(d.activity);
      return tooltip.style("top", y + "px").style("left", x + "px");
    })
    .on("mouseout", function(d){
      d3.select(this).style("fill", colorScale(d.activity));
      tooltip.style("visibility", "hidden");
      return
    });


## gistfile2.txt

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="d3/d3.js"></script>
    <script type="text/javascript" src="d3/d3.csv.js"></script>
    <script type="text/javascript" src="d3/d3.time.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <link type="text/css" rel="stylesheet" href="colorbrewer/colorbrewer.css"/>
    <style type="text/css">

#body {
  padding-top: 20px;
  text-align: center;
}

svg {
  font-size: 10px;
  shape-rendering: crispEdges;
}

.day {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .1;
}

.month {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

    </style>
  </head>
  <body>
    <div id="body">
      <div id="footer">
        <span>…</span>, 1995-2008
        <div class="hint">use the menu to change the dataset</div>
        <div><select>
          <option value="flights">U.S. Commercial Flights</option>
          <option value="stocks">Dow Jones</option>
        </select></div>
      </div>
    </div>
    <script type="text/javascript">

var m = [29, 20, 20, 19], // top right bottom left margin
    w = 620 - m[1] - m[3], // width
    h = 90 - m[0] - m[2], // height
    z = 11; // cell size

var day = d3.time.format("%w"),
    week = d3.time.format("%U"),
    percent = d3.format(".1%"),
    flightData,
    stockData,
    formatDate = d3.time.format("%Y-%m-%d"),
    formatNumber = d3.format(",d"),
    formatPercent = d3.format("+.1%");

var svg = d3.select("#body").selectAll(".year")
    .data(d3.range(1995, 2009))
  .enter().append("div")
    .attr("class", "year")
    .style("width", w + m[1] + m[3] + "px")
    .style("height", h + m[0] + m[2] + "px")
    .style("display", "inline-block")
  .append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .attr("class", "RdYlGn")
  .append("svg:g")
    .attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")");

svg.append("svg:text")
    .attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)")
    .attr("text-anchor", "middle")
    .text(String);

var rect = svg.selectAll("rect.day")
    .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("svg:rect")
    .attr("class", "day")
    .attr("width", z)
    .attr("height", z)
    .attr("x", function(d) { return week(d) * z; })
    .attr("y", function(d) { return day(d) * z; });

rect.append("svg:title");

svg.selectAll("path.month")
    .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("svg:path")
    .attr("class", "month")
    .attr("d", monthPath);

d3.csv("dji.csv", function(csv) {
  stockData = d3.nest()
      .key(function(d) { return (d.date = formatDate.parse(d.Date)).getFullYear(); })
      .key(function(d) { return d.date; })
      .rollup(function(d) { return d.value = (d[0].Close - d[0].Open) / d[0].Open; })
      .map(csv);

  d3.select("select").on("change", function() {
    display(this.value === "flights" ? flightData : stockData);
  });
});

d3.csv("flights-departed.csv", function(csv) {
  flightData = d3.nest()
      .key(function(d) { return (d.date = formatDate.parse(d.date)).getFullYear(); })
      .key(function(d) { return d.date; })
      .rollup(function(d) { return +d[0].value; })
      .map(csv);

  display(flightData);
});

function display(data, title) {

  if (data === flightData) {
    var formatValue = formatNumber,
        title = "U.S. Commercial Flights",
        color = d3.scale.quantile();

  } else {
    var formatValue = formatPercent,
        title = "Dow Jones",
        color = d3.scale.quantize();
  }

  d3.select("#footer span")
      .text(title);

  svg.each(function(year) {
    color
        .domain(data === flightData ? d3.values(data[year]) : [-.05, .05])
        .range(d3.range(9));

    d3.select(this).selectAll("rect.day")
        .attr("class", function(d) { return "day q" + color(data[year][d]) + "-9"; })
      .select("title")
        .text(function(d) { return formatDate(d) + ": " + formatValue(data[year][d]); });
  });
}

function monthPath(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
      d0 = +day(t0), w0 = +week(t0),
      d1 = +day(t1), w1 = +week(t1);
  return "M" + (w0 + 1) * z + "," + d0 * z
      + "H" + w0 * z + "V" + 7 * z
      + "H" + w1 * z + "V" + (d1 + 1) * z
      + "H" + (w1 + 1) * z + "V" + 0
      + "H" + (w0 + 1) * z + "Z";
}

    </script>
  </body>
</html>
	var divs = d3.select("#playground").append("svg")
	.attr("width", 200)
	.attr("height", 200)
	.selectAll("rect").data($data);
	// Your code here, or choose a preset from above
	var colorScale = d3.scale.linear()
	.range(['#f2f2f2', 'darkgreen']) // or use hex values
	.domain([0, 10]);

	var tooltip = d3.select("#playground")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.text("a simple tooltip");

	var week = 0;
	var row = 0;
	divs.enter()
	.append("rect")
	.attr("x", function(d, i){
	var e = (i % 7);

	if(e === 0) {
	week++;
	}

	return (week * 17);
	})
	.attr("y", function(d, i){
	var e = (i % 7);

	if(e === 0) {
	row++;
	}

	var r = (i - (( row - 1 ) * 7 ));
	var res = r * 17;

	return res;
	})
	.attr("width", 15)
	.attr("height", 15)
	.attr("stroke-width", 1)
	.attr("stroke", "#ddd")
	.attr("fill", function(d) {
	var c = d.activity;
	if(c > 10) {
	c = 10;
	}
	return colorScale(d.activity);
	})
	.on("mouseover", function(d){
	console.log("X:" + d.x, "Y:" + d.y)
	d3.select(this).style("fill", "red");
	tooltip.style("visibility", "visible");

	var rec = d3.select(this);
	var x = (+rec.attr("x")) + 7;
	var y = (+rec.attr("y")) - 11;
	console.log("x hover");
	console.log(x);
	tooltip.text(d.activity);
	return tooltip.style("top", y + "px").style("left", x + "px");
	})
	.on("mouseout", function(d){
	d3.select(this).style("fill", colorScale(d.activity));
	tooltip.style("visibility", "hidden");
	return
	});

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<script type="text/javascript" src="d3/d3.js"></script>
	<script type="text/javascript" src="d3/d3.csv.js"></script>
	<script type="text/javascript" src="d3/d3.time.js"></script>
	<link type="text/css" rel="stylesheet" href="style.css"/>
	<link type="text/css" rel="stylesheet" href="colorbrewer/colorbrewer.css"/>
	<style type="text/css">

	#body {
	padding-top: 20px;
	text-align: center;
	}

	svg {
	font-size: 10px;
	shape-rendering: crispEdges;
	}

	.day {
	fill: #fff;
	stroke: #000;
	stroke-opacity: .1;
	}

	.month {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	}

	</style>
	</head>
	<body>
	<div id="body">
	<div id="footer">
	<span>…</span>, 1995-2008
	<div class="hint">use the menu to change the dataset</div>
	<div><select>
	<option value="flights">U.S. Commercial Flights</option>
	<option value="stocks">Dow Jones</option>
	</select></div>
	</div>
	</div>
	<script type="text/javascript">

	var m = [29, 20, 20, 19], // top right bottom left margin
	w = 620 - m[1] - m[3], // width
	h = 90 - m[0] - m[2], // height
	z = 11; // cell size

	var day = d3.time.format("%w"),
	week = d3.time.format("%U"),
	percent = d3.format(".1%"),
	flightData,
	stockData,
	formatDate = d3.time.format("%Y-%m-%d"),
	formatNumber = d3.format(",d"),
	formatPercent = d3.format("+.1%");

	var svg = d3.select("#body").selectAll(".year")
	.data(d3.range(1995, 2009))
	.enter().append("div")
	.attr("class", "year")
	.style("width", w + m[1] + m[3] + "px")
	.style("height", h + m[0] + m[2] + "px")
	.style("display", "inline-block")
	.append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.attr("class", "RdYlGn")
	.append("svg:g")
	.attr("transform", "translate(" + (m[3] + (w - z * 53) / 2) + "," + (m[0] + (h - z * 7) / 2) + ")");

	svg.append("svg:text")
	.attr("transform", "translate(-6," + z * 3.5 + ")rotate(-90)")
	.attr("text-anchor", "middle")
	.text(String);

	var rect = svg.selectAll("rect.day")
	.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
	.enter().append("svg:rect")
	.attr("class", "day")
	.attr("width", z)
	.attr("height", z)
	.attr("x", function(d) { return week(d) * z; })
	.attr("y", function(d) { return day(d) * z; });

	rect.append("svg:title");

	svg.selectAll("path.month")
	.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
	.enter().append("svg:path")
	.attr("class", "month")
	.attr("d", monthPath);

	d3.csv("dji.csv", function(csv) {
	stockData = d3.nest()
	.key(function(d) { return (d.date = formatDate.parse(d.Date)).getFullYear(); })
	.key(function(d) { return d.date; })
	.rollup(function(d) { return d.value = (d[0].Close - d[0].Open) / d[0].Open; })
	.map(csv);

	d3.select("select").on("change", function() {
	display(this.value === "flights" ? flightData : stockData);
	});
	});

	d3.csv("flights-departed.csv", function(csv) {
	flightData = d3.nest()
	.key(function(d) { return (d.date = formatDate.parse(d.date)).getFullYear(); })
	.key(function(d) { return d.date; })
	.rollup(function(d) { return +d[0].value; })
	.map(csv);

	display(flightData);
	});

	function display(data, title) {

	if (data === flightData) {
	var formatValue = formatNumber,
	title = "U.S. Commercial Flights",
	color = d3.scale.quantile();

	} else {
	var formatValue = formatPercent,
	title = "Dow Jones",
	color = d3.scale.quantize();
	}

	d3.select("#footer span")
	.text(title);

	svg.each(function(year) {
	color
	.domain(data === flightData ? d3.values(data[year]) : [-.05, .05])
	.range(d3.range(9));

	d3.select(this).selectAll("rect.day")
	.attr("class", function(d) { return "day q" + color(data[year][d]) + "-9"; })
	.select("title")
	.text(function(d) { return formatDate(d) + ": " + formatValue(data[year][d]); });
	});
	}

	function monthPath(t0) {
	var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
	d0 = +day(t0), w0 = +week(t0),
	d1 = +day(t1), w1 = +week(t1);
	return "M" + (w0 + 1) * z + "," + d0 * z
	+ "H" + w0 * z + "V" + 7 * z
	+ "H" + w1 * z + "V" + (d1 + 1) * z
	+ "H" + (w1 + 1) * z + "V" + 0
	+ "H" + (w0 + 1) * z + "Z";
	}

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