JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/Caged/d3-tip/master/index.js"></script>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<div id='chart'>
  <svg></svg>
</div>

CSS

text.label {
  alignment-baseline: middle;
  font-family: "Source Sans Pro";
  font-size: 16px;
  text-anchor: end;
  pointer-events: none;
}


text.title {
  alignment-baseline: middle;
  font-family: "Source Sans Pro";
  font-size: 24px;
}

text.sub {
  font-size: 16px;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  font-family: "sans-serif"
  z-index: 1;
  pointer-events: none !important;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

JavaScript

var margin = {top: 100, bottom: 60, left: 83, right: 20},
  width = 630 - margin.left - margin.right
  height = 379 - margin.top - margin.bottom
  
var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 40])
  .html(function(d) { return d.y; });



/* Invoke the tip in the context of your visualization */
svg.call(tip)



var xScale = d3.scale.linear().range([0, width]),
  yScale = d3.scale.ordinal().rangeRoundBands([height, 0], 0.1)


var data = [
  {x: 20, y: "China"}, 
  {x: 30, y: "India"},
  {x: 40, y: "Australia"},
  {x: 60, y: "Canada"}
]

xScale.domain([0, 80])
yScale.domain(["China", "India", "Australia", "Canada"])

var title = svg.append("text")
  .attr("class", "title")
  .attr("x", 0)
  .attr("y", 0)
  .attr("dy", "-80")
  .text("Crime Rates (no. per thousand)")

var subtitle = svg.append("text")
  .attr("class", "sub title")
  .attr("x", 0)
  .attr("y", 0)
  .attr("dy", "-50")
  .attr("font-size", "12px")
  .attr("fill", "#474747")
  .text("This is a subtitle")



var bars = svg.selectAll("rect")
  .data(data).enter()
  .append("g")
  
bars.append("rect")
   .attr("class", "bar")
   .attr("x", 0)
   .attr("y", function(d, i){return yScale(d.y) - yScale.rangeBand()/2})
   .attr("width", function(d, i){return xScale(d.x)})
   .attr("height", yScale.rangeBand())
   .attr("fill", "steelblue")



bars.append("text")
  .attr("class", "label")
  .attr("x", function(d){return xScale(d.x)})
  .attr("dx", "-10")
  .attr("fill", "whitesmoke")
  .attr("y", function(d, i){return yScale(d.y)})
  .text(function(d){return d.x})

bars.append("text")
  .attr("class", "label")
  .attr("x", 0)
  .attr("dx", "-7")
  .attr("y", function(d, i){return yScale(d.y)})
  .attr("fill", "#aaa")
  .text(function(d){return d.y})

bars.on("mouseover",...