JSFiddle - React, Tailwind, and code Playground

by namit101

HTML

<div id="viz"></div>
    <div id="viz2"></div>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>

JavaScript

function drawTile(divName,dataPoint)
{        
    var tileMargin = 5;
    var tileWidth = 60;
    var cornerR = 10;
    var dur = 50; //animation duration in ms
    
    //Settings for the text location
    var innerTileMargin="1em";
    var TickerTextSize=10; //in pixels
    var ValueTextSize=20; //in pixels
    
    var mysvg = d3.select("#"+divName)
        .append("svg")
        .attr("width", tileWidth+2*tileMargin)
        .attr("height", tileWidth+2*tileMargin)
        .attr("class","orderTile");  
    
    var parent = mysvg.selectAll("g.parent")
        .data([dataPoint])
        .enter().append("g")
        .attr("class","parent");
    
    var node = mysvg.selectAll("g.parent")
        .append("g")
        .attr("transform", function(d) { return "translate(" + tileMargin + "," + tileMargin + ")"; })
        .attr("class","node");        
    
    node.append("rect")
        .attr("width",tileWidth)
        .attr("height",tileWidth)
        .attr("fill","orange")
        .attr("rx",cornerR)
        .attr("ry",cornerR);
    
    node.append("text")
        .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileMargin +")" })
        .attr("text-anchor", "middle")
        .attr("dy", innerTileMargin)
        .attr("font-family","sans-serif")
        .attr("font-size",TickerTextSize+"px")
        .attr("id","osym")
        .text(function(d) { return d.symbol; });
    
    node.append("text")
        .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + tileWidth/2 +")" })
        .attr("text-anchor", "middle")
        .attr("dy", ".5em")
        .attr("font-family","sans-serif")
        .attr("font-size",ValueTextSize+"px")
        .attr("id","oval")
        .text(function(d) { return d.value; });
    
    node.append("text")
        .attr("transform",function(d) { return "translate(" + tileWidth/2 + "," + (tileMargin+tileWidth-TickerTextSize*2) +")" })
        .attr("text-anchor", "middle")
        .attr("dy",...