index.html
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
path {
stroke-width: 1;
stroke: steelblue;
fill: #eee;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="d3.v3.js"></script>
<script src="topojson.js"></script>
<script>
;(function() {
var width = 800,
height = 800;
d3.json("drought.json", function(err, data) {
var drought = window.drought = topojson.feature(data, data.objects.drought);
var map = d3.select('#map').append('svg')
.style('width', width)
.style('height', height);
var path = d3.geo.path().projection(null);
map.selectAll('path')
.data(drought.features)
.enter().append('path')
.attr('d', function(d, i) {
return path(d);
});
});
}());
</script>
</body>
</html>