Old school D3 from simpler times

All examples By author By category About

melalj

Full window Github gist

MapTable: Basic Map - custom markers

<!DOCTYPE html>
<html lang="en">
<head>
  <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: Basic Map - custom markers</title>
  <style media="screen">
    body {
      background-color: #86B2DF;
    }
    .starsMarker {
      opacity: 0.9;
    }
  </style>
</head>
<body>

<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://packet-clearing-house.github.io/maptable/maptable.min.js"></script>

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

<script>
    var viz = d3.maptable('#vizContainer')
    .csv('basic.csv')
    .map({
      path: 'ne_110m_admin_0_countries.json',
      countries: {
        attr: {
          fill: '#999'
        }
      },
      markers: {
        className: 'starsMarker',
        customTag: function(markerObject){
          return markerObject.append("svg:image")
            .attr("xlink:href", "star.svg")
            .attr("width", "13")
            .attr("height", "27");
        },
        attrX: 'x',
        attrY: 'y',
        attrXDelta: -6,
        attrYDelta: -13
      }
    })
    .render();
</script>
</body>
</html>

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://packet-clearing-house.github.io/maptable/maptable.min.js