Draw tube maps in the style of the London Underground using d3
BSD-3-CLAUSE License
Draw tube maps in the style of the London Underground using d3.
See a demo on bl.ocks.org or Observable.
A word of warning. This was created to scratch my own itch (Cambridge Pub Map). It works, but can be difficult to work with. That said, here are examples of other people creating awesome visualizations:
If you use NPM, npm install d3-tube-map
. Otherwise, download the
latest release.
AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3
global
is exported:
<script src="https://d3js.org/d3.v6.js"></script>
<script src="../dist/d3-tube-map.js"></script>
<script>
var container = d3.select("#tube-map");
var width = 1600;
var height = 1024;
var map = d3
.tubeMap()
.width(width)
.height(height)
.margin({
top: height / 50,
right: width / 7,
bottom: height / 10,
left: width / 7,
});
d3.json("./pubs.json").then(function (data) {
container.datum(data).call(map);
});
</script>
# d3.tubeMap() <>
Constructs a new tube map generator with the default settings.
# tubeMap(selection) <>
Render the tube map to the given selection, which is a selection.
# tubeMap.width(w) <>
Sets the width of the viewbox the map is rendered to.
# tubeMap.height(h) <>
Sets the height of the viewbox the map is rendered to.
# tubeMap.margin(m) <>
Sets the margin around the map. Takes an object of the following form:
{ top: 10, right: 20, bottom: 10, left: 20 }
The data passed to the tube map should have the following properties: stations
, lines
and optionally river
. A minimal example is shown below.
{
"stations": {
"StationA": {
"label": "Station A"
},
"StationB": {
"label": "Station B"
}
},
"lines": [
{
"name": "LineA",
"color": "#FF0000",
"shiftCoords": [0, 0],
"nodes": [
{
"coords": [23, -4],
"name": "StationA",
"labelPos": "N"
},
{
"coords": [30, -4]
},
{
"coords": [31, -3],
},
{
"coords": [31, 2],
"name": "StationB",
"labelPos": "E"
}
]
}
]
}
stations
is an object where each property is a a station with the key being a unique identifier and the value being an object with a label property. The label is the display friendly text that will be rendered to the screen.
lines
is an array of line
objects. Each line
must have the following:
name
will be used as the id
of the svg
path
elementcolor
is simply the color of the lineshiftCoords
will translate the whole line in the x and y directionsnodes
is an array of nodes which define the layout of the lineA line
may optionally also define:
shiftNormal
will offset the line along the direction of its normal vectorEach node must have the following:
coords
is the position of the node. Must be integer valuesname
should be present if the node represents a station. It should match a station defined in the top-level stations
propertylabelPos
should be present if the node represents a station. It is a compass direction and determines where the label is positioned relative to the node, e.g. NE would place the label up and to the right of the nodeTwo types of corner are supported: a 90 degree turn and a 45 degree turn. The latter is recognised when the position of a node differs from the position of the previous node by either:
For example:
[
{
"coords": [-27, -11]
},
{
"coords": [-26, -9]
}
]
A 90 degree turn is recognised when the position of a node differs from the position of the previous node by:
For example:
[
{
"coords": [0, 2]
},
{
"coords": [1, 1],
}
]