JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<script src="//datawrapper.dwcdn.net/lib/vis/d3-lines-7dfa6706993658f555d5c31e734ee24e.min.js?v=aba5cd18"></script>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>Presidential Approval Ratings Since Kennedy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.95, maximum-scale=0.95, user-scalable=0" />
          <link rel="alternate" type="application/json+oembed" href="https://app.datawrapper.de/api/plugin/oembed?url=%2F%2Fdatawrapper.dwcdn.net%2FAHyW3%2F2%2F&amp;format=json" title="Globalt utsläpp av kol " />


    <link rel="stylesheet" type="text/css" href="//datawrapper.dwcdn.netAHyW3.all.css?v=aba5cd18" />

    <script type="text/javascript" charset="utf-8">
    window.__locale = 'sv-SE';
    </script>

      <script type="text/javascript" charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js?v=aba5cd18"></script>
        <!-- <script type="text/javascript" charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js?v=aba5cd18"></script> -->
        <script type="text/javascript" charset="utf-8" src=""></script>
        <script type="text/javascript" charset="utf-8" src="//datawrapper.dwcdn.net/lib/chart-61e2c71412141871942c0de6c1051c69ca80e945.min.js?v=aba5cd18"></script>
    
</head>
<body class="dw-chart chart vis-height-fit theme-ne vis-d3-lines">
    

                            
    <div class="dw-chart-header" id="header">
                    <h1 >
                <span class="chart-title">Globalt utsläpp av kol </span>
            </h1>

            <p class="chart-intro">Globalt utsläpp av kol per region (miljarder ton CO2 per år)</p>
            </div>

    <div class="dw-chart-body" id="chart"></div>

                        <div class="dw-chart-notes hidden">
                
            </div>
            
    
    
            <div class="dw-chart-footer"...

CSS

.chart {
  font-family: Helvetica;
  color: #101010;
  font-size: 12px;
  background: transparent;
  margin: 0 0px;
  height: 100%;
}
.chart.vis-height-fit {
  overflow: hidden;
}
.chart a {
  color: #00509a;
  text-decoration: none;
}
.chart .dw-chart-header {
  min-height: 1px;
  position: relative;
  overflow: auto;
}
.chart .dw-chart-header .header-right {
  position: absolute;
  right: 10px;
  z-index: 20;
}
.chart .dw-chart-header h1 {
  font-weight: bold;
  font-size: 22px;
  font-style: normal;
  text-decoration: none;
  margin: 0 0 10px;
}
.chart .dw-chart-header p {
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  font-style: normal;
  text-decoration: none;
  margin: 5px 0 10px !important;
}
.chart .dw-chart-body.dark-bg .label span {
  color: #101010;
  fill: #101010;
}
.chart .dw-chart-body .bc-grid-line {
  border-left-style: solid;
}
.chart .dw-chart-body.content-below-chart {
  margin: 0px 0px 20px 0px;
}
.chart .labels text {
  font-size: 12px;
}
.chart .label {
  font-size: 12px;
}
.chart .label span,
.chart .label tspan {
  color: #101010;
  fill: #101010;
}
.chart .label.inverted span {
  text-shadow: 0 0px 2px #000000;
  color: #ffffff;
}
.chart .label.inside:not(.inverted) span {
  text-shadow: 0 0px 2px #ffffff;
  color: #333333;
}
.chart .label sup {
  text-shadow: none;
}
.chart .label.highlighted {
  font-weight: bold;
}
.chart .label.highlighted,
.chart .label .label.axis {
  font-size: 12px;
  z-index: 100;
}
.chart .label.hover {
  font-weight: bold;
}
.chart .label.smaller span {
  font-size: 80%;
}
.chart .dw-chart-notes {
  font-weight: normal;
  font-size: 12px;
  font-style: italic;
  text-decoration: none;
  margin: 0px 0px 5px 0px;
  position: relative;
}
.chart #footer,
.chart .dw-chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: normal;
  font-size: 11px;
  font-style: normal;
  text-decoration: none;
  color: #888;
}
.chart #footer > div >...

JavaScript

window.__locale = 'sv-SE';

    if (window.parent && window.parent.postMessage) {   window.parent.postMessage('datawrapper:vis:reload', '*');
    }

        (function() {
            dw.theme.register('ne', {"typography":{"chart":{"typeface":"Helvetica","color":"#101010","fontSize":12},"headline":{"fontSize":22,"fontWeight":"bold","underlined":0,"cursive":0},"description":{"fontSize":14,"lineHeight":17,"fontWeight":"normal","underlined":0,"cursive":0},"notes":{"fontSize":12,"fontWeight":"normal","underlined":0,"cursive":1},"footer":{"color":"#888","fontSize":11,"fontWeight":"normal","underlined":0,"cursive":0},"links":{"color":"#00509a","fontWeight":"bold","underlined":0,"cursive":0}},"colors":{"general":{"background":"transparent","padding":0},"palette":["#18bdd4","#000","#808080","#C0C0C0"]},"options":{"footer":{"logo":{"enabled":0,"height":30,"position":"right"},"getTheData":{"enabled":0,"caption":"Ladda ner data"},"embed":{"enabled":0,"caption":"B\u00e4dda in"},"staticImage":{"enabled":0,"caption":"Ladda ner bild"},"createdWithDatawrapper":0,"sourcePosition":"left","sourceCaption":"K\u00e4lla","chartCaption":"Grafik:","createdWithCaption":"Skapad med","mapCaption":"Karta:","tableCaption":"Tabell:","forkCaption":"Based on"}}});
        }).call(this);