JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6/leaflet.js"></script>
<script src="http://www.geowiz.ru/ol/stats.js"></script>
<div id="wrapper">
    <div id="header"></div>
    <!-- #header-->
    <div id="content">
        <!--div id="map"></div-->
    </div>
    <!-- #content-->
</div>

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
#map {
    width: 100%;
    height: 400px;
    background: #ffffff;
}
.leaflet-container {
    background: #ffffff;
}

JavaScript

d3.select("#content")
    .append("div")
    .attr("id", "map");

var map = L.map('map').setView([55, 37], 4);
var svg = d3.select(map.getPanes().overlayPane).append("svg");
var g = svg.append("g");//.attr("class", "leaflet-zoom-hide");
var topBnd, bottomBnd, leftBnd, rightBnd;

map.on("viewreset", reset);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

latArr = stats.map(function (d) {
    return d.m4311;
});
lonArr = stats.map(function (d) {
    return d.m4312;
});
topBnd = d3.max(latArr);
bottomBnd = d3.min(latArr);
leftBnd = d3.min(lonArr);
rightBnd = d3.max(lonArr);

console.log("top" + topBnd + " bottom" + bottomBnd + " left" + leftBnd + " right" + rightBnd);

var circles = g.selectAll("circle")
    .data(stats)
    .enter().append("circle")
    .attr("r", "3")
    .attr("fill", "red");

reset();

function project(x) {
    var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
    return [point.x, point.y];
}

function reset() {
    bottomLeft = project([leftBnd, bottomBnd]);
    topRight = project([rightBnd, topBnd]);
    console.log("bottomLeft " + bottomLeft);
    console.log("topRight " + topRight);

    svg.attr("width", topRight[0] - bottomLeft[0])
        .attr("height", bottomLeft[1] - topRight[1])
        .style("margin-left", bottomLeft[0] + "px")
        .style("margin-top", topRight[1] + "px");
    
    g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
    circles.attr("cx", function (d) { return project([d.m4312, d.m4311])[0]; })
           .attr("cy", function (d) { return project([d.m4312, d.m4311])[1]; });
}