1. Components
  2. Datamaps


Tailwind CSS Datamaps

Datamaps are customizable SVG map visualizations for the web. They offer intuitive geospatial insights by transforming raw data into interactive visual formats.

Requires JS

Note that this component requires the use of the third-party DataMaps plugin.

How to use

  1. Install Datamaps

    Install datamaps via npm

    npm i datamaps
  2. Add the Datamaps JavaScript

    Include the JavaScript <script> near the end of your </body> tag:

    <script src="./node_modules/d3/d3.min.js"></script><script src="./node_modules/topojson/build/topojson.min.js"></script><script src="./node_modules/datamaps/dist/datamaps.world.min.js"></script>

Basic usage

A basic usage of Maps.