Skip to content

Instantly share code, notes, and snippets.

@nitaku
Last active December 25, 2015 13:19
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nitaku/6982528 to your computer and use it in GitHub Desktop.
TopoJSON geometrical renderer

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.json

The 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.

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
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TopoJSON renderer</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="index.js"></script>
</head>
<body onload="main()"></body>
</html>
(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);
.region
stroke: black
opacity: 0.7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment