JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<div  id="container"        
      style="width: 1240px;        
             height: 688px;               
             border-radius: 10px;               
             border: 1px solid #dbdbdb;
             overflow:auto;
             position:relative">
          
</div>

CSS

/*
 * Legal Disclaimer
 *
    print '\n', 'Note that the webfonts share the TT sources'
 * These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2016
 */

   @font-face {
     font-family: "KantarBrownWeb-LightItalic";
     src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
     src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
     font-weight: normal;
     font-style: normal;
   }

   @font-face {
     font-family: "KantarBrownWeb-BoldItalic";
     src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
     src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
     font-weight: normal;
     font-style: normal;
   }

   @font-face {
     font-family: "KantarBrownWeb-Italic";
     src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
     src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2") format("woff2");
    ...

JavaScript

(input => {
    var chartWrapper = $("<div></div>").appendTo("#container")
        .attr("id", "chart_wrapper");

    var chartDiv = $("<div></div>").appendTo("#chart_wrapper")
        .attr("id", "chart_div");

    $('#chart_wrapper').append(`<style>
 
 #chart_wrapper{
 
 	width:1240px;
  height:688px;
   
  position:relative;
  
  padding: 35px 30px 20px 30px;
  
  box-sizing:border-box; 
  
 }
 
 #chart_div{
 	
  	width:100%;
    height:100%;
 }
 #chart_wrapper div {
 	margin : 0px;
  box-sizing:border-box;
 }
 </style>`)




    function dotme(text) {
        text.each(function () {
            var text = d3.select(this);
            var words = text.text().split(/\s+/);

            var ellipsis = text.text('').append('tspan').attr('class', 'elip').text('...');
            var width = parseFloat(text.attr('width')) - ellipsis.node().getComputedTextLength();
            var numWords = words.length;

            var tspan = text.insert('tspan', ':first-child').text(words.join(' '));


            while (tspan.node().getComputedTextLength() > width && words.length) {
                words.pop();
                tspan.text(words.join(' '));
            }

            if (words.length === numWords) {
                ellipsis.remove();
            }
        });
    }



    var helper = {

        attrs: function (selector, options) {

            var attrs = Object.keys(options);

            attrs.forEach(function (value, index, array) {
                selector.attr(value, options[value])
            })
        },
        styles: function (selector, options) {

            var styles = Object.keys(options);

            styles.forEach(function (value, index, array) {
                selector.style(value, options[value])
            })
        },
        mapOrder : function(array, order, key){
        	array.sort( function (a, b) {
            var A = a[key], B = b[key];

            if (order.indexOf(A) > order.indexOf(B)) {
              return 1;
           ...