JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div id="containDiv">
   <svg id="containSvg" viewBox="0 0 200 200">
      <svg id="top" height="50%">
      </svg>
       
      <svg y="50%">
         <rect width="40%" height="100%" fill="blue" />
         <rect x="40%" width="60%" height="100%" fill="red" />
      </svg>
   </svg>
</div>

CSS

html, body{
    margin: 0;
    padding:0;
}

div{
    height: 200px;
    width: 200px;
    border: 1px solid purple;
}
body {
    font: 10px sans-serif;
}
.plot {
    fill: rgba(250, 250, 255, 0.6);
}
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
    stroke-width: 0;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path {
    display: none;
}
.line, .foo {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

JavaScript

var changed = false,
    size = [
        +window.outerWidth - 50, 
        +window.outerHeight
    ],
    margin = {
        top: 0,
        right: 0,
        left: 0,
        bottom: 0
    },
    g = d3.select('#top').append('g');

window.onresize = function(event) {
     size = [
        +window.outerWidth - 50, 
        +window.outerHeight - 50
    ];
   
    d3.select('#containSvg').attr('viewBox',
         '0 0 ' + size[0] + ' ' + size[1]
    );
    
    d3.select('#containDiv').style({
        width: size[0] + 'px',
        height: size[1] + 'px'
    });
    
    updateChart();
};



// xAxis
g.append('g')
.attr('class', 'x')
.attr('transform', 'translate(0,' + (parseInt(size[0]/2) - 15) +')')
.call(
    d3.svg.axis()
    .scale(
        d3.scale.identity()
        .domain([0, 100])
        .range([0, size[0]])
    )
    .orient('bottom')
    .ticks(5)
);

// yAxis
g.append('g')
.attr('class', 'y')
.attr('transform', 'translate(' + (parseInt(size[1]/2) - 15) +', 0)')
.call(
    d3.svg.axis()
    .scale(
        d3.scale.identity()
        .domain([0, 100])
       .range([0, size[0]])
    )
    .orient('right')
    .ticks(5)
);

function updateChart(){
    d3.select('.x')
    .attr('transform', 'translate(0,' + parseInt((size[0]/2) - margin.bottom) +')')
.call(
    d3.svg.axis()
    .scale(
        d3.scale.identity()
        .domain([0, 100])
        .range([0, size[0]])
    )
    .orient('bottom')
    .ticks(5)
);
    
    d3.select('.y')
    .attr('transform', 'translate(' + parseInt(size[1]/2) +', 0)')
.call(
    d3.svg.axis()
    .scale(
        d3.scale.identity()
        .domain([0, 100])
       .range([0, size[0]])
    )
    .orient('right')
    .ticks(5)
);

}


    
    

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}