Simple annotation

_.md

[ Launch: Simple annotation ] 8ec042cd0cf29ae970a3 by trinary

config.json

{"description":"Simple annotation","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/e5vMCJJ.png"}

inlet.js

var data = [2,4,6,5,3,5,7,10,4,3];
var width = 540;
var height = 320;

var x = d3.scale.ordinal()
	.domain(d3.range(data.length))
    .rangeRoundBands([0, width], 0.3);

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

var svg = d3.select("svg");
var g = svg.append("g").attr("transform", "translate(20,20)");

g.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d,i) { return x(i); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d); })
      .attr("height", function(d) { return height - y(d); })
	.on("mouseover", annotate);

function annotate(d,i) {
  d3.selectAll(".annotation").remove();
  var path = d3.select("g").append("path").classed("annotation", true);
  var box = d3.select("g").append("rect").classed("annotation", true);
  box.attr({
    x: 60,
    y: 400,
    width: 164,
    height: 100
  });
  
  path.attr("d", "M" + [60,400] + " L " + [x(i) + x.rangeBand()/2, 320]);  
} 

style.css

.bar {
  stroke: none;
  fill: #335;
}

path.annotation {
  fill: none;
  stroke-width: 2px;
  stroke: #222;
}

rect.annotation {
  fill: none;
  stroke: #222;
}