JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<svg id="svg">
    <defs>
        <marker id="upArrow"
                viewBox="0 0 10 10" 
                refX="5" refY="0"
                markerWidth="10" 
                markerHeight="10">
            <path id="upArrowPath" stroke="green" 
                    fill="green" d="M 5 0 L 0 10 L 10 10 z" />
	    </marker>
        <marker id="downArrow"
                viewBox="0 0 10 10" 
                refX="5" refY="0"
                markerWidth="2" 
                markerHeight="3">
            <path id="downArrowPath" fill="red" stroke="red" d="M 0 0 L 10 0 L 5 10 z" />
	    </marker>
        <clipPath id="clip">
            <rect width="560" height="500"></rect>
        </clipPath>
    </defs>
    <g>
        
    </g>
    
</svg>

CSS

svg {
    border: 1px solid;
      font: 10px sans-serif;

}

.symbol{
    fill: blue;
    stroke: black;
    stroke-width: 1;
}
.up, .down{
    stroke-width: 1;
}

.up, .upText{
    marker-end: url(#upArrow);
}

.down{
    stroke: red;
     marker-end: url(#downArrow);
}

rect {
  fill: #ddd;
}

.axis path, .axis line {
  fill: none;
  stroke: #fff;
}
.x{
    clip-path:url(#clip);
}

JavaScript

function getInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

function Chart(){
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 600 - margin.left - margin.right,
    height = 550 - margin.top - margin.bottom,
        line,
        path,
        group,
        arc,
        circle,
        theY1,
        theY2;
    
    var colors = ['purple', 'blue', 'orange', 'green'],
        data = [{
        x: 10,
        y: 50
    }],
        circleData = [
            {
                priority: 10,
                size: 10,
                color: 'purple'
                
            },
            {
                priority: 1,
                size: 50,
                color: 'orange'
            },
            {
                priority: 5,
                size: 40,
                color: 'yellow'
            }];
    
    circleData=[];
    for(var i = 0; i < 1000; i++){
        circleData.push({
            priority: getInt(0, 200),
            size: getInt(5, 100),
            x: getInt(0, 300),
            y: getInt(0, 300),
            colors: getInt(0, colors.length - 1)
        });
    }
    
    circleData.sort(function (a,b){
      return a.priority > b.priority;
    });
    
    function upTri(){
        
      var size = 25,
          rx = Math.sqrt(size / Math.sqrt(3)), 
          ry = theY = (rx * Math.sqrt(3) / 2);
      return 'M0,' + -ry + 
          'L' + rx + ',' + ry + 
          ' ' + -rx + ',' + ry + 
          'Z' +
          'M0,' + (ry*2) + 
          'L0,' + ry;
    }
    
    function upArrow(size){
        
      var size = size,
          rx = Math.sqrt(size / Math.sqrt(3)), 
          ry = theY1 = (rx * Math.sqrt(3) / 2);
        
      return 'M0,0';
    }
    
    function downArrow(size){
        
      var size = size,
          rx = Math.sqrt(size / Math.sqrt(3)), 
          ry = theY2 = (rx * Math.sqrt(3) / 2);
       
      return 'M0,' + -ry + 'L0,0';
    }

var x = d3.scale.linear()
  ...