Custom Datawrapper script embed setup (without embed.json)

by elanadw

HTML

<h2>Article title</h2>
<article>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec quam quis ante vulputate volutpat. Proin auctor tristique ligula non tempus.
  </p>
  <!-- custom embed markup - needs a class for generic selection, and a way to identify the chart id -->
  <div class="datawrapper-embed" data-chart-id="3MOum"></div>
  <p>
  Morbi id mattis turpis. Aliquam vestibulum justo eu ultricies luctus. Ut varius at mauris vel fermentum. Phasellus bibendum efficitur magna at feugiat. Praesent libero libero, blandit nec erat non, malesuada efficitur nibh.
  </p>
  <div class="datawrapper-embed" data-chart-id="XskMo"></div>
</article>

CSS

body {
  max-width: 600px;
  margin: auto;
  font-family: sans-serif;
}

JavaScript

// collect all embeds on the page
const embeds = Array.from(document.querySelectorAll('.datawrapper-embed'));

embeds.forEach(embed => {
  const script = document.createElement('script');
  script.src = `https://datawrapper.dwcdn.net/${embed.dataset.chartId}/embed.js`;
  embed.appendChild(script);
});