D3 Examples - Showing off Textures.js

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto with awesome textures</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }
​
  #map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .country {
    stroke: #A39480;
    stroke-width: 1px;
  }
  
  .smallmap {
    width: 33%;
    float: left;
    border: 1px lightgray solid;
  }
​
    #legend {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 400px;
    height: 95px;
    background: white;
    z-index: 99;
  }
      #buttondiv {
    position: absolute;
    left: 120px;
    top: 20px;
    background: white;
    z-index: 99;
  }
</style>
<script>
    function makeSomeMaps() {
​
    legendSVG = d3.select("#legend").append("svg").style("width", "100%").style("height", "100%");
​
      texturesArray = [];
​
      for (var x = 0; x<5;x++) {
        var t = textures.lines().size(4).strokeWidth(1);
        switch(x) {
          case 0:
          t = textures.circles()
            .heavier();
          break;
          case 1:
          t = textures.lines().orientation("vertical")
            .strokeWidth(1)
            .shapeRendering("crispEdges");
          break;
          case 2:
          t = textures.lines().lighter();
          break;
          case 3:
          t = textures.lines().heavier();
          break;
          case 4:
          t = textures.lines()
          .orientation("3/8", "7/8");
          break;
        }
        t.background("#FAEBD7");
        legendSVG.call(t);
        texturesArray.push(t.url());
​
      }
​
    colorScale = d3.scale.linear().domain([250,500,2000,10000,16000])
    .range(texturesArray)
    
    legend = d3.svg.legend().unitLabel("billion")
    .unitTranslate([10,0])
    .formatter(d3.format(".0f"))
    .title("GDP")
    .scale(colorScale);
    
    legendSVG.append("g").attr("transform", "translate(20,35)").attr("class", "legend").call(legend);
​
    map = d3.carto.map();
    d3.select("#map").call(map);
​
      map.mode("globe");
      projection = d3.geo.conicEquidistant()
      .scale(350)
      .translate([550,600]);
      map.projection(projection);
      map.refresh();
​
​
    countryLayer = d3.carto.layer.topojson();
    
    countryLayer.path("world.topojson")
    .label("Countries")
    .renderMode("svg")
    .cssClass("country")
    .on("load", applyTextures);
​
    map.addCartoLayer(countryLayer);
    
    function applyTextures() {
      d3.selectAll("path.country").style("fill", function(d) {return colorScale(parseFloat(d.properties.gdp))});
    }
​
    d3.select("#buttondiv").append("button").html("globe").on("click", function() {map.mode("globe")});
    d3.select("#buttondiv").append("button").html("mercator").on("click", function() {map.mode("transform")});
    d3.select("#buttondiv").append("button").html("equidistant").on("click", function() {map.mode("projection")});
  }
</script>
<body onload="makeSomeMaps()">
<div id="map"></div>
<div id="legend"></div>
<div id="buttondiv"></div>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="textures.min.js" type="text/javascript">
</script>
<script src="legend.js" type="text/javascript">
</script>
</footer>
</body>
</html>
    