A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>How maps in the media make us more negative about migrants (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://thecorrespondent.com/664/how-maps-in-the-media-make-us-more-negative-about-migrants">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>How maps in the media make us more negative about migrants</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://thecorrespondent.com/664/how-maps-in-the-media-make-us-more-negative-about-migrants" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>It’s like one of those optical illusions: it looks like one face at first, but it’s actually two. Once you see the second face, you can never unsee it. </p>
  71. <p>In this case, the illusion is how we view migration – it’s the maps we see so frequently that visualise migration for us.</p>
  72. <p>These maps are everywhere.</p>
  73. <p>Those maps may look informative and factual, but are actually anything but neutral. In fact, they subconsciously strengthen the ugly underbelly of anti-migration sentiments in Europe.</p>
  74. <p>Far more than we realise, the maps dictate the opinions and emotions that we form about migration. How is that possible? And above all, is there a better way to do it? </p>
  75. <p>We – professor of political geography Henk van Houtum, designer Leon de Korte and correspondent Maite Vermeulen – decided to take a stab at answering that question. In words, but first and foremost in images. Because once you see it, you can never unsee it.</p>
  76. <h2>Why we often think maps are neutral</h2>
  77. <p>Let’s start with some Cartography 101.</p>
  78. <p>Whether we’re talking about wars, climate change or inequality, chances are that a map will help us understand the world’s important themes at a glance.</p>
  79. <p>Since maps often do not have a clear author and generally use simple icons, they give us a sense of objectivity. They exude an impression of general knowledge and common sense. We see them as reliable summaries, overviews of how the world works.</p>
  80. <p>The exact opposite is true. Every map contains inherent choices. What information are we compiling, why, what do we show and what do we leave out, what shapes, colours, projections and sizes do we use? There is no such thing as an objective or neutral map.</p>
  81. <p>A classic example is the size of Africa as shown on the standard world map: the continent seems quite small, about the same size as Greenland.</p>
  82. <p>Maps always project a specific view of reality. They can never be more than a model of the world. This simple fact is inevitable. And it’s not a bad thing, as such. The more maps there are, the greater the sum total of information becomes – just as a multitude of voices blends into a democracy.</p>
  83. <p>Where does it go wrong? When maps are interpreted as neutral truth. Not one of many representations of reality, but the single definitive model of how the world works. And that is exactly what happens with many maps in the politicised migration debate. </p>
  84. <h2>The best-known migration map</h2>
  85. <p>To understand what we see – and what we don’t see – when we look at an average migration map, let’s start by looking at what may well be the most widely copied migration map available: the map published by the European Border and Coast Guard Agency</p>
  86. <p>So what’s going on here if we take a look at this map? If we were to redesign the map in the default style used by The Correspondent, it might look something like this:</p>
  87. <pre><code>
  88. </code></pre>
  89. <h2>Is there a different way to do this? </h2>
  90. <p>Long story short, the migration map provided by Frontex makes us feel like we are being overrun by huge numbers of anonymous enemies, coming at us en masse from all corners of the globe to disrupt our orderly lives. There are obvious reasons why anti-migration parties, like the Dutch Party for Freedom (Partij voor de Vrijheid), use exactly the same logic on maps</p>
  91. <p>These are all great ideas, but not particularly feasible for an editorial team that has a very short time frame for producing a map to accompany a news story. But what <em>would</em> be feasible? What could we do within those time and budget constraints?</p>
  92. <p>Let’s see what happens when we go back and take another crack at our original migration map. </p>
  93. <h2>A map may not be the right solution</h2>
  94. <p>All right, this map is a lot less alarming than our original design. Still, there’s so much information that’s missing here. </p>
  95. <p>The right to asylum, the Refugee Convention, the horrific conflicts that prompt people to flee, the European contribution to those conflicts, the deaths along our borders – none of that is conveyed here.</p>
  96. <p>And in some sense that’s logical; it’s not possible to avoid simplifying the world in a map. And so the question becomes: are we using the right information? </p>
  97. <p>The only policy response evoked by the Frontex map and its thick, red arrows is: we have to defend ourselves against a major and imminent threat. And when you think about the author of the map, it’s not all that surprising. Frontex’<em>s </em>raison d’être<em> </em>is to guard the European borders. Seen in that light, it seems obvious that the border control authority might come up with maps that are less than objective.</p>
  98. <p>So should we even base a migration map on the Frontex data at all? When Frontex sends out a press release, media don’t just copy/paste its contents without comment, verification or alternative sources – so why do we do exactly that when it comes to maps?</p>
  99. <p>Besides changing the <em>format</em> of the map, it may be even more important to look at what <em>information</em> we should add to put the map in context. And when we do that, it may turn out that a traditional atlas map isn’t the best way</p>
  100. <h2>What do you see, and what don’t you see?</h2>
  101. <p>These alternatives do give us a different impression of migration across the Mediterranean, that much is certain. It’s also clear that traditional maps may not always be the best format for conveying this information. </p>
  102. <p>As journalists and illustrators, there is no way around simplifying the world for the sake of readability. Whether in maps or in text. But we <em>can</em> be much more aware of the consequences of those simplifications – and be honest about what’s happening. We can present a map as a story that contains moral choices, rather than portraying it as the truth. In any case, the Correspondent shade of red is now banned for migration maps. We’re not going to casually use those big fat arrows anymore, either. </p>
  103. <p>But the most important point here may well be that we need to look at maps differently, as news consumers. We need to ask ourselves what we see, and above all what we don’t see. Every time you see a map used somewhere, take a moment to contemplate who authored this visual story and what message the author wants to convey. And why. </p>
  104. </article>
  105. <hr>
  106. <footer>
  107. <p>
  108. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  109. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  110. </svg> Accueil</a> •
  111. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  112. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  113. </svg> Suivre</a> •
  114. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  116. </svg> Pro</a> •
  117. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  118. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  119. </svg> Email</a> •
  120. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  122. </svg> Légal</abbr>
  123. </p>
  124. <template id="theme-selector">
  125. <form>
  126. <fieldset>
  127. <legend><svg class="icon icon-brightness-contrast">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  129. </svg> Thème</legend>
  130. <label>
  131. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  132. </label>
  133. <label>
  134. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  135. </label>
  136. <label>
  137. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  138. </label>
  139. </fieldset>
  140. </form>
  141. </template>
  142. </footer>
  143. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  144. <script>
  145. function loadThemeForm(templateName) {
  146. const themeSelectorTemplate = document.querySelector(templateName)
  147. const form = themeSelectorTemplate.content.firstElementChild
  148. themeSelectorTemplate.replaceWith(form)
  149. form.addEventListener('change', (e) => {
  150. const chosenColorScheme = e.target.value
  151. localStorage.setItem('theme', chosenColorScheme)
  152. toggleTheme(chosenColorScheme)
  153. })
  154. const selectedTheme = localStorage.getItem('theme')
  155. if (selectedTheme && selectedTheme !== 'undefined') {
  156. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  157. }
  158. }
  159. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  160. window.addEventListener('load', () => {
  161. let hasDarkRules = false
  162. for (const styleSheet of Array.from(document.styleSheets)) {
  163. let mediaRules = []
  164. for (const cssRule of styleSheet.cssRules) {
  165. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  166. continue
  167. }
  168. // WARNING: Safari does not have/supports `conditionText`.
  169. if (cssRule.conditionText) {
  170. if (cssRule.conditionText !== prefersColorSchemeDark) {
  171. continue
  172. }
  173. } else {
  174. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  175. continue
  176. }
  177. }
  178. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  179. }
  180. // WARNING: do not try to insert a Rule to a styleSheet you are
  181. // currently iterating on, otherwise the browser will be stuck
  182. // in a infinite loop…
  183. for (const mediaRule of mediaRules) {
  184. styleSheet.insertRule(mediaRule.cssText)
  185. hasDarkRules = true
  186. }
  187. }
  188. if (hasDarkRules) {
  189. loadThemeForm('#theme-selector')
  190. }
  191. })
  192. </script>
  193. </body>
  194. </html>