Skip to content

Instantly share code, notes, and snippets.

@murtra murtra/ESP_adm2.dbf
Last active Dec 19, 2015

Embed
What would you like to do?
module3project: Map of Spain
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Map of Spain</title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
body {
margin: 0;
background-color: lightGray;
font-family: Helvetica, Arial, sans-serif;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 3px 3px 5px 6px #ccc;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 15px 0 10px 0;
}
a:link {
text-decoration: none;
color: gray;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color: steelBlue;
}
svg {
background-color: white;
}
</style>
</head>
<body>
<div id="container">
<h1>Spanish provinces</h1>
</div>
<script type="text/javascript">
//Width and height
var w = 700;
var h = 500;
//Define map projection
var projection = d3.geo.mercator()
.scale(1300)
.center([0, 36])
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("ESP_adm2.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.