JSFiddle - React, Tailwind, and code Playground

by kashesandr

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="a" style="height:20px; margin:70px 0px 0px 20px; background:#808080; color:white; line-height:20px;" class="opco" >
            Head</div>
        <div style="height:120px; margin:105px 0px 0px -156px;" class="opco" id="opcoContainer">
			<div id="A" class="opcoList" onClick="opco1Click()" style="background-color:blue"></div>
			<div id="opcoName1"  class="opcoName" ><text>1</text></div>
			<div id="2" class="opcoList" onClick="opco2Click();"></div>
			<div id="opcoName2" class="opcoName"><text>3</text></div>
			<div id="3" class="opcoList" onClick="opco3Click();"></div>
			<div id="opcoName3" class="opcoName"><text>2</text></div>
			 
	</div>

CSS

svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
  }

  .axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
  path.domain {
    stroke: none;
  }
 
  .y .tick line {
    stroke: #ddd;}
	
	
	text {
  font: 10px sans-serif;
  text-anchor: end;
}
	

	
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
.legend
{
position: relative;
	top: -401px;
	left: 380px;
}
.opco
        {
            width: 150px;
            border:3px solid #29527A;
            float:left;
            text-align:center;
            font:bold 22px Arial;
            padding:4px 0px 8px 0px;
        }
        .opcoList
        {
            height:15px; width:20px; background:#808080; border:3px solid #29527A; margin-left:10px; float:left
        }
        .opcoName
        {
            font-weight:100;
            text-align:left;
            margin-left:45px;
        }

JavaScript

// Setup svg using Bostock's margin convention
var data = [
  { month: "Jan", MobileCoupon: "430000000", Bonus: "2400000000", Promotions: "200000000", Merchandise: "15000000" },
  { month: "Feb", MobileCoupon: "2500000000", Bonus: "440000000", Promotions: "2000000000", Merchandise: "15000000" },
  { month: "Mar", MobileCoupon: "3500000000", Bonus: "1800000000", Promotions: "2000000000", Merchandise: "1500000000" },
];
loadChart(data);
function loadChart(data){

var margin = {top: 20, right: 290, bottom: 35, left: 60};

var width = 760 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom,
    parse = d3.time.format("%b").parse,
    colors = ["#3D0000", "#d25c4d", "#f2b447", "#d9d574"],
    svg = d3.select("body")
        .append("svg")
        .attr('id', 'svghtml')
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
var dataset = d3.layout.stack()(
    ["MobileCoupon", "Bonus", "Promotions", "Merchandise"].map(function(fruit) {
        return data.map(function(d) {
            return {x: parse(d.month), y: +d[fruit]};
        });
    })
);

var x = d3.scale.ordinal()
  .domain(dataset[0].map(function(d) { return d.x; }))
  .rangeRoundBands([10, width-10], 0.35);

var y = d3.scale.linear()
  .domain(
      [0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })]
  ).range([height, 0]);

// Define and draw axes
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")  
  .ticks(5)
 .tickSize(-width, 0, 0)
  .tickFormat( function(d) { return "$" + d } );
  
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%b"));

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0,0)")
  
  .call(yAxis);
   svg.selectAll('.axis line, .axis path')
 
svg.append("g")
  .attr("class", "x...