JSFiddle - React, Tailwind, and code Playground

by Sergey Kalashnikov

CSS

body{
        background: white;
        height: 100%;    
    font-family: wf_segoe-ui_light,'Segoe UI Light','Segoe WP Light',wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
font-weight: 300;
color: #1a1a1a;
line-height: 1.25;
font-size: 0.75em;
      }
       svg {
         shape-rendering: crispEdges;
         heeight: 500px;
        }
       #stackedbudget-chart line {
         stroke: #000;
       }
       .rule line {
         stroke: #eee;
       }
       #histogram-trellis-chart rect {
          fill: darkblue;
          stroke: white;
       }
       #histogram-trellis-chart line {
          stroke: black;
       }

       #treemap-transition .cell {
         border: solid 1px white;
         font: 16px;
         color:white;
         line-height: 12px;
         overflow: hidden;
         position: absolute;
         text-indent: 2px;
         text-align: center;
         vertical-align: middle;
      }

       table { 
         border-collapse: collapse;
         border: 2px solid #FFFAFA; 
       }
       td {
         padding: 10px; 
       }

.tooltip {
  position: absolute;
  z-index: 10;
  text-align: center;
  width: 100px;
  height: 70px;
  padding: 2px;
  background: lightsteelblue;
  border: 1px;
  border-radius: 8px;
  pointer-events: none;
}

JavaScript

var tooltip = d3.select("body")
//var div=tooltip.append("div")
    .append("div")
	.attr("class", "tooltip")
    .style("visibility", "hidden")
    //.text("a simple tooltip");    
    //.html('<iframe style="background-color:transparent;" src="http://81.177.142.215/files/data/graph1min.html" height="170" frameborder="0" scrolling="no" allowtransparency="true"></iframe>');

var data = d3.range(10).map(Math.random);
//var data = [23, 50, 5, 10, 1, 7, 0, 0, 0, 0 ];
//var colorlist = ["maroon", "darkblue"];
//var labellist = ["Фундамент.факт", "план", "Стены.факт", "план", "Кровля.факт", "план", "Инж. сети.факт", "план", "Благоустройство.факт", "план"];

var datalist=[["Фундамент.факт", 23], 
              ["план", 50], 
              ["Стены.факт", 5], 
              ["план", 10],               
              ["Кровля.факт", 1], 
              ["план", 7],               
              ["Инж.сети.факт", 0], 
              ["план", 0],               
              ["Благоустройство.факт", 0],            
              ["план", 0]
             ]
var datalist2=[["Фундамент", 50, 50],             
              ["Стены", 7, 10], 
              ["Кровля", 1, 7], 
              ["Инж.сети", 0, 1], 
              ["Благоустройство", 0, 0],
             ]
               
var color=d3.scale.linear().domain([0, 1])
            .range(['red', 'green'])

var w = 200,
    h = 120,
    labelpad = 85,
    x = d3.scale.linear().domain([0,100]).range([0, w-100]),
    y = d3.scale.ordinal().domain(d3.range(datalist.length)).rangeBands([0, h+100], .2);

var vis = d3.select("body")
  .append("svg")
    .attr("width", w + 100)
    .attr("height", h)
  .append("g")
    .attr("transform", "translate(20,0)");

var bars = vis.selectAll("g.bar")
//    .data(datalist)
    .data(datalist2)
  .enter().append("g")
    .attr("class", "bar")
    .attr("transform", function(d, i) { return "translate(" + labelpad + "," + y(i) + ")"; });

bars.append('g')
    .append("rect")
.attr("fill",...