Old school D3 from simpler times

All examples By author By category About

LuisSevillano

Full window Github gist

spanish provinces

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div class="map"></div>
  <script src="d3.js"></script>
  <script src="topojson.js"></script>
  <script src="rbush.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.4.0/conicconformalspain-proj.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/newsappsio/spam/spam.min.js"></script>
  <script>
  var width = 960,
  height = width * 0.7,
  mapRatio = 4.5,
  hover = null,
  mouseX, mouseY;

d3.json("map.json", function(error, provinces) {
    topojson.presimplify(provinces)
    var map = new StaticCanvasMap({
      element: ".map",
      zoomScale: 0.8,
      width: width,
      height: height,
      projection: d3.geo.conicConformalSpain()
      .translate([width / 1.2,height / 1.5])
      .scale(width * mapRatio),
      data: [{
        features: topojson.feature(provinces, provinces.objects["provincias"]),
        static: {
          paintfeature: function(parameters, d) {

parameters.context.lineWidth = 0.6 / parameters.scale
            parameters.context.strokeStyle = "rgb(170,170,170)"
            parameters.context.stroke()
            parameters.context.fillStyle = "rgba(255, 247, 188, 0.5)"
            parameters.context.fill()
          },
          postpaint: function(parameters) {
            parameters.context.beginPath()
            parameters.context.lineWidth = 0.2

var p = new Path2D(parameters.map.settings().projection.getCompositionBorders())
            parameters.context.strokeStyle = "#555"
            parameters.context.stroke(p)
          }
        }
      }
    ]

})
  map.init();
})

</script>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div class="map"></div>
  <script src="d3.js"></script>
  <script src="topojson.js"></script>
  <script src="rbush.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.4.0/conicconformalspain-proj.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/newsappsio/spam/spam.min.js"></script>
  <script>
  var width = 960,
  height = width * 0.7,
  mapRatio = 4.5,
  hover = null,
  mouseX, mouseY;
​
  d3.json("map.json", function(error, provinces) {
    topojson.presimplify(provinces)
    var map = new StaticCanvasMap({
      element: ".map",
      zoomScale: 0.8,
      width: width,
      height: height,
      projection: d3.geo.conicConformalSpain()
      .translate([width / 1.2,height / 1.5])
      .scale(width * mapRatio),
      data: [{
        features: topojson.feature(provinces, provinces.objects["provincias"]),
        static: {
          paintfeature: function(parameters, d) {
​
            parameters.context.lineWidth = 0.6 / parameters.scale
            parameters.context.strokeStyle = "rgb(170,170,170)"
            parameters.context.stroke()
            parameters.context.fillStyle = "rgba(255, 247, 188, 0.5)"
            parameters.context.fill()
          },
          postpaint: function(parameters) {
            parameters.context.beginPath()
            parameters.context.lineWidth = 0.2
​
            var p = new Path2D(parameters.map.settings().projection.getCompositionBorders())
            parameters.context.strokeStyle = "#555"
            parameters.context.stroke(p)
          }
        }
      }
    ]
​
  })
  map.init();
})
​
</script>
</body>
</html>
​
    

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.4.0/conicConformalSpain-proj.min.js to https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.4.0/conicconformalspain-proj.min.js

Updated missing url //cdn.rawgit.com/newsappsio/spam/master/spam.min.js to //cdn.jsdelivr.net/gh/newsappsio/spam/spam.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.4.0/conicConformalSpain-proj.min.js

https://cdn.rawgit.com/newsappsio/spam/master/spam.min.js