Full source, including python scripts, here.
An original extension of the fractal treemap technique shown in the previous example, this map shows the depth of each leaf (hexagon) using a color encoding. The result resembles an orographic, physical map (with tree depth in place of terrain elevation), while the fractal treemap resembles a political map.
The regions, forming a sort of contour map, are computed offline by running gosper_depth_contour_lines.py, a slightly modified version of the gosper_regions.py script that creates the treemap.
run gosper_regions.py
gosperify('tree_48207.csv', 'hexes.wkt.csv', 'depth_regions.json') # input tree, input tiling, output file
topojson --cartesian --no-quantization -p depth -o depth_regions.topo.json depth_regions.jsonThe random tree is the same of the previous example, containing 48,207 leaves (the script took about 10 hours to finish!).
The colors of the quantize scale are taken from Gretchen N. Peterson’s Cartographer’s Toolkit (page 38). The halo that makes the numbers in the legend readable is created by defining four text-shadows in CSS, a technique found here.
The obtained map is somehow uninteresting, showing an apparently uniform distribution of mountains and valleys. This has obviously something to do with the fact that the tree is randomly generated. A more interesting experiment will be to create such a map from real data.
As a way to obtain more readable regions, a depth-based tree ordering algorithm could be performed prior to feeding the tree into the system. This way, higher-depth regions (mountains) should be placed near to each other.
(function() {
window.main = function() {
/* "globals"
*/
var categories, colorify, container, dx, dy, height, legend, max, min, path_generator, radius, svg, vis, width, _i, _results;
vis = null;
width = 960;
height = 500;
svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
/* ZOOM and PAN
*/
/* create container elements
*/
container = svg.append('g').attr('transform', 'translate(640, 34)');
container.call(d3.behavior.zoom().scaleExtent([1, 49]).on('zoom', (function() {
return vis.attr('transform', "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
})));
vis = container.append('g');
/* create a rectangular overlay to catch events
*/
/* WARNING rect size is huge but not infinite. this is a dirty hack
*/
vis.append('rect').attr('class', 'overlay').attr('x', -500000).attr('y', -500000).attr('width', 1000000).attr('height', 1000000);
/* END ZOOM and PAN
*/
/* custom projection to make hexagons appear regular (y axis is also flipped)
*/
radius = 1;
dx = radius * 2 * Math.sin(Math.PI / 3);
dy = radius * 1.5;
path_generator = d3.geo.path().projection(d3.geo.transform({
point: function(x, y) {
return this.stream.point(x * dx / 2, -(y - (2 - (y & 1)) / 3) * dy / 2);
}
}));
/* depth scale
*/
/* color ramp from Gretchen N. Peterson's 'Cartographer's Toolkit' (pages 38-40)
*/
colorify = d3.scale.quantize().domain([1, 8]).range(['#59A80F', '#9ED54C', '#C4ED68', '#E2FF9E', '#F0F2DD', '#F8CA8C', '#E9A189', '#D47384']);
/* legend
*/
legend = svg.append('g').attr('id', 'legend').attr('transform', 'translate(30,20)');
min = colorify.domain()[0];
max = colorify.domain()[1];
categories = legend.selectAll('.category').data((function() {
_results = [];
for (var _i = min; min <= max ? _i <= max : _i >= max; min <= max ? _i++ : _i--){ _results.push(_i); }
return _results;
}).apply(this)).enter().append('g').attr('class', 'category').attr('transform', function(d, i) {
return "translate(0," + (i * 22) + ")";
});
categories.append('rect').attr('x', 0).attr('y', 0).attr('width', 22).attr('height', 22).attr('fill', function(d) {
return colorify(d);
});
categories.append('text').attr('y', 11).attr('dx', -4).attr('dy', '0.35em').text(function(d) {
return d;
});
/* load topoJSON data
*/
return d3.json('depth_regions.topo.json', function(error, data) {
/* compute the maximum depth to set the color scale domain
*/
/* define the level zero region (the land)
*/
var defs;
defs = svg.append('defs');
defs.append('path').datum(topojson.feature(data, data.objects.depth_regions).features.filter(function(d) {
return d.properties.depth === 1;
})[0]).attr('id', 'land').attr('d', path_generator);
/* faux land glow (using filters takes too much resources)
*/
vis.append('use').attr('class', 'land-glow-outer').attr('xlink:href', '#land');
vis.append('use').attr('class', 'land-glow-inner').attr('xlink:href', '#land');
/* draw the contour lines
*/
vis.selectAll('.contour').data(topojson.feature(data, data.objects.depth_regions).features).enter().append('path').attr('class', 'contour').attr('d', path_generator).attr('fill', function(d) {
return colorify(d.properties.depth);
});
/* draw the land border
*/
return vis.append('use').attr('class', 'land-fill').attr('xlink:href', '#land');
});
};
}).call(this);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fractal tree depth map</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>from __future__ import print_function
from itertools import izip
import csv
from shapely.geometry.polygon import Polygon
import shapely.wkt
from fiona import collection
from shapely.geometry import mapping
import re
import os
def gosperify(tree_path, hexes_path, output_filename):
leaves_done = 0
contour_regions = {}
with open(tree_path, 'rb') as tree_file:
tree_reader = csv.reader(tree_file, delimiter=';', quotechar='#')
with open(hexes_path, 'rb') as hexes_file:
hexes_reader = csv.reader(hexes_file, delimiter=';', quotechar='#')
for tree_row, hexes_row in izip(tree_reader, hexes_reader):
prefix = tuple(int(v) for v in re.findall('[0-9]+', tree_row[0]))
hex = shapely.wkt.loads(hexes_row[0])
depth = len(prefix)+1
# add the hex to all the regions with d <= depth
for d in xrange(1,depth+1):
if d not in contour_regions:
contour_regions[d] = hex
else:
contour_regions[d] = contour_regions[d].union(hex)
# logging
leaves_done += 1
print('%d leaves done' % leaves_done, end='\r')
schema = {'geometry': 'Polygon', 'properties': {'depth': 'int'}}
with collection(output_filename, 'w', 'GeoJSON', schema) as output:
for depth, region in contour_regions.items():
output.write({
'properties': {
'depth': depth
},
'geometry': mapping(region)
})
window.main = () ->
### "globals" ###
vis = null
width = 960
height = 500
svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
### ZOOM and PAN ###
### create container elements ###
container = svg.append('g')
.attr('transform','translate(640, 34)')
container.call(d3.behavior.zoom().scaleExtent([1, 49]).on('zoom', (() -> vis.attr('transform', "translate(#{d3.event.translate})scale(#{d3.event.scale})"))))
vis = container.append('g')
### create a rectangular overlay to catch events ###
### WARNING rect size is huge but not infinite. this is a dirty hack ###
vis.append('rect')
.attr('class', 'overlay')
.attr('x', -500000)
.attr('y', -500000)
.attr('width', 1000000)
.attr('height', 1000000)
### END ZOOM and PAN ###
### custom projection to make hexagons appear regular (y axis is also flipped) ###
radius = 1
dx = radius * 2 * Math.sin(Math.PI / 3)
dy = radius * 1.5
path_generator = d3.geo.path()
.projection d3.geo.transform({
point: (x,y) ->
this.stream.point(x * dx / 2, -(y - (2 - (y & 1)) / 3) * dy / 2)
})
### depth scale ###
### color ramp from Gretchen N. Peterson's 'Cartographer's Toolkit' (pages 38-40) ###
colorify = d3.scale.quantize()
.domain([1,8]) # WARNING domain clipped to actual data domain by hardcoding
# .range(['#396353','#0DB14B','#6DC067','#ABD69B','#DAEAC1','#DFCCE4','#C7B2D6','#9474B4'])#,'#754098','#504971'])
.range(['#59A80F','#9ED54C','#C4ED68','#E2FF9E','#F0F2DD','#F8CA8C','#E9A189','#D47384'])#,'#AC437B','#8C286E'])
# .range(['#FFFCF6','#FFF7DB','#FFF4C2','#FEECAE','#F8CA8C','#F0A848','#C07860','#A86060','#784860','#604860'])
### legend ###
legend = svg.append('g')
.attr('id','legend')
.attr('transform', 'translate(30,20)')
min = colorify.domain()[0]
max = colorify.domain()[1]
categories = legend.selectAll('.category')
.data([min..max])
.enter().append('g')
.attr('class', 'category')
.attr('transform', (d,i) -> "translate(0,#{i*22})")
categories.append('rect')
.attr('x', 0).attr('y', 0)
.attr('width', 22).attr('height', 22)
.attr('fill', (d) -> colorify(d))
categories.append('text')
.attr('y', 11)
.attr('dx', -4)
.attr('dy', '0.35em')
.text((d) -> d)
### load topoJSON data ###
d3.json 'depth_regions.topo.json', (error, data) ->
### compute the maximum depth to set the color scale domain ###
# max_depth = d3.max(topojson.feature(data, data.objects.depth_regions).features, (d) -> d.properties.depth)
# colorify
# .domain([1, max_depth])
### define the level zero region (the land) ###
defs = svg.append('defs')
defs.append('path')
.datum(topojson.feature(data, data.objects.depth_regions).features.filter((d) -> d.properties.depth is 1)[0])
.attr('id', 'land')
.attr('d', path_generator)
### faux land glow (using filters takes too much resources) ###
vis.append('use')
.attr('class', 'land-glow-outer')
.attr('xlink:href', '#land')
vis.append('use')
.attr('class', 'land-glow-inner')
.attr('xlink:href', '#land')
### draw the contour lines ###
vis.selectAll('.contour')
.data(topojson.feature(data, data.objects.depth_regions).features)
.enter().append('path')
.attr('class', 'contour')
.attr('d', path_generator)
.attr('fill', (d) -> colorify(d.properties.depth))
### draw the land border ###
vis.append('use')
.attr('class', 'land-fill')
.attr('xlink:href', '#land')
#land {
fill: none;
}
.land-glow-outer {
stroke: #eeeeee;
stroke-width: 12px;
}
.land-glow-inner {
stroke: #dddddd;
stroke-width: 6px;
}
.land-fill {
stroke: #777777;
stroke-width: 0.7px;
}
.contour {
stroke: none;
}
.category text {
text-anchor: end;
fill: #777777;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
text-shadow: -1px 0 1px white, 0 1px white, 1px 0 white, 0 -1px white;
}
.overlay {
fill: transparent;
}
#land
fill: none
.land-glow-outer
stroke: #EEE
stroke-width: 12px
.land-glow-inner
stroke: #DDD
stroke-width: 6px
.land-fill
stroke: #777
stroke-width: 0.7px
.contour
stroke: none
.category text
text-anchor: end
fill: #777
font-family: sans-serif
font-weight: bold
font-size: 14px
text-shadow: -1px 0 1px white, 0 1px white, 1px 0 white, 0 -1px white
// zoom and pan
.overlay
fill: transparent