alansmithy/.block

## .block
license: mit

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    background: #fcfcfa;
    font-family:sans-serif;
}

.fill {
    fill: #fff;
}

.graticule {
    fill: #A7DBD8;
    stroke: #777;
    stroke-width: 1px;
    stroke-opacity:0.5;
}

.land{
    fill: #E0E4CC;
}

.eu{
    stroke: #ACAF9F;
    stroke-width: 1;
    fill:#E0E49F;
}

</style>
<body>
    <div id="mapContainer">
        <h3>The Statistical Geography of Europe</h3>
        <p>The Nomenclature of Territorial Units for Statistics (NUTS) is a standard, hierarchical framework for referencing the subdivisions of European countries for statistical purposes. This map shows the NUTS 2 levels, broadly equivalent to UK counties. As a member of the European Free Trade Association (EFTA), Switzerland is included in the classification.</p>
    </div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 900,
    height = 450;

var projection = d3.geo.conicConformal()
        .center([9,55])
        .translate([width/2,height/2])
        .scale([width/1.3]);

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

var graticule = d3.geo.graticule();

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

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

d3.json("world.json", function(error, data) {
    if (error) throw error;
        svg.append("g").selectAll("path")
				    .data(data.features)
				    .enter()
				    .append("path")
				    .attr("d", path)
                    .attr("class","land");

    d3.json("nuts2.json", function(error, data) {
    if (error) throw error;
        svg.append("g").selectAll("path")
				    .data(data.features)
				    .enter()
				    .append("path")
				    .attr("d", path)
                    .attr("class","eu");

});

});


</script>
</body>
</html>

## nuts2.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              nuts2.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world.json

      
    Raw
  

              world.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: #fcfcfa;
	font-family:sans-serif;
	}

	.fill {
	fill: #fff;
	}

	.graticule {
	fill: #A7DBD8;
	stroke: #777;
	stroke-width: 1px;
	stroke-opacity:0.5;
	}

	.land{
	fill: #E0E4CC;
	}

	.eu{
	stroke: #ACAF9F;
	stroke-width: 1;
	fill:#E0E49F;
	}

	</style>
	<body>
	<div id="mapContainer">
	<h3>The Statistical Geography of Europe</h3>
	<p>The Nomenclature of Territorial Units for Statistics (NUTS) is a standard, hierarchical framework for referencing the subdivisions of European countries for statistical purposes. This map shows the NUTS 2 levels, broadly equivalent to UK counties. As a member of the European Free Trade Association (EFTA), Switzerland is included in the classification.</p>
	</div>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 900,
	height = 450;

	var projection = d3.geo.conicConformal()
	.center([9,55])
	.translate([width/2,height/2])
	.scale([width/1.3]);

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

	var graticule = d3.geo.graticule();

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

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

	d3.json("world.json", function(error, data) {
	if (error) throw error;
	svg.append("g").selectAll("path")
	.data(data.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("class","land");

	d3.json("nuts2.json", function(error, data) {
	if (error) throw error;
	svg.append("g").selectAll("path")
	.data(data.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("class","eu");

	});

	});


	</script>
	</body>
	</html>