Minimal D3js + GADM map

Download the GIS source

GADM is the perfect source for administrative GIS files.

GADM.org > Download page : select your country and format "shapefile" > ok.

Or via terminal (replace New Ghana code GHA by your target country's iso code):

# prepare folder
mkdir -p ./map; cd ./map
curl http://d3js.org/d3.v3.min.js -O -J
curl http://d3js.org/topojson.v1.min.js -O -J
# download data
curl \
	-L -C - 'http://biogeo.ucdavis.edu/data/gadm2/shp/GHA_adm.zip' \
	-o ./GHA_adm.zip
unzip -n ./GHA_adm.zip -d ./

shp to topojson

Use topojson command line, it's more direct. If you want to keep all properties :

 topojson -q 1e4 \
          -o out.json \
          -- in1.shp in2.shp

You can also select attributes from the shapfiles, and rename them on the go :

 topojson \
	--bbox \
	--id-property none \
	-p name=NAME_1 \
	-p code=ID_1 \
	-p L0=NAME_0 \
	-q 1e4 \
	--filter=small \
	-o GHA_adm_w.topo.json \
	-- admin_1=GHA_adm1.shp admin_2=GHA_adm2.shp

For GHA, there is no attribute in the .shp suitable for a good ID. NAME_1 have spaces which will give invalid id within your HTML.

alt text

Inspect json

Use http://jsoneditoronline.org . Inspecting your json will give you clues of what data is available, and where (dot notation path). The topojson distillery help to preview any topojson and if the code is correct.

D3js call

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.L1 {
	fill: #E0E0E0;
	stroke: #FFF;
	stroke-width:1px;
}
</style>
<body>
<script src="./d3.v3.min.js"></script>
<script src="./topojson.v1.min.js"></script>
<script>
var mapIt = function(width, url){
    console.log("mapIt(): start");
	var height = width/960*500;
    var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);
	var projection = d3.geo.mercator()
		  .scale(1)
		  .translate([0, 0]);
	
    var path = d3.geo.path()
        .projection(projection);

    d3.json(url, function (error, json) {
        var admin_1 = topojson.feature(json, json.objects.admin_1);

        /* Autofocus code comes here ! */
		
        svg.selectAll("path")
            .data(admin_1.features)
          .enter().append("path")
            .attr('d', path)
            .attr('class', 'L1');
    });    
};
mapIt(960,"http://somesite.org/data/NZL_adm.topo.json");
</script>
</body>
</html>

Focus

A correct autofocus will need a small bit of code from Mike Bostocks, example here:

// Compute the bounds of a feature of interest, then derive scale & translate.
var b = path.bounds(admin_1),
    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];

// Update the projection to use computed scale & translate.
projection
    .scale(s)
    .translate(t);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<style>
* { transition: .4s;}
svg { border: 1px solid #000;}
.L0 { 
    fill: none;
	stroke: #888;
	stroke-width: 2px;}
.L1 { 
    fill: #CCC;
	stroke: #FFF;
	stroke-width: 2px;}
.L2 {
	fill:none;
    stroke: #FFF;
    stroke-width:1px;
}
.L1:hover { fill: #B10000; }
	
</style>
<body>
<script src="./d3.v3.min.js"></script>
<script src="./topojson.v1.min.js"></script>
<script>
var mapIt = function(width, url){
    console.log("mapIt(): start");
	var height = width/960*500;
    var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);
	var projection = d3.geo.mercator()
		  .scale(1)
		  .translate([0, 0]);
	
    var path = d3.geo.path()
        .projection(projection);

d3.json(url, function (error, json) {
		var admin_1 = topojson.feature(json, json.objects.admin_1);
		var admin_2 = topojson.feature(json, json.objects.admin_2);
		var borders = topojson.mesh(json, json.objects.admin_2, function(a, b) { return a !== b; })
		var borders0 = topojson.mesh(json, json.objects.admin_1, function(a, b) { return a == b; })

// Compute the bounds of a feature of interest, then derive scale & translate.
		var b = path.bounds(admin_1),
			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];
		// Update the projection to use computed scale & translate.

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

svg.selectAll("path")
			.data(admin_1.features)
		.enter().append("path")
			.attr('class', 'L1')
			.attr('d', path);
		
		svg.append("g").append("path")
			.datum(borders)
			.attr('class', 'L2')
			.attr('d', path);
		svg.append("g").append("path")
			.datum(borders0)
			.attr('class', 'L0')
			.attr('d', path);		
		});    
};
mapIt(1000,"./GHA_adm.topo.json");
</script>
</body>
</html>