Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
128 lines (98 sloc) 2.54 KB
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<style>
svg {
background-color: #eee;
}
path {
stroke: #444;
stroke-width:2px;
}
.region-foo { fill: #7ad; }
.region-bar { fill: #d77; }
.region-baz { fill: #da7; }
</style>
</head><body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
//usually, the topology is fetched from the
//server via a json request:
// d3.json("topology.json", function(error, topology) { ... }
var topology = {
type: 'Topology',
objects: {
regions: {
type: 'GeometryCollection',
geometries: [
{id: 'foo',
type: 'Polygon',
arcs: [ [0, -2, -5] ]
},
{id: 'bar',
type: 'Polygon',
arcs: [ [3, 1, -3 ] ]
},
{id: 'baz',
type: 'Polygon',
arcs: [ [ -6, 4, -4 ] ]
}
]
}
},
arcs: [
[ // Red arc # 0 / -1 {
[-1, -3],
[-2, 2],
[ 1, 3]
], // }
[ // light blue arc # 1 / -2 {
[ 0, 1],
[-1, -1],
[-1, 2]
], // }
[ // orange arc # 2 / -3 {
[ 3, 0],
[-1, 1],
[ 1, 2],
[-5,-1]
], // }
[ // green arc # 3 / -4 {
[ 3, 0],
[-3, 1]
], // }
[ // purple arc # 4 / -5 {
[ -1, -3],
[ 1, 4]
], // }
[ // blue arc # 5 / -6 {
[ -1, -3],
[ 4, 3]
] // }
],
transform: {
scale: [ 10/3, 10/3 ],
translate: [0, 45]
}
};
var width = 1000;
var height = 500;
var projection = d3.geo.albers()
.center([0, 45])
.rotate([0,0])
.parallels([ 5,9])
.scale(1000)
.translate([width / 2, height / 2]);
// Create «SVG window»
var svg = d3.select("body").append("svg").attr("width", width ).attr("height", height);
// Create path generator
var path = d3.geo.path().projection(projection).pointRadius(2);
var regions = topojson.feature(topology, topology.objects.regions);
svg.selectAll(".region")
.data(regions.features)
.enter().append("path")
.attr("class", function(d) { return "region-" + d.id; })
.attr("d" , path);
</script>
</body></html>