JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<svg id="svg">
    <defs>
        <marker id="upArrow"
                viewBox="0 0 10 10" 
                refX="0" refY="5"
                markerWidth="3" 
                markerHeight="3"
                orient="auto">
            <path id="upArrowPath" stroke="context-stroke" fill="context-stroke" d="M 0 0 L 10 5 L 0 10 z" />
                    
	    </marker>
        <marker id="downArrow"
                viewBox="0 0 10 10" 
                refX="0" refY="5"
                markerWidth="3" 
                markerHeight="3"
                orient="auto">
            <path id="downArrowPath" fill="red" stroke="red" d="M 0 0 L 10 5 L 0 10 z" />
	    </marker>
    </defs>

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

JavaScript

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 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.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,' + ry + 'L0,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()
    .scale(y)
    .orient("left")
    .ticks(5)
    .tickSize(-width);

var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1,...