Skip to content

Instantly share code, notes, and snippets.

@d3indepth
Last active February 11, 2020 02:23
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save d3indepth/c6df643a689ce9278b3341f87b6fcf04 to your computer and use it in GitHub Desktop.
Basic geo example
license: gpl-3.0
height: 420
border: no
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Basic geo (svg)</title>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
#content .map path {
fill: #ddd;
stroke: #aaa;
}
</style>
<body>
<div id="content">
<svg width="800px" height="400px">
<g class="map"></g>
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Africa"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[-6, 36], [33, 30], [43, 11], [51, 12], [29, -33], [18, -35], [7, 5], [-17, 14], [-6, 36]]]
}
},
{
"type": "Feature",
"properties": {
"name": "Australia"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[143, -11], [153, -28], [144, -38], [131, -31], [116, -35], [114, -22], [136, -12], [140, -17], [143, -11]]]
}
},
{
"type": "Feature",
"properties": {
"name": "Timbuktu"
},
"geometry": {
"type": "Point",
"coordinates": [-3.0026, 16.7666]
}
}
]
};
var projection = d3.geoEquirectangular()
.scale(200)
.translate([200, 150]);
var geoGenerator = d3.geoPath()
.projection(projection);
function update(geojson) {
var u = d3.select('#content g.map')
.selectAll('path')
.data(geojson.features);
u.enter()
.append('path')
.attr('d', geoGenerator);
}
update(geojson);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment