JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="holder">
  <div class="serieschart" data-role="serieschart" data-width=300 data-height=300></div>
</div>

CSS

body {
  background: #eeeeee;
}

.serieschart {}

.gold {
  fill: #f38d04;
}

.blue {
  fill: #04b9ee;
}

.labels-gold {
  font-size: 14px;
  font-family: "Helvetica";
}

.labels-black {
  font-weight: bold;
  font-size: 12px;
  font-family: "Helvetica";
  font-variant: small-caps;
}

JavaScript

$(document).ready(function() {
  var dropShadowFilter, intenseShadow;
  var distancesL0 = [];
  var distancesL1 = [];
  var createShadowDefs = function(defs) { //http://bl.ocks.org/wimdows/1502762

    // create regular shadow with small footprint
    this.dropShadowFilter = defs.append('svg:filter')
      .attr('id', "drop-shadow")
      .attr('filterUnits', "userSpaceOnUse")
      .attr('width', '110%')
      .attr('height', '110%');
    this.dropShadowFilter.append('svg:feGaussianBlur')
      .attr('in', 'SourceGraphic')
      .attr('stdDeviation', 2)
      .attr('type', 'hueRotate')
      .attr('values', 240)
      .attr('result', 'blur-out');
    this.dropShadowFilter.append('svg:feColorMatrix')
      .attr('in', 'blur-out')
      .attr('type', 'hueRotate')
      .attr('values', 180)
      .attr('result', 'color-out');
    this.dropShadowFilter.append('svg:feOffset')
      .attr('in', 'color-out')
      .attr('dx', 1)
      .attr('dy', 1)
      .attr('result', 'the-shadow');
    this.dropShadowFilter.append('svg:feBlend')
      .attr('in', 'SourceGraphic')
      .attr('in2', 'the-shadow')
      .attr('mode', 'normal');

    // create intense shadow defs for hovering
    this.intenseShadow = defs.append('svg:filter')
      .attr('id', 'intenseShadow')
      .attr('filterUnits', "userSpaceOnUse")
      .attr('width', '130%')
      .attr('height', '130%');
    this.intenseShadow.append('svg:feGaussianBlur')
      .attr('in', 'SourceGraphic')
      .attr('stdDeviation', 2)
      .attr('result', 'blur-out');
    /*        this.intenseShadow.append('svg:feColorMatrix')
     .attr('in', 'blur-out')
     .attr('type', 'hueRotate')
     .attr('values', 180)
     .attr('result', 'color-out');*/
    this.intenseShadow.append('svg:feOffset')
      .attr('in', 'color-out')
      .attr('dx', 5)
      .attr('dy', 5)
      .attr('result', 'the-shadow');
    this.intenseShadow.append('svg:feBlend')
      .attr('in', 'SourceGraphic')
      .attr('in2', 'the-shadow')
     ...