D3 Examples - Continent Map with Textures

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  background: #fcfcfa;
}
​
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
​
.fill {
  fill: #fff;
}
​
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}
​
.land {
  fill: #222;
}
​
.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<!-- https://riccardoscalco.github.io/textures/ -->
<script src="textures.js"></script>
<script>
​
var width = 960,
    height = 580;
​
    var orange = '#ff8c00',
        navy = '#0d3268';
​
    // defined textures
    var t1 = textures.lines()
        .orientation("6/8")
        .stroke(orange)
        .background(navy);
​
    var t2 = textures.lines()
        .heavier()
        .stroke(navy)
        .background(orange);
​
    var t3 = textures.lines()
        .orientation("vertical", "horizontal")
        .size(4)
        .strokeWidth(1)
        .shapeRendering("crispEdges")
        .stroke(orange)
        .background("#fff");
​
    var t4 = textures.lines()
        .size(4)
        .stroke(navy)
        .strokeWidth(1)
        .background("#fff");
​
    var t5 = textures.circles()
        .size(10)
        .radius(1.5)
        .fill(orange)
        .background(navy);
​
    var t6 = textures.circles()
        .fill(navy)
        .background(orange);
​
    var t7 = textures.paths()
        .d("waves")
        .thicker()
        .stroke(orange)
        .background(navy);
​
    // add all textures to an array
    var tlist = [t1, t2, t3, t4, t5, t6, t7];
  
    //sort on each page load
    tlist = d3.shuffle(tlist);
  
    //make hashtable with continent names
    var hash = {"Antarctica":t1,"Africa":t2,"Europe":t3,"Oceania":t4,"North America":t5,"South America":t6,"Asia":t7};
    
  
var projection = d3.geoKavrayskiy7()
    .scale(170)
    .translate([width / 2, height / 2])
    .precision(.1);
​
var path = d3.geoPath().projection(projection);
  
var graticule = d3.geoGraticule();
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
/*
tlist.forEach(function(t) {
    svg.call(t);
});
*/
for (var k in hash) {
   //console.log(k);
   svg.call(hash[k]);
}  
  
svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);
​
svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");
​
svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
​
svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
​
var data = "https://piwodlaiwo.github.io/topojson//world-continents.json";
  
    d3.json(data, function(error, topology) {
      var continents = topojson.feature(topology, topology.objects.continent).features;
​
      //console.log(continents.length); 11 areas
      
      svg.selectAll(".continent")
      .data(continents)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("title", function(d,i) { 
        //console.log(d.properties.continent);
        return d.properties.continent;
      })
        .style("fill", function(d, i) {
          //console.log(i);
          //return tlist[d.properties.continent].url(); 
          //console.log(d.properties.continent);
          return hash[d.properties.continent].url();
        });
      
     
    })
​
d3.select(self.frameElement).style("height", height + "px");
​
</script>
    