robsalasco/chile.json

## chile.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              chile.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="$1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Map of Chile</title>
  <style>
    .boundary {
      fill: none;
      stroke: #000;
      stroke-linejoin: round;
    }

    #map {
      border:0px solid #000;
      width:900px;
      height:4000px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .subunit.M {
      fill: #FF9933;
      stroke: #000;
      stroke-width:1px;
    }
    .subunit {
      fill: #000 ;
      stroke: #000;
      stroke-width:0.5px;
    }

  </style>

</head>
<body>
  <div id="map"></div>

  <script src="https://cdn.jsdelivr.net/npm/textures@1.2.0/dist/textures.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>

  <script>
    var width = 900,
    height = 4000;

    var t1 = textures.lines()
    .size(6)
    .background("white")
    .stroke("black")
    .strokeWidth(2);

    var t2 = textures.lines()
    .orientation("vertical")
    .size(6)
    .strokeWidth(3)
    .shapeRendering("crispEdges")
    .background("white")
    .stroke("black");

    var t3 = textures.lines()
    .orientation("diagonal")
    .size(20)
    .strokeWidth(7)
    .stroke("white")
    .background("black");

    var t4 = textures.circles()
    .heavier()
    .fill("white")
    .background("black");

    var t5 = textures.circles();

    var t6 = textures.lines()
    .lighter();

    var projection = d3.geo.mercator();

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

    var svg = d3.select("#map")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr('transform','translate(-58.27371475384126,-69.69770758839695) scale(1.019597682998191)');

    svg.call(t1);
    svg.call(t2);
    svg.call(t3);
    svg.call(t4);
    svg.call(t5);
    svg.call(t6);

    var getPattern;

    getPattern = function(province) {
      switch (province) {
        case 6:
        return t5.url()
        break;
        case 2:
        case 8:
        case 12:
        case 20:
        case 16:
        return t6.url()
        break;
        case 10:
        case 3:
        case 89:
        case 72:
        case 34:
        return t4.url()
        break;
        case 13:
        case 16:
        case 35:
        case 69:
        return t3.url()
        break;
        case 120:
        case 234:
        case 342:
        return t3.url()
        break;
        default:
        return t1.url()
      }
    };

    d3.json("chile.json", function(error, chl) {
      var comunas = topojson.feature(chl, chl.objects.collection)
      projection.scale(1).translate([0, 0]);

      var b = path.bounds(comunas),
      s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
      t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

      projection
      .scale(s)
      .translate(t);

      var map = svg.append('g').attr('class', 'boundary');
      chile = map.selectAll('.subunit').data(comunas.features);

      svg.append("path").datum(comunas)
      .style("height","auto")
      .style("overflow-x","visible")
      .style("overflow-y","visible")
      .style("width","auto")
      .style("perspective-origin","0px 0px")
      .style("-webkit-perspective-origin","0px 0px")
      .style("transform-origin","0px 0px")
      .style("-webkit-transform-origin","0px 0px")
      .style("fill","none")
      .style("stroke","rgb(19, 19, 19)")
      .style("stroke-width","2px")
      .attr("d", path);


    // Enter

    chile.enter()
    .append('path')
    .attr("class", function(d) { return "subunit " + d.id; })
    .style("height","auto")
    .style("overflow-x","visible")
    .style("overflow-y","visible")
    .style("width","auto")
    .style("perspective-origin","0px 0px")
    .style("-webkit-perspective-origin","0px 0px")
    .style("transform-origin","0px 0px")
    .style("-webkit-transform-origin","0px 0px")
    .style("fill", function(d) { return getPattern(d.id) })
    .style("stroke","#FFF")
    .style("stroke-width","10px")
    .attr('d', path);


    // Update

    chile.exit().remove();
  });
</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="$1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Map of Chile</title>
	<style>
	.boundary {
	fill: none;
	stroke: #000;
	stroke-linejoin: round;
	}

	#map {
	border:0px solid #000;
	width:900px;
	height:4000px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	.subunit.M {
	fill: #FF9933;
	stroke: #000;
	stroke-width:1px;
	}
	.subunit {
	fill: #000 ;
	stroke: #000;
	stroke-width:0.5px;
	}

	</style>

	</head>
	<body>
	<div id="map"></div>

	<script src="https://cdn.jsdelivr.net/npm/textures@1.2.0/dist/textures.min.js"></script>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>

	<script>
	var width = 900,
	height = 4000;

	var t1 = textures.lines()
	.size(6)
	.background("white")
	.stroke("black")
	.strokeWidth(2);

	var t2 = textures.lines()
	.orientation("vertical")
	.size(6)
	.strokeWidth(3)
	.shapeRendering("crispEdges")
	.background("white")
	.stroke("black");

	var t3 = textures.lines()
	.orientation("diagonal")
	.size(20)
	.strokeWidth(7)
	.stroke("white")
	.background("black");

	var t4 = textures.circles()
	.heavier()
	.fill("white")
	.background("black");

	var t5 = textures.circles();

	var t6 = textures.lines()
	.lighter();

	var projection = d3.geo.mercator();

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

	var svg = d3.select("#map")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr('transform','translate(-58.27371475384126,-69.69770758839695) scale(1.019597682998191)');

	svg.call(t1);
	svg.call(t2);
	svg.call(t3);
	svg.call(t4);
	svg.call(t5);
	svg.call(t6);

	var getPattern;

	getPattern = function(province) {
	switch (province) {
	case 6:
	return t5.url()
	break;
	case 2:
	case 8:
	case 12:
	case 20:
	case 16:
	return t6.url()
	break;
	case 10:
	case 3:
	case 89:
	case 72:
	case 34:
	return t4.url()
	break;
	case 13:
	case 16:
	case 35:
	case 69:
	return t3.url()
	break;
	case 120:
	case 234:
	case 342:
	return t3.url()
	break;
	default:
	return t1.url()
	}
	};

	d3.json("chile.json", function(error, chl) {
	var comunas = topojson.feature(chl, chl.objects.collection)
	projection.scale(1).translate([0, 0]);

	var b = path.bounds(comunas),
	s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
	t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

	projection
	.scale(s)
	.translate(t);

	var map = svg.append('g').attr('class', 'boundary');
	chile = map.selectAll('.subunit').data(comunas.features);

	svg.append("path").datum(comunas)
	.style("height","auto")
	.style("overflow-x","visible")
	.style("overflow-y","visible")
	.style("width","auto")
	.style("perspective-origin","0px 0px")
	.style("-webkit-perspective-origin","0px 0px")
	.style("transform-origin","0px 0px")
	.style("-webkit-transform-origin","0px 0px")
	.style("fill","none")
	.style("stroke","rgb(19, 19, 19)")
	.style("stroke-width","2px")
	.attr("d", path);


	// Enter

	chile.enter()
	.append('path')
	.attr("class", function(d) { return "subunit " + d.id; })
	.style("height","auto")
	.style("overflow-x","visible")
	.style("overflow-y","visible")
	.style("width","auto")
	.style("perspective-origin","0px 0px")
	.style("-webkit-perspective-origin","0px 0px")
	.style("transform-origin","0px 0px")
	.style("-webkit-transform-origin","0px 0px")
	.style("fill", function(d) { return getPattern(d.id) })
	.style("stroke","#FFF")
	.style("stroke-width","10px")
	.attr('d', path);


	// Update

	chile.exit().remove();
	});
	</script>

	</body>
	</html>