JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id = "title"></div>
	<div id="svg"> </div></body>

CSS

interface css

.canvas{
	fill: #FEFFFE;
}

#canvasChild.canvas{
	fill: white;
	
}

.visible{
	visibility: visible;
	opacity:1;
}
.hidden {
        visibility: hidden;
		pointer-events:none;
      }
	  
.textNormal{
	text-anchor: middle;
	color: steelblue;
	position:relative;
	font: 14px Calibri;
}




body {
  font: 10px sans-serif;
}

.axis path, .axis line 
{
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot 
{
  stroke: #000;
}

.pad956, .pad958 
{
	opacity: 0.8;
  	stroke: #000;
}


#pinDataText{

	text-anchor: middle;
	color: steelblue;
	position:relative;
	font: 14px Calibri;
}

.pad956Label, .pad958Label{
	
	text-anchor: middle;
	color: steelblue;
	position:relative;
	font: 8px Calibri;
}

JavaScript

var data=[{
	"Part": 956,
	"Pos": "P2",
	"Side": "A",
	"Number": 1,
	"PIN/PAD": "A1",
	"xdim": 0.022,
	"ydim": 0.08,
	"centrex": 1.775685039,
	"centrey": 0.1945,
	"Rotated": "TRUE"
}];
var svgContainer = d3.selectAll('#svgContainer');

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 1240 - margin.left - margin.right,
    height = 740/1.5 - margin.top - margin.bottom;


var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);
//.range([width,0]);
//.range([0, width-200]);
var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(15);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(15);

var viewer = d3.select("#svg").append('g')
//.attr("transform", "translate(" + ((width/2) - (width/4)) + "," + 35 + ")")
.attr('id', 'viewerSVG');



var svg = viewer.append("svg").attr('id', 'viewerPins')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) // data is the JSON
  {
    d.Length = +d.centrey;
    d.Width = +d.centrex;
    d.xdim = +d.xdim;
    d.ydim = +d.ydim;
  });

 // x.domain(d3.extent(data, function(d) { return d.Width; })).nice();
  //y.domain(d3.extent(data, function(d) { return d.Length; })).nice();

var maxW = d3.max(data, function(d) { return d.Width; });
  var maxL = d3.max(data, function(d) { return d.Length; });

  x.domain([0, maxW]).nice();
  y.domain([0, maxW]).nice();
//y.domain([0, maxW]).nice();



// axis

var axisMovement = 0;//skipped this for simplicity

  svg.append("g")
      .attr("class", "x axis")
      .attr('transform','translate(0,'+height+')') 
      // did transform w/o axisMovement thingie for simplicity
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width - 200)
      .attr("y",...