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 Additional Installation

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

Learn more

Installation

Install Datamaps

Install datamaps via npm

Terminal

                          
                            npm i datamaps

Add the Datamaps JavaScript

Include the JavaScript <script> near the end of your </body> tag:
<script src="./assets/vendor/d3/d3.min.js"></script> <script src="./assets/vendor/topojson/build/topojson.min.js"></script> <script src="./assets/vendor/datamaps/dist/datamaps.world.js"></script>
HTML
```
                          
                        
```
To fix the stuck hover highlight / broken clicks issue in Chrome/Chromium, comment out the moveToFront block in handleGeographyConfig:
// if ( ! /((MSIE)|(Trident))/.test(navigator.userAgent) ) { // moveToFront.call(this); // }
See Issue #557.

World datamap

Render a basic world map with Datamaps as a starting point for region-based data visualizations.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" class="relative min-h-full h-full">
                          <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                            <title>Preline UI</title>
                            <link rel="shortcut icon" href="../../favicon.ico">
                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                            <link rel="stylesheet" href="../../assets/css/main.min.css">
                          </head>
                          <body class="overflow-hidden"><div id="hs-users-datamap"></div>
                            
                            <script src="../../assets/vendor/d3/d3.min.js"></script>
                            <script src="../../assets/vendor/topojson/build/topojson.min.js"></script>
                            <script src="../../assets/vendor/datamaps/dist/datamaps.world.js"></script>
                            <script src="../../assets/vendor/preline/dist/helper-shared.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script src="../../assets/vendor/preline/dist/helper-shared.js"></script>

this.svg.selectAll('.datamaps-subunit').style('stroke', () => (mode === 'dark') ? varToColor('--map-colors-border-inverse') : varToColor('--map-colors-border'));
      
                                  this.updateChoropleth(dataSet, {reset: true});
                                });
    
                                dataMap.update(localStorage.getItem('hs_theme'));
    
                                window.addEventListener('on-hs-appearance-change', (evt) => {
                                  tabTheme = evt.detail;
      
                                  dataMap.update(evt.detail);
                                });

window.addEventListener('on-hs-color-theme-change', (evt) => {
                                  if (tabTheme) dataMap.update(tabTheme);
                                  else dataMap.update(evt.detail);
                                });

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => {
                                  tabTheme = evt.detail;
      
                                  dataMap.update(tabTheme);
                                });
    
                                window.addEventListener('resize', function () {
                                  dataMap.resize();
                                });
                              })();
                            </script>
                          </body>
                        </html>

this.svg.selectAll('.datamaps-subunit').style('stroke', () => (mode === 'dark') ? varToColor('--map-colors-border-inverse') : varToColor('--map-colors-border'));
      
                              this.updateChoropleth(dataSet, {reset: true});
                            });
    
                            dataMap.update(localStorage.getItem('hs_theme'));
    
                            window.addEventListener('on-hs-appearance-change', (evt) => {
                              tabTheme = evt.detail;
      
                              dataMap.update(evt.detail);
                            });

window.addEventListener('on-hs-color-theme-change', (evt) => {
                              if (tabTheme) dataMap.update(tabTheme);
                              else dataMap.update(evt.detail);
                            });

if (tabpanel) tabpanel.addEventListener('on-hs-appearance-change', (evt) => {
                              tabTheme = evt.detail;
      
                              dataMap.update(tabTheme);
                            });
    
                            window.addEventListener('resize', function () {
                              dataMap.resize();
                            });
                          })();
                        </script>

Installation

Install Datamaps

Add the Datamaps JavaScript

World datamap