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{
  
}
.labels-black{
  
}

JavaScript

$(document).ready(function() {
 var dropShadowFilter, intenseShadow;
 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)
 ...