JSFiddle - React, Tailwind, and code Playground

by vitorbaptista

HTML

<link rel="stylesheet" href="http://openspending.org/static/style/bootstrap.css">
<script src="https://github.com/openspending/openspendingjs/raw/feature/time-series/lib/vendor/yepnope.min.js"></script>
<script src="https://github.com/openspending/openspendingjs/raw/feature/time-series/widgets/timeseries/main.js"></script>
<script src="https://github.com/openspending/openspendingjs/raw/feature/time-series/widgets/timeseries/js/d3.layout.min.js"></script>
<script src="https://github.com/openspending/openspendingjs/raw/feature/time-series/widgets/timeseries/js/d3.min.js"></script>
<script src="https://github.com/openspending/openspendingjs/raw/feature/time-series/widgets/timeseries/js/rickshaw.min.js"></script>
<link rel="stylesheet" href="https://github.com/openspending/openspendingjs/raw/feature/time-series/widgets/timeseries/css/rickshaw.min.css">
<link rel="stylesheet" href="https://github.com/openspending/openspendingjs/raw/feature/time-series/widgets/timeseries/css/timeseries.css">
<div id="widget"></div>

CSS

body, html, #widget {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

JavaScript

var context = {
    dataset: "eu-budget-mff",
    siteUrl: "http://openspending.org"
};
var state = {
    "drilldowns": [
        "main-programme",
        "programme",
        "sub-programme"],
    "cuts": {},
    "year": 2020
};

OpenSpending.scriptRoot = "http://openspending.org/static/openspendingjs";
new OpenSpending.Timeseries($('#widget'), context, state);