JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="simulation-1">
   <canvas width="600" height="400"></canvas>
</div>

CSS

#simulation-1 {
				display: inline-block;
			    overflow: hidden;
			    position: relative;
			    vertical-align: middle;
			    width: 100%; height: auto;
				border: solid red;
			}

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

JavaScript

outerHeight = 400;
		outerWidth = 600;

		var margin = {top: 20, right: 20, bottom: 30, left: 40};
		
   			 width = outerWidth - margin.left - margin.right;
    		 height = outerHeight - margin.top - margin.bottom;

		var svg = d3.select("div#simulation-1")					
			.append("svg")		
			.attr("preserveAspectRatio", "xMinYMin meet")
   			.attr("viewBox", "0 0 "+outerWidth+" "+outerHeight)
            .attr("class","svg");

    var largeChartComponents = largeChartSetup();

function largeChartSetup(){

			 	var labelsLC = ["","Frequencyt",""]

			 	var yAxisPadding = width-100;
			 	var xAxisStart = 0;

			 	var largeChart = svg
								  .append("g")								  
								  .attr("class","largeChart")
								  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
					

				var ticks = [0,1000,2000]
				var yScaleLC = d3.scale.linear()
					    .domain([0, 2000])
					    .range([height, 0]);
			    
				var yAxisLC = d3.svg.axis()						  
							  .orient("right")							  
							  .scale(yScaleLC)							  
							  .tickSize(1)							  
							  .tickValues(ticks)	
				

				largeChart.append("g")
				.attr("class", "y-axis")	
				.attr("transform", "translate("+ yAxisPadding +",0)")						
				.call(yAxisLC);
}