D3 Examples - d3.conventions

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
​
div.tooltip {
  top: -1000px;
  position: absolute;
  padding: 15px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid lightgray;
  pointer-events: none;
}
.tooltip-hidden{
  opacity: 0;
}
​
</style>
​
<body>
  <div id='graph'></div>
  <div class='tooltip'></div>
</body>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src='d3-jetpack.js'></script>
​
<script>
​
d3.tsv('data.tsv', function(data){
  c = d3.conventions({parentSel: d3.select('#graph')})
​
  c.x.domain(d3.extent(data, ƒ('sepalWidth')) ).nice()
  c.y.domain(d3.extent(data, ƒ('sepalLength'))).nice()
  c.drawAxis()
​
  c.svg.appendData('circle', data)
      .attr('cx', ƒ(c.x,'sepalWidth'))
      .attr('cy', ƒ(c.y, 'sepalLength'))
      .attr('fill', ƒ(c.color, 'species'))
      .attr({r: 5, stroke: '#000'})
      .call(d3.attachTooltip)
​
  var legend = c.svg.appendData('g.legend', c.color.domain())
      .translate(function(d, i){ return [0, i*20] })
​
  legend.append('rect')
      .attr({x: c.width - 18, width: 18, height: 18})
      .style('fill', c.color)
​
  legend.append('text')
      .attr({x: c.width - 24, y: 9, dy: '.33em', 'text-anchor': 'end'})
      .text(ƒ())
})
​
</script>
    