block by melalj 145ef67aa04a6713bc1d026eed46c59e

MapTable: Heatmap visualization (SVG + Canvas) exportable

Full Screen

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://packet-clearing-house.github.io/maptable/maptable.css">
    <title>MapTable: Heatmap visualization (SVG + Canvas) exportable</title>
  </head>
  <body>

    <div id="vizContainer" class='container'></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
    <script src="https://packet-clearing-house.github.io/maptable/maptable.min.js"></script>
    <script>
      var viz = d3.maptable('#vizContainer')
        .csv('basic.csv')
        .map({
          exportSvgClient: true,
          path: 'ne_110m_admin_0_countries.json',
          filterCountries: function (country) {
              return country.id !== 'AQ';
          },
          heatmap: {
            weightByAttribute: function(d) {
              return parseInt(d.traf, 10);
            },
            weightByAttributeScale: 'log',
            circles: {
              color: '#0000FF',
              blur: 6.0,
            },
            borders: {
              opacity: 0.2,
            },
          },
          markers: {
            attr: {
              fill: "yellow",
    					stroke: "#d9d9d9",
    					"stroke-width": 0.5,
              r: {
      					min: "minValue",
      					max: "maxValue",
      					transform: function(v) {
      						return 3 * Math.sqrt(v);
      					},
      					rollup: function(values) {
      						return values.length;
      					},
      				},
            }
          }
        })
        .render();
    </script>
  </body>
</html>

basic.csv

