hexmaps/hexjson.html at gh-pages · LukeHaushalter/hexmaps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
	<link rel="StyleSheet" href="resources/style.css" type="text/css" />
	<title>HexJSON format</title>
	<meta name="twitter:card" content="summary">
	<meta name="twitter:site" content="@ODILeeds">
	<meta name="twitter:url" property="og:url" content="https://odileeds.org/projects/hexmaps/hexjson">
	<meta name="twitter:title" property="og:title" content="HexJSON format">
	<meta name="twitter:description" property="og:description" content="Defining a format for sharing hex-based maps.">
	<meta name="twitter:image" property="og:image" content="https://odileeds.org/projects/hexmaps/hexmap.png">
	<script type="text/javascript" src="https://slowe.github.io/stuquery/js/stuquery.js"></script>
	<script type="text/javascript" src="https://slowe.github.io/stuquery/js/stuquery.svg.js"></script>
	<script>
	S(document).ready(function(){

	});
	</script>
</head>
<body>


	<div id="main">

		<div class="b1-bg">
			<div class="holder">
				<h1>HexJSON format</h1>
			</div>
		</div>

		<div class="holder">
			<p>We want to make sharing <a href="https://odileeds.org/blog/2017-05-08-mapping-election-with-hexes">hexagon-based maps</a> - such as our <a href="constituencies.html">UK constituency hex map</a> - easy. We've defined a simple <a href="http://jsonlint.com/">JSON format</a> to achieve that. The format is:</p>
			<pre><code>{
	"layout": "odd-r",
	"hexes": {
		"E14000530":{"q":-3,"r":-11},
		"E14000531":{"q":-3,"r":-1}
	}
}</code></pre>
			<p>The <code>layout</code> property should be one of the following <a href="http://www.redblobgames.com/grids/hexagons/#coordinates">coordinate systems</a>:</p>
			<ul>
				<li><code>odd-r</code> (pointy-topped)</li>
				<li><code>even-r</code> (pointy-topped)</li>
				<li><code>odd-q</code> (flat-topped)</li>
				<li><code>even-q</code> (flat-topped)</li>
			</ul>
			<p>The <code>hexes</code> are then defined using unique keys for each. Every hex is positioned by providing column (<code>q</code>) and row (<code>r</code>) coordinates.</p>
			<p>You can add your own custom data fields to each hex if you want to. Just make sure you don't use the keys <code>q</code> and <code>r</code> as they will be the coordinates e.g.</p>
			<pre><code>{
	"layout": "odd-r",
	"hexes": {
		"E14000530":{
			"name": "Aldershot",
			"q": -3,
			"r": -11,
			"area": "SE",
			"NUTS1": "UKJ",
			"electorate": 72430
		},
		"E14000531":{
			"name": "Aldridge-Brownhills",
			"q": -3,
			"r": -1,
			"area": "WM",
			"NUTS1": "UKG",
			"electorate": 60215
		}
		...
	}
}</code></pre>

			<h2>Using HexJSON</h2>
			<p>The format is JSON so should be easy to ingest by your favourite programming language. We'll add examples that people have created below.</p>
			<ul>
				<li><strong>Web:</strong> Stuart Lowe created a <a href="builder.html">HexJSON builder</a> that reads a CSV file, allows you to reposition hexes, and save the output.</li>
				<li><strong>D3:</strong> Oli Hawkins has created <a href="https://github.com/olihawkins/d3-hexjson">a plugin to read HexJSON files with D3.js</a>.</li>
				<li><strong>R:</strong> Tony Hirst wrote a series of blog posts (<a href="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/">part 1</a>, <a href="https://blog.ouseful.info/2017/06/29/hexjson-htmlwidget-for-r-part-2/">part 2</a>, <a href="https://blog.ouseful.info/2017/06/30/hexjson-htmlwidget-for-r-part-3/">part 3</a>) which describe a HTMLWidget that renders HexJSON for R.</li>
				<li><strong>R:</strong> Joseph Bailey has a great <a href="https://github.com/sassalley/hexmapr/">tool for generating hex maps from geospatial polygons</a>.</li>
			</ul>

		</div>
	</div>

	<footer class="b1-bg">
		<div class="holder">
			&copy; 2017 <a href="https://odileeds.org/">ODI Leeds</a>. Released under an MIT license. <a href="https://github.com/odileeds/hexmaps">Source on Github</a>.
		</div>
	</footer>
</body>
</html>