-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
183 lines (169 loc) · 7.05 KB
/
index.html
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap_lux.min.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-95QS35DVCD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-95QS35DVCD');
</script>
<title>30 Day Map Challenge #30DayMapChallenge - Introduction</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<span class="navbar-brand">#30DayMapChallenge</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Intro <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="maps.html">Map Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="stats.html">Stats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/dakvid/30DayMapChallenge">Source</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-12">
<h1>30 Day Map Challenge 2019</h1>
<p class="lead">A collection of awesome maps from Twitter.</p>
</div>
</div>
</div> <div class="row">
<div class="col-12">
<p>
There were so many awesome maps shared as part of #30DayMapChallenge in November 2019,
but they were dispersed across Twitter. I thought I'd try to collate them
so they're all in one place and somewhat explorable. I'm looking forward
to catching up on the ones I missed and coming back time and again for
inspiration. Hopefully you enjoy them too. Thanks to everyone who took part!
</p>
<h3>Where are the maps?</h3>
<p>
<span class="text-info">
Click through to the
<a href="maps.html">map gallery</a>
where you can explore all* the maps.
</span>
Turning the unstructured data of thousands of tweets (map submissions and random discussion)
into a structured dataset is naturally a long and partly manual process, so the gallery
content continues to grow.
</p>
<p>
The interface allows you to filter by challenge days and the
areas being mapped, as well as other metadata - the types of
maps and the tools used (where they've so far been classified).
Click on a map card to see the full image, and to link through
to the original tweet and the creator's webpage.
</p>
<p>
As you might expect, loading the full page and looking at every map in detail
will load 10s or 100s of MB of data, but the images are loaded lazily
so you don't have to download it all at once!
</p>
<p>
If you have trouble with the gallery, or don't like the approach,
Aurelien Chaumet took a different (but still really awesome) approach
<a href="https://public.tableau.com/profile/aurelien.chaumet#!/vizhome/30daymapchallenge/30DayMapChallenge-Week1?publish=yes">collating them all in Tableau.</a>
</p>
<h3>How did the challenge start?</h3>
<p>This was all started by Topi Tjukanov in Finland:</p>
<blockquote class="twitter-tweet" data-lang="en">
<p lang="en" dir="ltr">
Announcing #30DayMapChallenge in November 2019!
Create a map each day of the month with the following themes
<br/>
<br/>
No restriction on tools. All maps should be created by you.
Doing less than 30 maps is fine. #gischat #geography #cartography #dataviz
<a href="https://t.co/6Go4VFWcJB">pic.twitter.com/6Go4VFWcJB</a>
</p>
- Topi Tjukanov (@tjukanov)
<a href="https://twitter.com/tjukanov/status/1187713840550744066">October 25, 2019</a>
</blockquote>
<p>
People know a good idea when they see one, and hundreds of people
from around the globe took part to have some fun and improve their
map making skills.
</p>
<h3>How many people took part? What were the most popular countries?</h3>
<p>
Take a look at the
<a href="stats.html">stats page</a>
(though it needs a bit more data at this stage).
</p>
<h3>Can I help complete the metadata for the maps?</h3>
<p>
Yes, of course!
I'm happy to accept corrections to mistakes or additional metadata
via email (myname at frigge.nz),
<a href="https://twitter.com/dakvid">tweet,</a>
or
<a href="https://github.com/dakvid/30DayMapChallenge">Github</a>
issues or pull requests.
</p>
<p>
If a map is missing from the gallery then it should be in my
todo list (actually a todo data frame) and will appear soon.
The most helpful area to crowdsource is the metadata on areas,
topics, types and tools. My source data file
<a href="https://github.com/dakvid/30DayMapChallenge/blob/master/data/map_classification.tsv">is here</a>
- please feel welcome to fill in any of the gaps.
</p>
<p>
Note that I decided to only allow one map per theme/day per person.
Some people made multiple maps for a theme - generally you can see
the others if you click through to the original tweet.
</p>
<h3>Who are you?</h3>
<p>
I'm
<a href="https://david.frigge.nz/about">David Friggens</a>
<a href="https://twitter.com/dakvid">(@dakvid)</a>
- just another guy on Twitter with an interest in maps.
I had other commitments in early November so only managed 9 maps
in the second half, but wanted to see more of what everyone else
made as there have been so many amazing maps.
</p>
<h3>How did you make this site?</h3>
<p>
With
<a href="https://getbootstrap.com/">Bootstrap 4</a>
and the
<a href="https://bootswatch.com/lux/">Lux</a>
theme from Bootswatch.
The gallery was made with
<a href="https://vestride.github.io/Shuffle/">shuffle.js</a>
and
<a href="https://github.com/aFarkas/lazysizes">lazysizes.</a>
The data munging and HTML construction is performed by some rough
<a href="https://github.com/dakvid/30DayMapChallenge">R code.</a>
</p>
<h3>Is a FAQ style the best way to structure this page?</h3>
<p>No, probably not.</p>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper-1.14.7.min.js"></script>
<script src="js/bootstrap-4.3.1.min.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>