tsileo · November 24, 2012 21:20
diff --git a/data.json b/data.json
 [{"date": "Jul-2011", "value": 9}, {"date": "Aug-2011", "value": 12}, {"date": "Sep-2011", "value": 12}, {"date": "Oct-2011", "value": 4}, {"date": "Nov-2011", "value": 5}, {"date": "Dec-2011", "value": 1}, {"date": "Jan-2012", "value": 11}, {"date": "Feb-2012", "value": 7}, {"date": "Mar-2012", "value": 7}, {"date": "Apr-2012", "value": 5}, {"date": "May-2012", "value": 7}, {"date": "Jun-2012", "value": 4}, {"date": "Jul-2012", "value": 6}, {"date": "Aug-2012", "value": 1}, {"date": "Sep-2012", "value": 7}, {"date": "Oct-2012", "value": 6}, {"date": "Nov-2012", "value": 6}]
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style>
    body {
      font: 10px sans-serif;
    }

    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

    /* CSS from http://cssarrowplease.com */
    .arrow_box { padding:10px;z-index:9999;position:absolute;background: #88b7d5; border: 4px solid #c2e1f5; } 
    .arrow_box:after, .arrow_box:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 
    .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-right-color: #88b7d5; border-width: 10px; top: 50%; margin-top: -10px; } 
    .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-right-color: #c2e1f5; border-width: 16px; top: 50%; margin-top: -16px; }
    </style>
  </head>
  <body>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>

    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var dateFormat = d3.time.format("%b-%Y");

    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    var line = d3.svg.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.value); });

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.json("data.json", function(error, data) {
      data.forEach(function(d) {
        d.date = dateFormat.parse(d.date);
        d.value += d.value;
      });

      x.domain(d3.extent(data, function(d) { return d.date; }));
      y.domain(d3.extent(data, function(d) { return d.value; }));

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Count");
      points = svg.append("path")
          .datum(data).attr("class", "line")
          .attr("d", line);

      svg.selectAll("circle")
     .data(data)
     .enter().append("circle")
     .attr("fill", "steelblue")
     .attr("r", 5)
     .attr("cx", function(d) {  return x(d.date); })
     .attr("cy", function(d) { return y(d.value)})
     .attr("class", "dot")
     .attr("data-text", function(d) { return dateFormat(d.date)+": "+d.value });
    });
    $(function() {
      $('circle').live('mouseover mouseleave', function(e) {
        if (e.type == 'mouseover') {
          var posx = 0;
          var posy = 0;
          if (!e) var e = window.event;
          if (e.pageX || e.pageY)   {
            posx = e.pageX;
            posy = e.pageY;
          } else if (e.clientX || e.clientY)  {
            posx = e.clientX + document.body.scrollLeft
                + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop
                + document.documentElement.scrollTop;
          }
          $('<div class="arrow_box" style="top:'+(posy - 20)+'px;left:'+(posx + 15)+'px;">'+$(this).data("text")+'</div>').on("mouseleave", function() {$(this).remove(); }).appendTo("body"); 
        } else {
          $(".arrow_box").remove();
        }
      });
    });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style>
	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	/* CSS from http://cssarrowplease.com */
	.arrow_box { padding:10px;z-index:9999;position:absolute;background: #88b7d5; border: 4px solid #c2e1f5; }
	.arrow_box:after, .arrow_box:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
	.arrow_box:after { border-color: rgba(136, 183, 213, 0); border-right-color: #88b7d5; border-width: 10px; top: 50%; margin-top: -10px; }
	.arrow_box:before { border-color: rgba(194, 225, 245, 0); border-right-color: #c2e1f5; border-width: 16px; top: 50%; margin-top: -16px; }
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var dateFormat = d3.time.format("%b-%Y");

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.value); });

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.json("data.json", function(error, data) {
	data.forEach(function(d) {
	d.date = dateFormat.parse(d.date);
	d.value += d.value;
	});

	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain(d3.extent(data, function(d) { return d.value; }));

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Count");
	points = svg.append("path")
	.datum(data).attr("class", "line")
	.attr("d", line);

	svg.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("fill", "steelblue")
	.attr("r", 5)
	.attr("cx", function(d) { return x(d.date); })
	.attr("cy", function(d) { return y(d.value)})
	.attr("class", "dot")
	.attr("data-text", function(d) { return dateFormat(d.date)+": "+d.value });
	});
	$(function() {
	$('circle').live('mouseover mouseleave', function(e) {
	if (e.type == 'mouseover') {
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX \|\| e.pageY) {
	posx = e.pageX;
	posy = e.pageY;
	} else if (e.clientX \|\| e.clientY) {
	posx = e.clientX + document.body.scrollLeft
	+ document.documentElement.scrollLeft;
	posy = e.clientY + document.body.scrollTop
	+ document.documentElement.scrollTop;
	}
	$('<div class="arrow_box" style="top:'+(posy - 20)+'px;left:'+(posx + 15)+'px;">'+$(this).data("text")+'</div>').on("mouseleave", function() {$(this).remove(); }).appendTo("body");
	} else {
	$(".arrow_box").remove();
	}
	});
	});
	</script>
	</body>
	</html>