JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script>
   <h1 style = "text-align:center; color:steelblue"><bold>Geomapping Example: US by Populations</bold></h1>
    <!-- Your D3.js code for making a Bar Graph -->
    <div id="tooltip" class="hidden">
      <p><span id="label"></span></p>
    </div>
    <script type="text/javascript" src="geoMap.js"></script>
    <!-- Submission Info -->
    <h4>Created by Venkata Karthik Thota </h4>

    <h4>Description: Hover over each state to display the statistics of that specific state. For example, placing your cursor over Califonina, a small box will appear with the state name and its estimated population.</h4>

    <!-- Create a list using <ul> and <li> tag -->
<!--
    <h4>Files Submitted:</h4>
    <ul>
      <li>index.html</li>
      <li>geoMap.js</li>
      <li>stylesheet.css</li>
      <li>us-pop.csv</li>
      <li>us-states.json</li>
    </ul>
-->

    <h4> Sources: </h4>
    <ul>
      <li>D3: Interactive Data Visualization for the Web</li>
      <li>D3 API Reference</li>
    </ul>