country,region,city,longitude,latitude,traf
Angola,Africa,Luanda,13.23,-8.85,20000000
Argentina,Latin America,Buenos Aires,-58.42,-34.57,40000000
Argentina,Latin America,Córdoba,-64.1858,-31.4036,60000000
Argentina,Latin America,Neuquén,-68.1333,-38.9333,80000000
Australia,Asia-Pacific,Perth,115.95,-31.93,20000000
Australia,Asia-Pacific,Sydney,151.17999,-33.95,20000000
Australia,Asia-Pacific,Sydney,151.17999,-33.95,10000000
Austria,Europe,Klagenfurt,14.33,46.65,80000000
Austria,Europe,Vienna,16.37,48.2,40000000
Bahrain,Europe,Manama,50.65,26.27,40000000
Bangladesh,Asia-Pacific,Dhaka,90.38,23.77,70000000
Bolivia,Latin America,La Paz,-68.15,-16.5,30000000
Brazil,Latin America,São Paulo,-46.65,-23.62,80000000
Bulgaria,Europe,Sofia,23.38,42.65,70000000
Bulgaria,Europe,Sofia,23.38,42.65,70000000
Bulgaria,Europe,Sofia,23.38,42.65,20000000
Canada,North America,Calgary,-114.0669,51.0544,20000000
Canada,North America,Halifax,-63.61,44.67,60000000
Canada,North America,Montreal,-73.75,45.47,60000000
Canada,North America,Ottawa,-75.72,45.4,1000000
Canada,North America,Toronto,-79.4,43.67,20000000
Canada,North America,Winnipeg,-97.15,49.8833,1000000
Canada,North America,Winnipeg,-97.15,49.8833,50000000
China,Asia-Pacific,Hong Kong,114.18,22.33,70000000
Costa Rica,Latin America,San Jose,-84.083,9.93504,70000000
Czech Republic,Europe,Prague,14.43,50.08,10000000
Dominica,Latin America,Roseau,-61.4,15.3,50000000
Egypt,Africa,Cairo,31.4,30.13,30000000
Estonia,Europe,Tallinn,24.8,59.35,1000000
Finland,Europe,Tampere,23.58,61.42,50000000
France,Europe,Lyon,4.95,45.72,80000000
France,Europe,Paris,2.33,48.8,60000000
France,Europe,Paris,2.33,48.8,70000000
France,Europe,Paris,2.33,48.8,70000000
Gambia,Africa,Serrekunda,-16.6666,13.43637,10000000
Germany,Europe,Berlin,13.52,52.38,70000000
Germany,Europe,Berlin,13.52,52.38,70000000
Germany,Europe,Düsseldorf,6.76,51.28,20000000
Germany,Europe,Frankfurt,8.68,50.12,1000000
Germany,Europe,Frankfurt,8.68,50.12,50000000
Germany,Europe,Hamburg,10.03,53.55,70000000
Germany,Europe,Munich,11.7,48.13,70000000
Grenada,Latin America,St. Georges,-61.74995,12.05363,40000000
Haiti,Latin America,Port au Prince,-72.3,18.57,40000000
India,Asia-Pacific,Mumbai,72.8,19,70000000
Indonesia,Asia-Pacific,Jakarta,106.82944,-6.17444,30000000
Indonesia,Asia-Pacific,Jakarta,106.82944,-6.17444,20000000
Indonesia,Asia-Pacific,Jakarta,106.82944,-6.17444,10000000
Ireland,Europe,Dublin,-6.25,53.33,80000000
Italy,Europe,Torino,7.65,45.22,70000000
Jamaica,Latin America,Kingston,-76.78,17.93,20000000
Japan,Asia-Pacific,Tokyo,139.78,35.55,60000000
Japan,Asia-Pacific,Tokyo,139.78,35.55,70000000
Kenya,Africa,Nairobi,36.82,-1.32,20000000
Korea,Asia-Pacific,Seoul,126.93,37.5,20000000
Lebanon,Europe,Beirut,35.48,33.82,60000000
Malawi,Africa,Blantyre,35,-15.78333,20000000
Malaysia,Asia-Pacific,Kuala Lumpur,101.7,3.13,40000000
Mexico,North America,Mexico DF,-99.13408,19.41894,1000000
Mozambique,Africa,Maputo,32.57,-25.92,10000000
Namibia,Africa,Windhoek,17.08514,-22.56429,10000000
Nepal,Asia-Pacific,Kathmandu,85.37,27.7,50000000
Netherlands,Europe,Amsterdam,4.77,52.3,80000000
Netherlands,Europe,Amsterdam,4.77,52.3,40000000
New Zealand,Asia-Pacific,Auckland,174.8,-37.02,1000000
New Zealand,Asia-Pacific,Wellington,174.8,-41.33,20000000
Nigeria,Africa,Lagos,3.35,6.55,20000000
Philippines,Asia-Pacific,Manila,120.95,14.58,20000000
Poland,Europe,Warsaw,21,52.23,30000000
Puerto Rico,North America,San Juan,-66.11,18.47,20000000
Rwanda,Africa,Kigali,30.12,-1.97,70000000
Singapore,Asia-Pacific,Singapore,103.98,1.37,1000000
Singapore,Asia-Pacific,Singapore,103.98,1.37,50000000
Singapore,Asia-Pacific,Singapore,103.98,1.37,60000000
South Africa,Africa,Cape Town,18.6,-33.98,10000000
South Africa,Africa,Cape Town,18.6,-33.98,1000000
South Africa,Africa,Durban,30.95,-29.97,40000000
South Africa,Africa,Durban,30.95,-29.97,30000000
South Africa,Africa,Johannesburg,28.23,-26.13,1000000
Sudan,Africa,Khartoum,32.58693,15.60214,60000000
Sweden,Europe,Stockholm,18.05,59.33,30000000
Switzerland,Europe,Zurich,8.53,47.48,60000000
Tanzania,Africa,Arusha,36.62,-3.33,30000000
Tanzania,Africa,Dar es Salaam,39.2,-6.87,70000000
Trinidad and Tobago,Latin America,Barataria,-61.46287,10.64688,50000000
Tunisia,Africa,Enfidha,10.37935,36.1344,10000000
Tunisia,Africa,Tunis,10.16596,36.81881,80000000
Turkey,Europe,Istanbul,28.82,40.97,80000000
Ukraine,Europe,Kiev,30.45,50.4,70000000
United Arab Emirates,Europe,Dubai,55.33,25.25,20000000
United Kingdom,Europe,Leeds,-1.55,53.8,10000000
United Kingdom,Europe,London,-0.45,51.48,1000000
United Kingdom,Europe,London,-0.45,51.48,50000000
United Kingdom,Europe,Manchester,-2.27,53.35,30000000
United States,North America,Ashburn,-77.46,39.02,20000000
United States,North America,Atlanta,-84.4,33.86,10000000
United States,North America,Boston,-71.03,42.37,80000000
United States,North America,Chicago,-87.65,41.85,50000000
United States,North America,Indianapolis,-86.10947,39.77511,20000000
United States,North America,Jacksonville,-81.65565,30.33218,40000000
United States,North America,Los Angeles,-118.25,33.97,60000000
United States,North America,Los Angeles,-118.25,33.97,70000000
United States,North America,Los Angeles,-118.25,33.97,70000000
United States,North America,Miami,-80.29,25.83,50000000
United States,North America,New York,-74,40.75,40000000
United States,North America,New York,-74,40.75,30000000
United States,North America,New York,-74,40.75,20000000
United States,North America,New York,-74,40.75,10000000
United States,North America,Palo Alto,-122.15,37.44,50000000
United States,North America,Portland,-122.68,45.52,20000000
United States,North America,Reno,-119.76983,39.46926,1000000
United States,North America,San Diego,-117.16,32.72,60000000
United States,North America,San Francisco,-122.43,37.78,70000000
United States,North America,Seattle,-122.33,47.61,40000000
United States,North America,Seattle,-122.33,47.61,30000000
Vanuatu,Asia-Pacific,Port Vila,168.32,-17.75,30000000