JSFiddle - React, Tailwind, and code Playground

by kaddindar

HTML

<html>
    <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.all.min.js'></script>
              
    </head>

    <body>
        <button id="ABC" onclick='updateCost(ABC)'>ABC </button>
        <button id="DEF" onclick='updateCost(DEF)'>DEF </button>
        <div id="container" style="position: relative; width: 1000px; height: 500px;"></div>
        <script>
// Create data array of values to visualize
var dataArray = [23, 13, 21, 14];

// Create variable for the SVG
var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");



            var map = new Datamap({
                element: document.getElementById('container'),
                fills: {
                    high: '#afafaf',
                    low: '#123456',
                    medium: 'blue',
                    UNKNOWN: 'rgb(0,0,0)',
                    defaultFill: 'red'
                },
               scope: 'usa',
        //         data: {
        //     IRL: {
        //         fillKey: 'LOW',
        //         numberOfThings: 2002
        //     },
        //     USA: {
        //         fillKey: 'MEDIUM',
        //         numberOfThings: 10381
        //     }
        // },
                geographyConfig: {
                    hightlightBorderColor : '#bada55',
                    popupTemplate: function(geo, data) {
                        svg.selectAll("rect")
                                    .data(data.Cases)
                                    .enter().append("rect")
                                          .attr("class", "bar")
                                          .attr("height", function(d, i) {return (d)})
                                          .attr("width","40")
                      ...

CSS

html, body {
    margin: 0;
    height: 100%
  }
  
  /*Rectangle bar class styling*/
  
  .bar {
    fill: #0080FF
  }
  
  .bar:hover {
    fill: #003366
  }
  
  /*Text class styling*/
  
  .text {
    fill: white;
    font-family: sans-serif
  }/* Add your styles here */