JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

  
  <div id="chartContainer"></div>

CSS

body  {position: relative;
         margin: auto 15%;
        } 

  h1     {margin-right: : 235px;
          text-align: center;
    }
  
  .axis line,
  .axis path {
         fill: none;
         stroke: #000;
         shape-rendering: crispEdges;
         stroke-width: 1
        }

JavaScript

var tsv = "Pclass	Survived	Dead	Total_Pclass	S_ratio	D_ratio\n\
First	36	80	216	0.63	0.37\n\
Second	87	97	184	0.47	0.53\n\
Third	119	372	491	0.24	0.76";

var data = d3.tsv.parse(tsv);
// Define SVG margin, width and height as variable.
  var margin = {top: 20, right: 50, bottom: 80, left: 50},
      width = 960 - margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;

  // Create scale 
  var xScale = d3.scale.ordinal()
      .rangeRoundBands([margin.left, width],0.6);

  var yScale = d3.scale.linear()
      .rangeRound([height, margin.top]);

  // Add scales to axis, set x, y and color
  var x_axis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom");
   
  var color = d3.scale.ordinal()
      .range(["#6b486b", "#a05d56"]);

  var y_axis = d3.svg.axis()
      .scale(yScale)
      .orient("left");

  // Append svg element
  var svg = d3.select("#chartContainer").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  // Load data file and add error handling in case the file fail to load
      var ratio = ["S_ratio", "D_ratio"];
      var numbers = ["Survived", "Dead"];
      var dataStackLayout = d3.layout.stack()(ratio.map(function(temp) {
          return data.map(function(d) {
              return {x : d.Pclass, survived: +d.Survived, dead: +d.Dead,
                  y : +d[temp] };
          });
      }));

  // Select the range of the data
  xScale.domain(dataStackLayout[0].map(function(d) { return d.x; }));
  yScale.domain([0, 1]);

console.log(dataStackLayout)
  // Create layers in the stacked bar chart
  var layer = svg.selectAll(".stack")
              .data(dataStackLayout)
              .enter()
              .append("g")
              .attr("class", "stack")
              .style("fill", function(d, i) { return color(i); });

var rect =...