This example shows two experiments in representing boundaries in GosperMaps. All paths are simplified then smoothed with a cardinal interpolator, while internal boundaries are given varying thickness and colors to help in identifying hierarchy levels. The colored part slighlty covers boundaries that are inside a region, to convey a sense of nesting.
This example island represents all typed instances in a DBpedia dump. Click here for a more complete map.
// Generated by CoffeeScript 1.10.0
(function() {
var CELL_RADIUS, SIMPLIFICATION, boundary_color, boundary_thickness, draw_boundaries, dx, dy, height, mesh, projection, smooth, straight, svg, vis, width, zoom, zoomable_layer;
svg = d3.select('svg');
width = svg.node().getBoundingClientRect().width;
height = svg.node().getBoundingClientRect().height;
svg.attr({
viewBox: (-width / 2) + " " + (-height / 2) + " " + width + " " + height
});
zoomable_layer = svg.append('g');
zoom = d3.behavior.zoom().scaleExtent([0.5, 40]).on('zoom', function() {
return zoomable_layer.attr({
transform: "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")"
});
});
svg.call(zoom);
vis = zoomable_layer.append('g').attr({
transform: 'translate(160, -170) rotate(-60)'
});
smooth = d3_shape.line().curve(d3_shape.cardinal, 0.5);
straight = d3_shape.line().curve(d3_shape.cardinal, 0.5);
/* custom projection to make hexagons appear regular (y axis is also flipped) */
CELL_RADIUS = 0.12;
dx = CELL_RADIUS * 2 * Math.sin(Math.PI / 3);
dy = CELL_RADIUS * 1.5;
SIMPLIFICATION = 20000;
projection = function(p) {
var x, y;
x = p[0];
y = p[1];
return [x * dx / 2, -(y - (2 - (y & 1)) / 3) * dy / 2];
};
mesh = function(data, cmp) {
var points;
points = [];
topojson.mesh(data, data.objects.leaf_regions, cmp).coordinates.forEach(function(c) {
if (c.length < 1) {
c = c[0];
}
return points.push(c.filter(function(d, i) {
return d[2] >= SIMPLIFICATION;
}).map(function(d) {
return projection(d);
}));
});
return points;
};
boundary_color = d3.scale.ordinal().domain([1, 2, 3, 4, 5, 6]).range(['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666']);
boundary_thickness = d3.scale.sqrt().domain([1, 6]).range([1.2, 0.01]);
draw_boundaries = function(data, level, layer) {
var boundaries, boundaries_data, boundaries_underline, level_color;
boundaries_data = mesh(data, function(a, b) {
return a.properties.path[level - 1] === b.properties.path[level - 1] && a.properties.path[level] !== b.properties.path[level];
});
level_color = d3.hcl(boundary_color(level));
level_color.c = 10;
level_color.l = 97;
boundaries_underline = layer.selectAll(".boundary_underline_" + level).data(boundaries_data);
boundaries_underline.enter().append('path').attr({
"class": "boundary_underline boundary_underline_" + level,
d: smooth,
'stroke-width': 8 * boundary_thickness(level),
stroke: level_color
});
boundaries = layer.selectAll(".boundary_" + level).data(boundaries_data);
return boundaries.enter().append('path').attr({
"class": "boundary boundary_" + level,
d: smooth,
'stroke-width': boundary_thickness(level)
});
};
d3.json('leaf_regions.topo.json', function(data) {
/* presimplify the topologies (compute the effective area (z) of each point) */
var boundaries_layer, coast, island, land;
topojson.presimplify(data);
/* parse paths into arrays, and extract the class of each leaf region */
topojson.feature(data, data.objects.leaf_regions).features.forEach(function(f) {
f.properties.path = JSON.parse(f.properties.path);
return f.properties["class"] = f.properties.path[f.properties.path.length - 1];
});
island = mesh(data, function(a, b) {
return a === b;
});
land = vis.selectAll('.land').data(island);
land.enter().append('path').attr({
"class": 'land',
d: straight
});
vis.append('clipPath').attr({
id: 'island'
}).selectAll('path').data(island).enter().append('path').attr({
d: straight
});
boundaries_layer = vis.append('g').attr({
'clip-path': 'url(#island)'
});
d3.range(6, 0, -1).forEach(function(level) {
return draw_boundaries(data, level, boundaries_layer);
});
coast = vis.selectAll('.coast').data(island);
return coast.enter().append('path').attr({
"class": 'coast',
d: straight
});
});
}).call(this);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GosperMap: boundaries</title>
<link rel="stylesheet" href="index.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="d3-path.js"></script>
<script src="d3-shape.js"></script>
</head>
<body>
<svg></svg>
<script src="index.js"></script>
</body>
</html>(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define('d3-path', ['exports'], factory) :
factory((global.d3_path = {}));
}(this, function (exports) { 'use strict';
var pi = Math.PI;
var tau = 2 * pi;
var epsilon = 1e-6;
var tauEpsilon = tau - epsilon;
function Path() {
this._x0 = this._y0 = // start of current subpath
this._x1 = this._y1 = null; // end of current subpath
this._ = [];
}
function path() {
return new Path;
}
Path.prototype = path.prototype = {
moveTo: function(x, y) {
this._.push("M", this._x0 = this._x1 = +x, ",", this._y0 = this._y1 = +y);
},
closePath: function() {
if (this._x1 !== null) {
this._x1 = this._x0, this._y1 = this._y0;
this._.push("Z");
}
},
lineTo: function(x, y) {
this._.push("L", this._x1 = +x, ",", this._y1 = +y);
},
quadraticCurveTo: function(x1, y1, x, y) {
this._.push("Q", +x1, ",", +y1, ",", this._x1 = +x, ",", this._y1 = +y);
},
bezierCurveTo: function(x1, y1, x2, y2, x, y) {
this._.push("C", +x1, ",", +y1, ",", +x2, ",", +y2, ",", this._x1 = +x, ",", this._y1 = +y);
},
arcTo: function(x1, y1, x2, y2, r) {
x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
var x0 = this._x1,
y0 = this._y1,
x21 = x2 - x1,
y21 = y2 - y1,
x01 = x0 - x1,
y01 = y0 - y1,
l01_2 = x01 * x01 + y01 * y01;
// Is the radius negative? Error.
if (r < 0) throw new Error("negative radius: " + r);
// Is this path empty? Move to (x1,y1).
if (this._x1 === null) {
this._.push(
"M", this._x1 = x1, ",", this._y1 = y1
);
}
// Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
else if (!(l01_2 > epsilon));
// Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
// Equivalently, is (x1,y1) coincident with (x2,y2)?
// Or, is the radius zero? Line to (x1,y1).
else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
this._.push(
"L", this._x1 = x1, ",", this._y1 = y1
);
}
// Otherwise, draw an arc!
else {
var x20 = x2 - x0,
y20 = y2 - y0,
l21_2 = x21 * x21 + y21 * y21,
l20_2 = x20 * x20 + y20 * y20,
l21 = Math.sqrt(l21_2),
l01 = Math.sqrt(l01_2),
l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
t01 = l / l01,
t21 = l / l21;
// If the start tangent is not coincident with (x0,y0), line to.
if (Math.abs(t01 - 1) > epsilon) {
this._.push(
"L", x1 + t01 * x01, ",", y1 + t01 * y01
);
}
this._.push(
"A", r, ",", r, ",0,0,", +(y01 * x20 > x01 * y20), ",", this._x1 = x1 + t21 * x21, ",", this._y1 = y1 + t21 * y21
);
}
},
arc: function(x, y, r, a0, a1, ccw) {
x = +x, y = +y, r = +r;
var dx = r * Math.cos(a0),
dy = r * Math.sin(a0),
x0 = x + dx,
y0 = y + dy,
cw = 1 ^ ccw,
da = ccw ? a0 - a1 : a1 - a0;
// Is the radius negative? Error.
if (r < 0) throw new Error("negative radius: " + r);
// Is this path empty? Move to (x0,y0).
if (this._x1 === null) {
this._.push(
"M", x0, ",", y0
);
}
// Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
this._.push(
"L", x0, ",", y0
);
}
// Is this arc empty? We’re done.
if (!r) return;
// Is this a complete circle? Draw two arcs to complete the circle.
if (da > tauEpsilon) {
this._.push(
"A", r, ",", r, ",0,1,", cw, ",", x - dx, ",", y - dy,
"A", r, ",", r, ",0,1,", cw, ",", this._x1 = x0, ",", this._y1 = y0
);
}
// Otherwise, draw an arc!
else {
if (da < 0) da = da % tau + tau;
this._.push(
"A", r, ",", r, ",0,", +(da >= pi), ",", cw, ",", this._x1 = x + r * Math.cos(a1), ",", this._y1 = y + r * Math.sin(a1)
);
}
},
rect: function(x, y, w, h) {
this._.push("M", this._x0 = this._x1 = +x, ",", this._y0 = this._y1 = +y, "h", +w, "v", +h, "h", -w, "Z");
},
toString: function() {
return this._.join("");
}
};
var version = "0.1.2";
exports.version = version;
exports.path = path;
}));svg = d3.select('svg')
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height
svg
.attr
viewBox: "#{-width/2} #{-height/2} #{width} #{height}"
# ZOOM
zoomable_layer = svg.append('g')
# define a zoom behavior
zoom = d3.behavior.zoom()
.scaleExtent([0.5,40])
.on 'zoom', () ->
zoomable_layer
.attr
transform: "translate(#{zoom.translate()})scale(#{zoom.scale()})"
svg.call(zoom)
vis = zoomable_layer.append 'g'
.attr
transform: 'translate(160, -170) rotate(-60)'
smooth = d3_shape.line()
.curve d3_shape.cardinal, 0.5
straight = d3_shape.line()
.curve d3_shape.cardinal, 0.5
### custom projection to make hexagons appear regular (y axis is also flipped) ###
CELL_RADIUS = 0.12
dx = CELL_RADIUS * 2 * Math.sin(Math.PI / 3)
dy = CELL_RADIUS * 1.5
SIMPLIFICATION = 20000
projection = (p) ->
x = p[0]
y = p[1]
return [x * dx / 2, -(y - (2 - (y & 1)) / 3) * dy / 2]
mesh = (data, cmp) ->
points = []
topojson.mesh(data, data.objects.leaf_regions, cmp).coordinates.forEach (c) ->
if c.length < 1
c = c[0]
points.push(
c
.filter (d,i) -> d[2] >= SIMPLIFICATION
.map (d) -> projection(d)
)
return points
boundary_color = d3.scale.ordinal()
.domain([1..6])
.range(['#1b9e77','#d95f02','#7570b3','#e7298a','#66a61e','#e6ab02','#a6761d','#666666'])
boundary_thickness = d3.scale.sqrt()
.domain([1,6])
.range([1.2,0.01])
draw_boundaries = (data, level, layer) ->
boundaries_data = mesh data, (a,b) -> a.properties.path[level-1] is b.properties.path[level-1] and a.properties.path[level] isnt b.properties.path[level]
level_color = d3.hcl(boundary_color(level))
level_color.c = 10
level_color.l = 97
boundaries_underline = layer.selectAll ".boundary_underline_#{level}"
.data boundaries_data
boundaries_underline.enter().append 'path'
.attr
class: "boundary_underline boundary_underline_#{level}"
d: smooth
'stroke-width': 8*boundary_thickness(level)
stroke: level_color
boundaries = layer.selectAll ".boundary_#{level}"
.data boundaries_data
boundaries.enter().append 'path'
.attr
class: "boundary boundary_#{level}"
d: smooth
'stroke-width': boundary_thickness(level)
d3.json 'leaf_regions.topo.json', (data) ->
### presimplify the topologies (compute the effective area (z) of each point) ###
topojson.presimplify(data)
### parse paths into arrays, and extract the class of each leaf region ###
topojson.feature(data, data.objects.leaf_regions).features.forEach (f) ->
f.properties.path = JSON.parse(f.properties.path)
f.properties.class = f.properties.path[f.properties.path.length-1]
island = mesh data, (a,b) -> a is b
land = vis.selectAll '.land'
.data island
land.enter().append 'path'
.attr
class: 'land'
d: straight
# clip boundaries to avoid artifacts (some interpolated lines going into the sea, round caps of boundary underlines)
vis.append 'clipPath'
.attr
id: 'island'
.selectAll 'path'
.data island
.enter().append 'path'
.attr
d: straight
# all boundaries have to be clipped together (defining clip-path for each one of them causes a performance drop)
boundaries_layer = vis.append 'g'
.attr
'clip-path': 'url(#island)'
# WARNING hardcoded maximum level
d3.range(6,0,-1).forEach (level) ->
draw_boundaries data, level, boundaries_layer
coast = vis.selectAll '.coast'
.data island
coast.enter().append 'path'
.attr
class: 'coast'
d: straight
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
font-size: 12px;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
background: #DDD;
}
.boundary {
stroke: #777;
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.coast {
stroke: #333;
stroke-width: 1.2;
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.land {
fill: white;
}
.boundary_underline {
fill: none;
/* stroke: #DDD; */
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}