Continent Map with Textures

Forked from piwodlaiwo's block: World Map in D3v4 with Auto Colors

Forked from piwodlaiwo's block: World Map in D3v4 with Textures.js

Forked from piwodlaiwo's block: Hexagon World Map with D3.js

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

<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();

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>

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

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

https://d3js.org/d3-geo-projection.v1.min.js