Map With Texture

This is a example applying texture to a map. Textures are drawn by the SVG.
テクスチャーを地図へ適用するサンプルです。テクスチャはSVGで描かれています。

forked from n1n9-jp's block: Map With Texture

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>map with texture</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
<style>
#map {
  width:960px;
  height:600px;
  margin: 0 auto;
}
</style>
</head>
<body>
<div id="map"></div>
<script>

/* --------------------
      Variables
    -------------------- */

var width  = 960,
        height = 600;

var projection = d3.geo.mercator()
                    .scale(1700)
                    .center([140.102364, 39.718614]);

var path = d3.geo.path()
               .projection(projection);

var svg = d3.select("#map").append("svg")
              .attr("width", width)
              .attr("height", height);

/* --------------------
      Texture
    -------------------- */

// Horizontal Lines
    svg
      .append('defs')
      .append('pattern')
        .attr('id', 'texture0')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', 6)
        .attr('height', 6)
      .append('path')
        .attr('d', 'M 0 0 L 0 10')
        .attr('stroke', '#3071B9')
        .attr('stroke-width', 2);

// Dots
    svg
      .append('defs')
      .append('pattern')
        .attr('id', 'texture1')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', 5)
        .attr('height', 5)
      .append('circle')
        .attr('cx', 4)
        .attr('cy', 4)
        .attr('r', 1)
        .attr('fill', '#EA5532');

// Vertical Lines
    svg
      .append('defs')
      .append('pattern')
        .attr('id', 'texture2')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', 6)
        .attr('height', 6)
      .append('path')
        .attr('d', 'M 0 0 L 10 0')
        .attr('stroke', '#8FC31F')
        .attr('stroke-width', 2);

// Cross Lines
    svg
      .append('defs')
      .append('pattern')
        .attr('id', 'texture3')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', 8)
        .attr('height', 8)
      .append('path')
        .attr('d', 'M0 0L8 8ZM8 0L0 8Z')
        .attr('stroke', '#C48AB2')
        .attr('stroke-width', 1);

/* --------------------
      Load external data
    -------------------- */

queue()
        .defer(d3.json, "japan.topojson")
        .await(loadReady);

/* --------------------
      Drawings
    -------------------- */

function loadReady(_error, _topojson) {

if (_error){ console.log(_error); }

var geometries = topojson.feature(_topojson, _topojson.objects.japan).features;
        var countries =  svg.append("g").selectAll(".prefecture").data(geometries);

countries
            .enter().insert("path")
                .attr("class", "prefecture")
                .attr("d", path)
                .style("stroke", "#333")
                .style("stroke-width", "0.2px")
                .attr('fill', function() {
                  var _ran = Math.floor( Math.random() * 4 );
                  return 'url(#texture' + _ran + ')';
                });
    }
</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js