JSFiddle - React, Tailwind, and code Playground

by Igor Cuckovic

HTML

<script src="https://codio.io/hugolpz/D3-map/data/topo/final.json"></script>

CSS

svg { border: 5px solid #333; background-color: #C6ECFF;}

/* TOPO */
path.Topo_1 { fill:#ACD0A5; stroke: #0978AB; stroke-width: 1px; }
path.Topo_50 {fill: #94BF8B; }
path.Topo_100 {fill: #BDCC96; }
path.Topo_200 {fill: #E1E4B5; }
path.Topo_500 {fill: #DED6A3; }
path.Topo_1000 {fill:#CAB982 ; }
path.Topo_2000 {fill: #AA8753; }
path.Topo_3000 {fill: #BAAE9A; }
path.Topo_4000 {fill: #E0DED8 ; }
path.Topo_6000 {fill: #FFFFFF ; }

JavaScript

// -------------- SETTINGS ------------- //
// HTML frame: dimensions & colors
var width  = 713,
    height = 768/106*100;
    // color = d3.scale.category10(); 
    // d3.scale.ordinal().domain(["000000", "FFFFFF", "baz"]).range(colorbrewer.RdBu[9]);

// Geo Frame: geo-borders
var WNES = { "W": 67.0, "N":37.5, "E": 99.0, "S": 5.0 }; // INDIA's geoframe
var latCenter = (WNES.S + WNES.N)/2,
    lonCenter =  (WNES.W + WNES.E)/2;    
 
// Projection: New projection, center coord, scale(?):
var projection = d3.geo.mercator()
    .center([lonCenter, latCenter])
    .scale(width)
    .translate([width/2, height/2]); // this push into the center of the html frame
 
// SVG injection:
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
 
// Path
var path = d3.geo.path()
    .projection(projection)
    .pointRadius(4);
 
// Data (getJSON: TopoJSON)
d3.json("final.json", showData);
 
// ---------- FUNCTION ------------- //
function showData(error, fra) {
 
// var #Coord: projection formerly here
 
// var #Path: formerly here
    var Levels = topojson.object(fra, fra.objects.levels);

//Append Topo polygons
    svg.append("path")
        .datum(Levels)
        .attr("d", path)
    svg.selectAll(".levels")
        .data(topojson.object(fra, fra.objects.levels).geometries)
      .enter().append("path")
        .attr("class", function(d) { return "Topo_" + d.properties.name; })
        .attr("data-elev", function(d) { return d.properties.name; })
        .attr("d", path) 
         
// Function Click > Console
    function click(a){
        console.log(a.properties.name);}
 
}