Old school D3 from simpler times

All examples By author By category About

melalj

Full window Github gist

MapTable: Heatmap visualization (SVG + Canvas) exportable

<!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>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js to https://cdnjs.cloudflare.com/ajax/libs/filesaver.js/1.3.3/filesaver.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js

https://packet-clearing-house.github.io/maptable/maptable.min.js