JSFiddle - React, Tailwind, and code Playground

by ztsai

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/quicktests/exampleUtil.js"></script>
<table>
    <tr> <td> default </td> <td> expands(true) </td></tr>
  <tr>
    <td><svg id="chart_fixed_v" width="400" height="300"></svg></td>
    <td><svg id="chart_notfixed_v" width="400" height="300"></svg></td>
  </tr>
  <tr>
    <td><svg id="chart2_fixed_h" width="400" height="300"></svg></td>
    <td><svg id="chart2_notfixed_h" width="400" height="300"></svg></td>
  </tr>
</table>

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 --*/
td {
    border: 1px solid black;
    padding: 5px;
    text-align: center;
}

JavaScript

// InterpolatedColorLegend
window.onload = function() {
    
    function plotChart(expands, orientation, svg) {
      var xScale = new Plottable.Scales.Category();
      var xAxis  = new Plottable.Axes.Category(xScale, "bottom");
      var yScale = new Plottable.Scales.Category();
      var yAxis  = new Plottable.Axes.Category(yScale, "left");
        
      var plot = new Plottable.Plots.Rectangle()
      plot.x(function(d) { return d.x;}, xScale)
          .y(function(d) { return d.y;}, yScale)
          .attr("fill", function(d) { return d.value;}, colorScale);
        
      plot.addDataset(new Plottable.Dataset(data));
      
      var icl = new Plottable.Components.InterpolatedColorLegend(colorScale);
      icl.orientation(orientation);
      icl.expands(expands);

      var chart = new Plottable.Components.Table([
        [yAxis, plot , icl ],
        [null,  xAxis, null]
	  ]);
      chart.renderTo(svg);
      return plot;
    };
    
    function plotChart2(expands, orientation, svg) {
      var xScale = new Plottable.Scales.Category();
      var xAxis  = new Plottable.Axes.Category(xScale, "bottom");
      var yScale = new Plottable.Scales.Category();
      var yAxis  = new Plottable.Axes.Category(yScale, "left");
        
      var plot = new Plottable.Plots.Rectangle()
      plot.x(function(d) { return d.x;}, xScale)
          .y(function(d) { return d.y;}, yScale)
          .attr("fill", function(d) { return d.value;}, colorScale);
        
      plot.addDataset(new Plottable.Dataset(data));
      
      var icl = new Plottable.Components.InterpolatedColorLegend(colorScale);
      icl.orientation(orientation);
      icl.expands(expands);

      var chart = new Plottable.Components.Table([
        [yAxis, plot ],
        [null,  xAxis],
        [null, icl]
	  ]);
      chart.renderTo(svg);
      return plot;
    };
    
    var colorScale = new Plottable.Scales.InterpolatedColor();
    
    plotChart(false, "left", "#chart_fixed_v");
    
   ...