An example of TopoJSON rendering for geometrical (non-geographical) features with integer coordinates.
The data files have been produced with OpenJUMP and saved in ESRI’s Shapefile format, then converted with ogr2ogr into GeoJSON, then converted for a last time in TopoJSON with topojson, using some parameters that deal with integer coordinates:
ogr2ogr -f geoJSON data.json data.shp
topojson --cartesian --no-quantization -p a -p b -o data.topo.json data.jsonThe file is then loaded into D3.js, rendered with a custom projection that only performs a scale and a translation, and styled according to two example properties: a (categorical) and b (quantitative).
See Mike Bostock’s tutorial on TopoJSON for a general introduction.
(function() {
window.main = function() {
var colorify, height, path_generator, svg, thicken, width;
width = 960;
height = 500;
svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
/* translate and scale projection with flipped y axis
*/
path_generator = d3.geo.path().projection(d3.geo.transform({
point: function(x, y) {
return this.stream.point(10 + 10 * x, 10 - 10 * y);
}
}));
/* define a color scale for property a
*/
colorify = d3.scale.category10().domain(['x', 'y', 'z']);
/* define a width scale for property b
*/
thicken = d3.scale.linear().domain([1, 10]).range([1, 10]);
/* load topoJSON data
*/
return d3.json('data.topo.json', function(error, data) {
/* draw the result
*/ return svg.selectAll('.region').data(topojson.feature(data, data.objects.data).features).enter().append('path').attr('class', 'region').attr('d', path_generator).attr('fill', function(d) {
return colorify(d.properties.a);
}).attr('stroke-width', function(d) {
return thicken(d.properties.b);
}).attr('transform', 'translate(280,120)');
});
};
}).call(this);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TopoJSON renderer</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="index.js"></script>
</head>
<body onload="main()"></body>
</html>q
���a�
���������������������a����������C�������������������b����������N���� ���������������
x 2 y 2 x 1 y 7 z 5 x 2 y 6 y 3 z 3 x 1{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "a": "x", "b": 2.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 20.000000, -10.000000 ], [ 20.000000, -6.000000 ], [ 18.000000, -6.000000 ], [ 18.000000, -2.000000 ], [ 22.000000, -2.000000 ], [ 22.000000, -4.000000 ], [ 23.000000, -4.000000 ], [ 23.000000, -6.000000 ], [ 24.000000, -6.000000 ], [ 24.000000, -10.000000 ], [ 20.000000, -10.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "y", "b": 2.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 17.000000, -18.000000 ], [ 17.000000, -14.000000 ], [ 24.000000, -14.000000 ], [ 24.000000, -18.000000 ], [ 17.000000, -18.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "x", "b": 1.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 6.000000, -14.000000 ], [ 6.000000, -12.000000 ], [ 0.000000, -12.000000 ], [ 0.000000, -5.000000 ], [ 10.000000, -5.000000 ], [ 10.000000, -12.000000 ], [ 14.000000, -12.000000 ], [ 14.000000, -14.000000 ], [ 6.000000, -14.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "y", "b": 7.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 10.000000, -12.000000 ], [ 10.000000, -5.000000 ], [ 14.000000, -5.000000 ], [ 14.000000, -12.000000 ], [ 10.000000, -12.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "z", "b": 5.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 9.000000, -21.000000 ], [ 9.000000, -19.000000 ], [ 11.000000, -21.000000 ], [ 9.000000, -21.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "x", "b": 2.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 27.000000, -16.000000 ], [ 27.000000, -5.000000 ], [ 31.000000, -5.000000 ], [ 31.000000, -8.000000 ], [ 29.000000, -8.000000 ], [ 29.000000, -12.000000 ], [ 31.000000, -12.000000 ], [ 31.000000, -16.000000 ], [ 27.000000, -16.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "y", "b": 6.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 35.000000, -6.000000 ], [ 35.000000, -10.000000 ], [ 33.000000, -10.000000 ], [ 33.000000, -6.000000 ], [ 35.000000, -6.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "y", "b": 3.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 0.000000, -5.000000 ], [ 0.000000, 0.000000 ], [ 14.000000, 0.000000 ], [ 14.000000, -5.000000 ], [ 0.000000, -5.000000 ] ], [ [ 10.000000, -1.000000 ], [ 11.000000, -2.000000 ], [ 12.000000, -3.000000 ], [ 12.000000, -1.000000 ], [ 10.000000, -1.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "z", "b": 3.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 0.000000, -14.000000 ], [ 0.000000, -12.000000 ], [ 6.000000, -12.000000 ], [ 6.000000, -14.000000 ], [ 0.000000, -14.000000 ] ] ] } }
,
{ "type": "Feature", "properties": { "a": "x", "b": 1.000000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 13.000000, -18.000000 ], [ 13.000000, -16.000000 ], [ 20.000000, -16.000000 ], [ 20.000000, -20.000000 ], [ 15.000000, -20.000000 ], [ 13.000000, -18.000000 ] ] ] } }
]
}
'
t� 5� �A@ p 2@ $� 8@ � 4@ $� 4@ � 2@ � 2@ � 6@ � 6@ � 7@ � 7@ � 8@ � 8@ $� 4@ $� @ 1@ 2� 8@ ,� 1@ 2� 1@ ,� 8@ ,� 8@ 2� 1@ 2� ` ,� ,@ � @ ,� @ (� (� � $@ � $@ (� ,@ (� ,@ ,� @ ,� @ $@ (� ,@ � $@ (� $@ � ,@ � ,@ (� $@ (� 8 "@ 5� &@ 3� "@ 5� "@ 3� &@ 5� "@ 5� ` ;@ 0� ?@ � ;@ 0� ;@ � ?@ � ?@ � =@ � =@ (� ?@ (� ?@ 0� ;@ 0� @ �@@ $� �A@ � �A@ � �A@ $� �@@ $� �@@ � �A@ � j � ,@
� ,@ ,@ � � $@ � &@ � (@ � (@ � $@ � @ ,� @ (� ,� (� @ (� @ ,� ,�
H *@ 4� 4@ 0� *@ 2� *@ 0� 4@ 0� 4@ 4� .@ 4� *@ 2� '
Z� 5� �A@ 2 p � @ � ` N @ � 8 � ` 2 @ v j � @ ( H{"type":"Topology","transform":{"scale":[1,1],"translate":[0,0]},"objects":{"data":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0]],"properties":{"a":"x","b":2}},{"type":"Polygon","arcs":[[1]],"properties":{"a":"y","b":2}},{"type":"Polygon","arcs":[[2,3,4,5,6]],"properties":{"a":"x","b":1}},{"type":"Polygon","arcs":[[7,-4,8]],"properties":{"a":"y","b":7}},{"type":"Polygon","arcs":[[9]],"properties":{"a":"z","b":5}},{"type":"Polygon","arcs":[[10]],"properties":{"a":"x","b":2}},{"type":"Polygon","arcs":[[11]],"properties":{"a":"y","b":6}},{"type":"Polygon","arcs":[[12,13],[14]],"properties":{"a":"y","b":3}},{"type":"Polygon","arcs":[[-6,15]],"properties":{"a":"z","b":3}},{"type":"Polygon","arcs":[[16]],"properties":{"a":"x","b":1}}]}},"arcs":[[[20,-10],[0,4],[-2,0],[0,4],[4,0],[0,-2],[1,0],[0,-2],[1,0],[0,-4],[-4,0]],[[17,-18],[0,4],[7,0],[0,-4],[-7,0]],[[0,-5],[10,0]],[[10,-5],[0,-7],[4,0]],[[14,-12],[0,-2],[-8,0]],[[6,-14],[0,2],[-6,0]],[[0,-12],[0,7]],[[14,-5],[0,-7]],[[10,-5],[4,0]],[[9,-21],[0,2],[2,-2],[-2,0]],[[27,-16],[0,11],[4,0],[0,-3],[-2,0],[0,-4],[2,0],[0,-4],[-4,0]],[[35,-6],[0,-4],[-2,0],[0,4],[2,0]],[[0,-5],[0,5],[14,0],[0,-5]],[[14,-5],[-14,0]],[[10,-1],[1,-1],[1,-1],[0,2],[-2,0]],[[6,-14],[-6,0],[0,2]],[[13,-18],[0,2],[7,0],[0,-4],[-5,0],[-2,2]]]}window.main = () ->
width = 960
height = 500
svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
### translate and scale projection with flipped y axis ###
path_generator = d3.geo.path()
.projection d3.geo.transform({point: (x,y) -> this.stream.point(10+10*x,10-10*y) })
### define a color scale for property a ###
colorify = d3.scale.category10()
.domain(['x','y','z'])
### define a width scale for property b ###
thicken = d3.scale.linear()
.domain([1,10])
.range([1,10])
### load topoJSON data ###
d3.json 'data.topo.json', (error, data) ->
### draw the result ###
svg.selectAll('.region')
.data(topojson.feature(data, data.objects.data).features)
.enter().append('path')
.attr('class', 'region')
.attr('d', path_generator)
.attr('fill', (d) -> colorify(d.properties.a))
.attr('stroke-width', (d) -> thicken(d.properties.b))
.attr('transform', 'translate(280,120)')
.region {
stroke: black;
opacity: 0.7;
}
.region
stroke: black
opacity: 0.7