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
    }];

name: "TDSequentialPerfectedSetupArrows_494562716225245263_2"
position: 0
priority: 11
series: object
symbol: "downarrow"
text: ""
x: -679
y: 98.88
    circleData=[];
    for(var i = 0; i < 10; i++){
        circleData.push({
            priority: getInt(0, 200),
            size: getInt(5, 100),
            x: 0,
            y: 10,
            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()
    .domain([-width / 2, width / 2])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([-height / 2, height / 2])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(-height);

var yAxis = d3.svg.axis()
   ...