D3 Examples - MapTable: Heatmap visualization (SVG + Canvas) exportable

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