d3.conventions

Succinct graphing with d3-jetpack.

Compare to the original.

<!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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js