-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
155 lines (150 loc) · 16.2 KB
/
Copy pathindex.html
File metadata and controls
155 lines (150 loc) · 16.2 KB
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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Disappearing Languages</title>
<link rel="icon" href="images/favicon.png" type="image/png" sizes="24x24">
<meta property="og:image" content="http://github.com/howwegettonext/endangeredlanguages/raw/master/fbpreview.jpg"/>
<meta property="og:image:secure_url" content="https://github.com/howwegettonext/endangeredlanguages/raw/master/fbpreview.jpg"/>
<meta property="og:image:alt" content="A cluster of dots indicating different languages"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http - equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-54448814-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-54448814-4');
</script>
</head>
<body id="thebody">
<main>
<div id="mainwidth">
<div id="header">
<a href="https://howwegettonext.com/"><img src="images/next.png" class="button" id="nextlogo" alt="How We Get to Next Home"></a>
<nav>
<ul>
<li><a href="https://howwegettonext.com/themes/">THEMES</a></li>
<li><a href="https://howwegettonext.com/series/">SERIES</a></li>
<li><a href="https://howwegettonext.com/beats/">BEATS</a></li>
<li><a href="https://interactive.howwegettonext.com">INTERACTIVES</a></li>
<li class="has-submenu">
<a href="https://howwegettonext.com/about-how-we-get-to-next/">ABOUT</a>
<div class="submenu">
<a href="https://howwegettonext.com/you-can-republish-our-content/" class="submenu-item">You Can Republish Our Content</a>
</div>
</li>
</ul>
</nav>
</div>
<h1 class="bringtofront">Disappearing Languages</h1>
<p class="bringtofront">The way we speak has an enormous effect on our identities. The ever-changing languages, dialects, or even accents that we use define our relationship with the world, allowing us to express concepts and ideas that might be impossible in other languages.</p>
<p class="bringtofront"><em>Iktsuarpok</em>, for example, is an Inuit word for the feeling of anticipation when you’re expecting someone that leads you to constantly check to see if they’ve arrived, while <em>hiraeth</em> is a Welsh word that reflects a type of longing for the homeland or the romanticized past. The Japanese word <em>komorebi</em> refers to the sunlight that filters through the leaves of trees, while the Yaghan word <em>mamihlapinatapai</em> describes the wordless, meaningful look shared by two people who both want to initiate something, but are reluctant to do so.</p>
<div id="bigcircle"></div>
<p class="bringtofront">Diversity of language brings an immeasurable cultural richness to the world, but the number of regular speakers of less-common languages is in steep decline. You might think this is a modern phenomenon, but <a href="https://sustainableunh.unh.edu/sites/sustainableunh.unh.edu/files/images/Krauss(1992).pdf">linguists</a> <a href="https://books.google.co.uk/books?id=u_s9fR8pczMC&pg=PA68&lpg=PA68&dq=20,000+languages&source=bl&ots=RfpexF7tAA&sig=e22ayCOhB709eDkGz5YKhu2wjqg&hl=en&sa=X&ved=0ahUKEwjYgNf_hIzaAhULK8AKHej6Cu8Q6AEIhAEwCA#v=onepage&q=20%2C000%20languages&f=false">estimate</a> that linguistic diversity was at its peak in 8,000 BCE, when as many as 20,000 languages may have been in existence (assuming a world population of 5-10 million and an average community size of 500-1,000). Today, it's likely that less than half of that number remain.</p>
<p class="bringtofront">In the charts and maps below, we’ve investigated the languages that UNESCO describes as threatened in its <a href="http://www.unesco.org/languages-atlas/index.php">Atlas of the World’s Languages in Danger</a>. Each language is represented by a circle—with its size scaled to the number of people that speak it, and its color indicating by how endangered it is. Further down, we’ve profiled several languages in danger, and you can also calculate your nearest endangered language. Finally, there’s a map where you can explore the global distribution of these languages.</p>
<h2>How many people speak these languages?</h2>
<p>First, let’s look at how the size of each dot corresponds with the number of people who speak each language. Here’s a comparison of different dot sizes, and how many speakers they indicate:</p>
<div id="scale"></div>
<p>There are plenty of endangered languages with fewer than 10,000 speakers that are hard to see on these bubble charts. Near the bottom of the page, you’ll find a map showing all of them.</p>
<h2>How endangered are these languages?</h2>
<p>UNESCO puts endangered languages into four different categories, depending on how they’re used. We’ve sorted the bubbles from above into those categories, each represented by a color. It’s worth noting that there is only a weak relationship between the number of speakers and how endangered a language is. Some languages have only a few speakers, but are less endangered than others that may be spoken by many people.</p>
<div class="big-box">
<!-- The following div is for the vulnerable degree of endangerment. -->
<div class="box-single vulnerable"></div>
<p id="bluebox">Most children speak the language, but it may be only spoken in certain places</p>
<!-- The following div is for the definitely endangered degree of endangerment. -->
<div class="box-single definitely"></div>
<p id="peachbox">Children no longer learn the language as mother tongue in the home</p>
<!-- The following div is for the severely endangered degree of endangerment. -->
<div class="box-single severely"></div>
<p id="redbox">Language spoken by grandparents and older generations; while the parent generation may understand it they do not speak it to children or among themselves</p>
<!-- The following div is for the crtically endangered degree of endangerment. -->
<div class="box-single critically"></div>
<p id="plumbox">The youngest speakers are grandparents or older, and they speak the language partially or infrequently</p>
</div>
<h2>Where are these languages spoken?</h2>
<p>We can also break down the bubble chart above into parts of the world. The charts below show how endangered languages are distributed around the world, but be careful when reading it because the size of each clump reflects the number of speakers—not the number of languages.</p>
<p>For example, while Asia has the biggest clump, and also the most endangered languages, the continent with the fewest endangered languages is actually Europe. Oceania has about the same number of endangered languages as Africa, but they’re spoken by fewer people so its clump is the smallest—not surprising considering most of those languages are distributed across scattered chains of tiny islands.</p>
<div class="big-box">
<!-- The following div is for the Asia chart.-->
<div class="box asia"></div>
<!-- The following div is for the Africa chart.-->
<div class="box africa"></div>
<!-- The following div is for the Europe chart.-->
<div class="box europe"></div>
<!-- The following div is for the North America chart.-->
<div class="box namerica"></div>
<!-- The following div is for the South America chart.-->
<div class="box samerica"></div>
<!-- The following div is for the Oceania chart.-->
<div class="box oceania"></div>
</div>
<h2>Languages in profile</h2>
<p class="showcasetext">In this section, we’ve picked out three languages that have particularly interesting stories behind them. You can also identify your nearest endangered language.</p>
<div class="container">
<!-- The following div is for the first focus language static graphic. -->
<div class="box-single feature1" id="showcase1-image"><img src="images/feature1.png" alt="Navajo Map" class="border"></div>
<div id="showcase1-text" class="showcasetext">
<h2 class="title">Navajo: Southwestern US</h2>
<h2 class="subtitle">120,000 speakers remaining</h2><svg width="50" height="5"><rect width="50" height="5" style="fill: rgb(97, 157, 148);" /></svg>
<p>The most widely spoken indigenous language north of Mexico, Navajo is part of the Na-Dené group, which linguists now believe to be connected to the nearly-extinct Yeniseian languages of central Siberia. Several hundred speakers (“code talkers”) were infamously used by the U.S. during World War 2 for encoding sensitive messages, and, post-war, a number of education programs have begun its slow revitalization. <a href="https://www.youtube.com/watch?v=XFayFUiyv20">Hear it spoken</a>.</p>
</div>
<!-- The following div is for the second focus language static graphic. -->
<div id="showcase2-text" class="showcasetext">
<h2 class="title">Crimean Tatar: Russia & Ukraine</h2>
<h2 class="subtitle">100,000 speakers remaining</h2><svg width="50" height="5"><rect width="50" height="5" style="fill: rgb(252, 73, 82);" /></svg>
<p>One of a number of languages orphaned by the advance and retreat of Mongol states during the 13th century. In 1944, Joseph Stalin and Lavrentiy Beria ethnically cleansed Crimea, forcibly transporting the majority of the region’s 220,000 Tatars to what is now Uzbekistan—and while several thousand of the community have moved back since, its language is now scattered among a small, global diaspora. <a href="https://www.youtube.com/watch?v=Obv_tZzUA8s&feature=youtu.be&t=60">Hear it spoken</a>.</p>
</div>
<div class="box-single feature2" id="showcase2-image"><img src="images/feature2.png" alt="Crimean Tatar Map" class="border"></div>
<!-- The following div is for the third focus language static graphic. -->
<div class="box-single feature3" id="showcase3-image"><img src="images/feature3.png" alt="Nǀuu Map" class="border"></div>
<div id="showcase3-text" class="showcasetext">
<h2 class="title">Nǀuu: South Africa</h2>
<h2 class="subtitle">8 speakers remaining</h2><svg width="50" height="5"><rect width="50" height="5" style="fill: rgb(152, 61, 82);" /></svg>
<p>One of the many languages of southern Africa displaced during European colonization—especially by Dutch-derived Afrikaans and Khoekhoe, one of Namibia’s national languages—Nǀuu is now rarely spoken aloud as its handful of speakers live in different villages. It is expected to die completely soon, although it will at least live on as the official motto of South Africa’s Northern Cape province, coined by 101-year-old Elsie Vaalbooi: “Sa ||a !aĩsi ’uĩsi” (“Strive for a better life”). <a href="https://www.youtube.com/watch?v=e5RkfixyXqc">Hear it spoken</a>.</p>
</div>
<!-- The following div is for the nearest endangered language map. This should not be interactive/zoomable. -->
<div id="showcase4-text" class="showcasetext">
<h2 class="title"><span id="nearest-head">Find your nearest endangered language</span></h2><svg width="50" height="5"><rect width="50" height="5" id="nearest-rect" style="fill: #f4eedf;" /></svg>
<p><span id="nearest-body"></span></p>
<p><span id="nearest-body"></span></p><button type="button" onclick="locApprove()" id="nearest-button">Locate me</button></div>
<div class="box-single nearest" id="showcase4-image"><img src="images/placeholder.png" alt="Nearest Endangered Language Placeholder" id="placeholder"><img src="images/loader.gif" id="nearest-loading"></div>
</div>
<div class="world">
<h2>A World of Languages</h2>
<p>Finally, here’s every language listed as endangered in the UNESCO Atlas of the World’s Languages in Danger. You can pan and zoom the map, and click on a point to find out more about it. The color coding is the same as in the clumps above.</p>
<div class="world border" id="earth_div"></div>
</div>
<p>To read about the role that languages play in identity, be sure to check out the <a href="https://howwegettonext.com/can-language-save-communities-under-threat-from-a-globalized-world">article that accompanies this visual essay</a>. Plus, if you want to talk about digital identity in more detail, be sure to join our <a href="https://www.facebook.com/groups/idquestion/">ID Question Facebook group</a>.</p>
<img src="images/spacer.png" class="spacer">
<div id="outro">
<p id="credits">This visual essay was created in <a href="https://d3js.org/">D3v4.js</a>, with <a href="https://github.com/topojson/topojson">TopoJSON</a> and <a href="https://www.mapbox.com/mapbox-gl-js/api/">MapboxGL</a>, by <a href="http://duncangeere.com">Duncan Geere</a>,
<a href="http://edenbrack.com/">Eden Brackenbury</a> and <a href="https://twitter.com/iansteadman">Ian Steadman</a> for <a href="https://howwegettonext.com/the-id-question">the ID Question</a>. 2011 data from <a href="https://www.theguardian.com/news/datablog/2011/apr/15/language-extinct-endangered">UNESCO via the Guardian</a>. Maps from <a href="https://www.amcharts.com">amCharts</a>,
<a href="http://naturalearthdata.com/">Natural Earth</a> and <a href="http://www.mapbox.com/">Mapbox</a>. Icon from <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a>. Find the source code on <a href="https://github.com/howwegettonext/endangeredlanguages">Github</a>.</p>
</div>
<div id="seriesintro"><a href="https://howwegettonext.com/the-id-question"><img src="images/idquestion.png" alt="ID Question Hub" id="serieslogo"></a>
<p>The ID Question is a <a href="https://howwegettonext.com/">How We Get To Next</a> production.</p>
<p>How We Get To Next was a magazine that explored the future of science, technology, and culture from 2014 to 2019. Our interactives explored everything from neglected tropical diseases to government data breaches.</p>
</div>
<div id="footer">
<p class="fineprint">CC BY-SA 3.0</p>
</div>
<script src="script/circles.js"></script>
<script src="script/nearestlang.js"></script>
<script src="script/mapbox.js"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="script/index-scripts.js"></script>
</div>
</main>
</body>
</html>