A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  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>The race for coronavirus vaccines: a graphical guide (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://www.nature.com/articles/d41586-020-01221-y">
  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>The race for coronavirus vaccines: a graphical guide</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.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://www.nature.com/articles/d41586-020-01221-y" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>More than 90 vaccines are being developed against SARS-CoV-2 by research teams in companies and universities across the world. Researchers are trialling different technologies, some of which haven’t been used in a licensed vaccine before. At least six groups have already begun injecting formulations into volunteers in safety trials; others have started testing in animals. <i>Nature</i>’s graphical guide explains each vaccine design.</p>
  71. <figure class="figure">
  72. <div class="embed intensity--high">
  73. <img class="" alt="A graphic that shows how the body develops immunity to coronavirus." src="//media.nature.com/lw800/magazine-assets/d41586-020-01221-y/d41586-020-01221-y_17935546.png">
  74. <figcaption>
  75. <p class="figure__caption sans-serif"><span class="mr10">Graphics: Nik Spencer/<i>Nature</i></span><span></span></p>
  76. </figcaption>
  77. </div>
  78. </figure>
  79. <h2><b>SARS-CoV-2 vaccines: a variety of approaches</b></h2>
  80. <p>All vaccines aim to expose the body to an antigen that won’t cause disease, but will provoke an immune response that can block or kill the virus if a person becomes infected. There are at least eight types being tried against the coronavirus, and they rely on different viruses or viral parts.</p>
  81. <figure class="figure">
  82. <div class="embed intensity--high">
  83. <img class="" alt="A graph that shows the number of coronavirus vaccines in development." src="//media.nature.com/lw800/magazine-assets/d41586-020-01221-y/d41586-020-01221-y_17935130.png">
  84. <figcaption>
  85. <p class="figure__caption sans-serif"><span class="mr10">Sources: <i>Nature</i> analysis based on: WHO COVID-19 Vaccine Landscape/Milken Institute COVID-19 Treatment and Vaccine Tracker/T. Thanh Le <i>et al. Nature Rev. Drug. Disc</i>. <a href="http://doi.org/ggrnbr" data-track="click" data-label="http://doi.org/ggrnbr" data-track-category="body text link">http://doi.org/ggrnbr</a> (2020)/F. Amanat &amp; F. Krammer <i>Immunity</i> <b>52</b>, 583–589 (2020)/W. Shang <i>et al. npj Vaccines</i> <b>5</b>, 18 (2020).</span><span></span></p>
  86. </figcaption>
  87. </div>
  88. </figure>
  89. <h2>Virus vaccines</h2>
  90. <p>At least seven teams are developing vaccines using the virus itself, in a weakened or inactivated form. Many existing vaccines are made in this way, such as those against measles and polio, but they require extensive safety testing. Sinovac Biotech in Beijing has started to test an inactivated version of SARS-CoV-2 in humans.</p>
  91. <figure class="figure">
  92. <div class="embed intensity--high">
  93. <img class="" alt="A graphic that shows how weakened or inactivated coronavirus can be used in a vaccine." src="//media.nature.com/lw800/magazine-assets/d41586-020-01221-y/d41586-020-01221-y_17935124.png">
  94. <figcaption>
  95. <p class="figure__caption sans-serif"><span></span></p>
  96. </figcaption>
  97. </div>
  98. </figure>
  99. <h2>Viral-vector vaccines</h2>
  100. <p>Around 25 groups say they are working on viral-vector vaccines. A virus such as measles or adenovirus is genetically engineered so that it can produce coronavirus proteins in the body. These viruses are weakened so they cannot cause disease. There are two types: those that can still replicate within cells and those that cannot because key genes have been disabled.</p>
  101. <figure class="figure">
  102. <div class="embed intensity--high">
  103. <img class="" alt="A graphic that shows how viral vectors containing coronavirus genes can be used in a vaccine." src="//media.nature.com/lw800/magazine-assets/d41586-020-01221-y/d41586-020-01221-y_17935122.png">
  104. <figcaption>
  105. <p class="figure__caption sans-serif"><span></span></p>
  106. </figcaption>
  107. </div>
  108. </figure>
  109. <h2>Nucleic-acid vaccines</h2>
  110. <p>At least 20 teams are aiming to use genetic instructions (in the form of DNA or RNA) for a coronavirus protein that prompts an immune response. The nucleic acid is inserted into human cells, which then churn out copies of the virus protein; most of these vaccines encode the virus’s spike protein.</p>
  111. <figure class="figure">
  112. <div class="embed intensity--high">
  113. <img class="" alt="A graphic that shows how coronavirus genetic material can be used in a vaccine." src="//media.nature.com/lw800/magazine-assets/d41586-020-01221-y/d41586-020-01221-y_17935118.png">
  114. <figcaption>
  115. <p class="figure__caption sans-serif"><span></span></p>
  116. </figcaption>
  117. </div>
  118. </figure>
  119. <h2>Protein-based vaccines</h2>
  120. <p>Many researchers want to inject coronavirus proteins directly into the body. Fragments of proteins or protein shells that mimic the coronavirus’s outer coat can also be used.</p>
  121. <figure class="figure">
  122. <div class="embed intensity--high">
  123. <img class="" alt="A graphic that shows how coronavirus proteins can be used in a vaccine." src="//media.nature.com/lw800/magazine-assets/d41586-020-01221-y/d41586-020-01221-y_17935126.png">
  124. <figcaption>
  125. <p class="figure__caption sans-serif"><span></span></p>
  126. </figcaption>
  127. </div>
  128. </figure>
  129. <h2><b>Industry trials</b></h2>
  130. <p>More than 70% of the groups leading vaccine research efforts are from industrial or private firms. Clinical trials start with small safety studies in animals and people, followed by much larger trials to determine whether a vaccine generates an immune response. Researchers are accelerating these steps and hope to have a vaccine ready in 18 months.</p>
  131. <figure class="figure">
  132. <div class="embed intensity--high">
  133. <img class="" alt="A graph that shows the types of developers from different regions of the world that are developing a coronavirus vaccine." src="//media.nature.com/lw800/magazine-assets/d41586-020-01221-y/d41586-020-01221-y_17935120.png">
  134. <figcaption>
  135. <p class="figure__caption sans-serif"><span class="mr10">Source: Fig. 2 in T. Thanh Le <i>et al</i>. <i>Nature Rev. Drug. Disc</i>. <a href="http://doi.org/ggrnbr" data-track="click" data-label="http://doi.org/ggrnbr" data-track-category="body text link">http://doi.org/ggrnbr</a> (2020).</span><span></span></p>
  136. </figcaption>
  137. </div>
  138. </article>
  139. <hr>
  140. <footer>
  141. <p>
  142. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  143. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  144. </svg> Accueil</a> •
  145. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  146. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  147. </svg> Suivre</a> •
  148. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  149. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  150. </svg> Pro</a> •
  151. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  152. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  153. </svg> Email</a> •
  154. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  155. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  156. </svg> Légal</abbr>
  157. </p>
  158. <template id="theme-selector">
  159. <form>
  160. <fieldset>
  161. <legend><svg class="icon icon-brightness-contrast">
  162. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  163. </svg> Thème</legend>
  164. <label>
  165. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  166. </label>
  167. <label>
  168. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  169. </label>
  170. <label>
  171. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  172. </label>
  173. </fieldset>
  174. </form>
  175. </template>
  176. </footer>
  177. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  178. <script>
  179. function loadThemeForm(templateName) {
  180. const themeSelectorTemplate = document.querySelector(templateName)
  181. const form = themeSelectorTemplate.content.firstElementChild
  182. themeSelectorTemplate.replaceWith(form)
  183. form.addEventListener('change', (e) => {
  184. const chosenColorScheme = e.target.value
  185. localStorage.setItem('theme', chosenColorScheme)
  186. toggleTheme(chosenColorScheme)
  187. })
  188. const selectedTheme = localStorage.getItem('theme')
  189. if (selectedTheme && selectedTheme !== 'undefined') {
  190. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  191. }
  192. }
  193. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  194. window.addEventListener('load', () => {
  195. let hasDarkRules = false
  196. for (const styleSheet of Array.from(document.styleSheets)) {
  197. let mediaRules = []
  198. for (const cssRule of styleSheet.cssRules) {
  199. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  200. continue
  201. }
  202. // WARNING: Safari does not have/supports `conditionText`.
  203. if (cssRule.conditionText) {
  204. if (cssRule.conditionText !== prefersColorSchemeDark) {
  205. continue
  206. }
  207. } else {
  208. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  209. continue
  210. }
  211. }
  212. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  213. }
  214. // WARNING: do not try to insert a Rule to a styleSheet you are
  215. // currently iterating on, otherwise the browser will be stuck
  216. // in a infinite loop…
  217. for (const mediaRule of mediaRules) {
  218. styleSheet.insertRule(mediaRule.cssText)
  219. hasDarkRules = true
  220. }
  221. }
  222. if (hasDarkRules) {
  223. loadThemeForm('#theme-selector')
  224. }
  225. })
  226. </script>
  227. </body>
  228. </html>