JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

<link rel="stylesheet" href="//rawgithub.com/deanmalmgren/d3-tip/0d3c40cb492840950f98c77bc0f18c407efbd5c8/d3-tip.css">
<script src="//rawgithub.com/Caged/d3-tip/master/index.js"></script>
<body></body>

CSS

body {
    padding: 40px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    width: 300px;
  }

  svg.n, svg.s {
    margin-left: 100px;
    margin-right: 100px;
  }
  svg.e {
    margin-left: 100px;
  }

  circle {
    fill: #ccc;
    fill-opacity: 0.6;
    stroke: #bbb;
    stroke-width: 1px;
  }

  circle:hover {
    fill: #bbb;
    stroke: #999;
  }

  text {
    text-anchor: middle;
  }

JavaScript

var data = [],
random = d3.random.normal(5),
random2 = d3.random.irwinHall(1)
for(var i = 0; i < 25; i++) data.push(random(i))

var w = 100,
h = 100,
b = 20,
r = 10,
x = d3.scale.linear().domain([0, data.length - 1]).range([r, w - r]),
y = d3.scale.linear().domain([0, d3.max(data)]).range([h,  0])

var directions = ['n', 'w', 'e', 's'];
directions.forEach(function (direction) {
    var tip = d3.tip()
        .attr('class', 'd3-tip')
        .html(function(d) { return d.toFixed(2) })
        .direction(direction)
        .offset(function () {
            if(direction=='n') { return [-10,0] }
            else if(direction=='s') { return [10,0] }
            else if(direction=='e') { return [0,10] }
            else if(direction=='w') { return [0,-10] }
        })
    
    var vis = d3.select(document.body)
        .append('svg')
        .attr('class', direction)
        .attr('width', w)
        .attr('height', h)
	.append('g')
        .attr('transform', 'translate('+b+','+b+')')
	.call(tip)
    
    vis.append('text')
        .attr('class', 'direction')
        .attr('x', w/2)
        .attr('y', -b)
        .attr('dy', '1em')
        .text('direction: ' + direction)
    
    vis.selectAll('circle')
        .data(data)
	.enter().append('circle')
        .attr('r', function(d, i) { return random2(i) * 10 })
        .attr('cx', function(d, i) { return x(i) })
        .attr('cy', y)
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
})