JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<div id="mainContainer">

</div>

CSS

.hexagon {
        fill: white;
        pointer-events: all;
    }

    .hexagon path {
        -webkit-transition: fill 250ms linear;
        transition: fill 250ms linear;
    }

    .hexagon :hover {
        stroke: #000;
        stroke-width: 2px;
    }

    .hexagon .fill {
        fill: red;
    }

    .mesh {
        fill: none;
        stroke: #000;
        stroke-opacity: .2;
        pointer-events: none;
    }

    .border {
        fill: none;
        stroke: #000;
        stroke-width: 2px;
        pointer-events: none;
    }


    #mainContainer {
        background: #ddd;
        height: 460px;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 0;
        position: relative;
        border-top: solid 1px #fff;
        border-bottom: solid 1px #fff;
    }

JavaScript

var data = [
        {
            "mg": "med_group.jpg",
           
        },
        {
            "img": "env_group.jpg",
           
        },
        {
            "img": "med_group.jpg",
           
        },
        {
            "img": "nat_group.png",
           
        }
    ];
    var width = $(document).width(),
            height = 460,
            radius = 120;

    var svg = d3.select("#mainContainer").append("svg")
            .attr("width", width)
            .attr("height", height);
    
    
    var topology = hexTopology(radius, width, height);

    var projection = hexProjection(radius);
     var path = d3.geo.path()
            .projection(projection);


    svg.append("g")
            .attr("class", "hexagon")
            .selectAll("path")
            .data(topology.objects.hexagons.geometries)
            .enter().append("path")
            .attr("d", function (d) {
                return path(topojson.feature(topology, d));
            }).style('fill',function(d,i){
               
                return getRandomColor()
            });;


    svg.append("path")
            .datum(topojson.mesh(topology, topology.objects.hexagons))
            .attr("class", "mesh")
            .attr("d", path);



     
     var imagePatterns = svg.selectAll('filter').data(data).
             enter().append('feImage ').attr("xlink:href", function(d,i){
                 return data[i].img;
             })
            .attr("x", function(d,i){
                 return i+5+'%';
             })
            .attr("y", function(d,i){
                 return i+10+'%';
             })
            .attr("width", 230)
            .attr("height", 230)
            .attr("id", function(d,i){
                 return 'fillImage'+i;
             });

 




    function hexTopology(radius, width, height) {
        var dx = radius * 2 * Math.sin(Math.PI / 3),
                dy = radius * 1.5,
                m = Math.ceil((height + radius) / dy) + 1,
               ...