JSFiddle - React, Tailwind, and code Playground

by bluong63

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgithub.com/palantir/plottable/1959fix/plottable.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/quicktests/exampleUtil.js"></script>
<div id="container">
  <svg id="chart" width="600" height="400"></svg>
</div>

CSS

</style> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/palantir/plottable/develop/plottable.css"> <style type="text/css">
/*-- Add custom styles after this line --*/
body { background-color: #AAA; }
svg { background-color: #FFF; }
.not-hovered {
  opacity: 0.6;
}

JavaScript

var plot;
window.onload = function(){

  var data = [
      {x1: 400, x2: 912, y: "x", value: 1},
      {x1: 17, x2: 402, y: "y", value: 2},
      {x1: 111, x2: 1000, y: "z", value: 3},

  ];    
    
  var dataset = new Plottable.Dataset(data);   
    
  var xScale = new Plottable.Scales.Linear();
  var yScale = new Plottable.Scales.Category();
  var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
  var yAxis = new Plottable.Axes.Category(yScale, "left");
  var colorScale = new Plottable.Scales.Color();
    
  plot = new Plottable.Plots.Rectangle()
    .addDataset(dataset)
    .x( function(d){ return d.x1; }, xScale)
    .x2( function(d){ return d.x2; }, xScale)
    .y( function(d){ return d.y; }, yScale)
    .attr("fill", function(d) { return d.value; }, colorScale);
    
  new Plottable.Components.Table([[yAxis, plot],[null, xAxis]]).renderTo("#chart");   
    
  var interaction = new Plottable.Interactions.Pointer();

  // Moving around the plot makes all rectangles translucent except the rectangle currently being hovered.
  interaction.onPointerMove(function(point) {
    plot.selections().classed("not-hovered", true);

    // entitiesAt will grab all entities under the given point.
    var entity = plot.entitiesAt(point)[0];

    if (entity == null) { return; }
    entity.selection.classed("not-hovered", false);
  });

  // Exiting the plot will restore the opacity of the rectangles.
  interaction.onPointerExit(function(point) {
    plot.selections().classed("not-hovered", false);
  });
  interaction.attachTo(plot);   

}