JSFiddle - React, Tailwind, and code Playground

by andrewarnier

HTML

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id='panel' style="display: none">
    <span id='title'></span><br />
</div>

CSS

body {
   /* background-color: #cceeff;*/
	  background-color:#000;
}



#panel {
    position: absolute;
    z-index: 99;
    height: 20px;
    width: 60px;
    background-color: #000;
    -webkit-transition: all .1s;
    border-radius: 5px;
    background-color: #fffff;
    background-color: rgba(0, 0, 0, 0.3);
    color: #000;
    padding: 10px;
}

.svgback {
    background-color:#000;
}

path {
  stroke: #00F5F5;
  stroke-width: 1.5px;
  fill: #000;
}

JavaScript

var width = window.innerWidth,
    height = 600;
var svg = d3.select("body").append("svg")
    // .attr("class", "svgback")
    .attr("width", width)
    .attr("height", height);

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(150)
	.rotate([-180,0]);
   // .rotate([0,360]);
var path = d3.geo.path()
    .projection(projection);

// load and display the World
d3.json("https://gist.githubusercontent.com/d3noob/5189284/raw/598d1ebe0c251cd506c8395c60ab1d08520922a7/world-110m2.json", function(error, topology) {
    var g = svg.append("g");
    
    // load and display the cities
    d3.csv("cities.csv", function(error, data) {
        g.selectAll("circle")
           .data(data)
           .enter()
           .append("circle")
           .attr("cx", function(d) {
                   return projection([d.lon, d.lat])[0];
           })
           .attr("cy", function(d) {
                   return projection([d.lon, d.lat])[1];
           })
           .attr("r", 5)
           .style("fill", "red");
    });
    
    // 縣市/行政區界線
    d3.select("svg").append("path").datum(
            topojson.mesh(topology,
                    topology.objects["countries"], function(a,
                            b) {
                        return a !== b;
                    })).attr("d", path).attr("class","subunit-boundary");
    
    d3.select("g").selectAll("path")
          .data(topojson.feature(topology, topology.objects.countries).features)
          .enter()
          .append("path")
          .attr("d", path)
          .attr({
                d : path,
                name : function(d) {
                    return d.properties["C_Name"];
                },
                fill : '#55AA00'
        });
    
    // 顯示滑鼠所指向的縣市/行政區
    d3.select("svg").selectAll("path").on("mouseenter", function() {
        // console.log(e);
        fill = $(this).attr("fill");
        $(this).attr("fill", '#00DD77');
    
        $('#title').html($(this).attr("name"));
       ...