rebornix/index

## index
<!DOCTYPE html>
<html>
<head>
  <title>d3.tip.js - Tooltips for D3</title>
  <meta charset="utf-8" />
  <title>Bar Chart</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="../index.js"></script>
  <script type="text/javascript">
    data = [{"total":1225, "date": "5.1"},{"total":279, "date": "5.2"},{"total":212, "date": "5.3"},{"total":335, "date": "5.4"},{"total":329, "date": "5.5"},{"total":234, "date": "5.6"},{"total":175, "date": "5.7"}, {"total":1225, "date": "5.1"},{"total":279, "date": "5.2"},{"total":212, "date": "5.3"},{"total":335, "date": "5.4"},{"total":329, "date": "5.5"},{"total":234, "date": "5.6"},{"total":175, "date": "5.7"}, {"total":1225, "date": "5.1"},{"total":279, "date": "5.2"},{"total":212, "date": "5.3"},{"total":335, "date": "5.4"},{"total":329, "date": "5.5"},{"total":234, "date": "5.6"},{"total":175, "date": "5.7"}, {"total":1225, "date": "5.1"},{"total":279, "date": "5.2"},{"total":212, "date": "5.3"},{"total":335, "date": "5.4"},{"total":329, "date": "5.5"},{"total":234, "date": "5.6"},{"total":175, "date": "5.7"}];
  </script>
  <link rel="stylesheet" type="css" href="example-styles.css">
  <style type="text/css">
  body {
    padding: 40px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    height: 1000px;
  }

  .d3-tip span {
    color: #ff00c7;
  }

  .domain {
    display: none;
  }

  .axis line {
    stroke-width: 1px;
    stroke: #eee;
    shape-rendering: crispedges;
  }

  .axis text {
    fill: #888;
  }

  rect {
    fill: #339cff;
    fill-opacity: 0.7;
  }

  rect:hover {
    fill-opacity: 1;
  }
  </style>
</head>
<body>
  <div id="graph">

  </div>
  <script type="text/javascript">
    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .html(function(d) { return d.date + ' <span>' + d.total + '</span>' + ' downloads' })
      .offset([-12, 0])

    var w = 266,
        h = 100,
        padt = 7, padr = 7, padb = 20, padl = 10,
        x  = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
        y  = d3.scale.linear().range([h, 0]),
        yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
        xAxis = d3.svg.axis().scale(x).orient('bottom')

    vis = d3.select('#graph')
      .append('svg')
      .attr('width', w)
      .attr('height', h + padt + padb)
    .append('g')
      .attr('transform', 'translate(' + padl + ',' + padt + ')')

    var max = d3.max(data, function(d) { return d.total })
    x.domain(d3.range(data.length))
    y.domain([0, max])

    vis.call(tip)
    var bars = vis.selectAll('g.bar')
      .data(data)
    .enter().append('g')
      .attr('class', 'bar')
      .attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })

    bars.append('rect')
      .attr('width', function() { return x.rangeBand() })
      .attr('height', function(d) { return h - y(d.total) })
      .attr('y', function(d) { return y(d.total) })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>d3.tip.js - Tooltips for D3</title>
	<meta charset="utf-8" />
	<title>Bar Chart</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="../index.js"></script>
	<script type="text/javascript">
	data = [{"total":1225, "date": "5.1"},{"total":279, "date": "5.2"},{"total":212, "date": "5.3"},{"total":335, "date": "5.4"},{"total":329, "date": "5.5"},{"total":234, "date": "5.6"},{"total":175, "date": "5.7"}, {"total":1225, "date": "5.1"},{"total":279, "date": "5.2"},{"total":212, "date": "5.3"},{"total":335, "date": "5.4"},{"total":329, "date": "5.5"},{"total":234, "date": "5.6"},{"total":175, "date": "5.7"}, {"total":1225, "date": "5.1"},{"total":279, "date": "5.2"},{"total":212, "date": "5.3"},{"total":335, "date": "5.4"},{"total":329, "date": "5.5"},{"total":234, "date": "5.6"},{"total":175, "date": "5.7"}, {"total":1225, "date": "5.1"},{"total":279, "date": "5.2"},{"total":212, "date": "5.3"},{"total":335, "date": "5.4"},{"total":329, "date": "5.5"},{"total":234, "date": "5.6"},{"total":175, "date": "5.7"}];
	</script>
	<link rel="stylesheet" type="css" href="example-styles.css">
	<style type="text/css">
	body {
	padding: 40px;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12px;
	height: 1000px;
	}

	.d3-tip span {
	color: #ff00c7;
	}

	.domain {
	display: none;
	}

	.axis line {
	stroke-width: 1px;
	stroke: #eee;
	shape-rendering: crispedges;
	}

	.axis text {
	fill: #888;
	}

	rect {
	fill: #339cff;
	fill-opacity: 0.7;
	}

	rect:hover {
	fill-opacity: 1;
	}
	</style>
	</head>
	<body>
	<div id="graph">

	</div>
	<script type="text/javascript">
	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.html(function(d) { return d.date + ' <span>' + d.total + '</span>' + ' downloads' })
	.offset([-12, 0])

	var w = 266,
	h = 100,
	padt = 7, padr = 7, padb = 20, padl = 10,
	x = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
	y = d3.scale.linear().range([h, 0]),
	yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
	xAxis = d3.svg.axis().scale(x).orient('bottom')

	vis = d3.select('#graph')
	.append('svg')
	.attr('width', w)
	.attr('height', h + padt + padb)
	.append('g')
	.attr('transform', 'translate(' + padl + ',' + padt + ')')

	var max = d3.max(data, function(d) { return d.total })
	x.domain(d3.range(data.length))
	y.domain([0, max])

	vis.call(tip)
	var bars = vis.selectAll('g.bar')
	.data(data)
	.enter().append('g')
	.attr('class', 'bar')
	.attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })

	bars.append('rect')
	.attr('width', function() { return x.rangeBand() })
	.attr('height', function(d) { return h - y(d.total) })
	.attr('y', function(d) { return y(d.total) })
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)
	</script>
	</body>
	</html>