JSFiddle - React, Tailwind, and code Playground

by prayerslayer

HTML

<script src="http://141.76.68.74:8089/VizBoard/res/components/UI_SimileTimeline/lib/timeline.bundled.js"></script>
<link rel="stylesheet" href="http://141.76.68.74:8089/VizBoard/res/components/UI_SimileTimeline/lib/timeline.css">
<script src="http://141.76.68.74:8089/VizBoard/res/components/UI_SimileTimeline/lib/jquery.rdf.bundle.js"></script>
<div id="panel_timeline"></div>

JavaScript

var data, jsondata = {
    "http://mmt.inf.tu-dresden/vizBoard/SimileTimelineTestData#event3": {
        "http://mmt.inf.tu-dresden.de/models/domainmodels/vizBoardDataTypeExpressions#dvQuManTimelineStart": [
            {
                "value": "2013-09-06",
                "type": "literal",
                "datatype": "http://www.w3.org/2001/XMLSchema#date"
            }
        ],
        "http://mmt.inf.tu-dresden.de/models/domainmodels/vizBoardDataTypeExpressions#dvQuOptTimelineEnd": [
            {
                "value": "2013-09-02",
                "type": "literal",
                "datatype": "http://www.w3.org/2001/XMLSchema#date"
            }
        ],
        "http://www.w3.org/1999/02/22-rdf-syntax-ns#type": [
            {
                "value": "http://mmt.inf.tu-dresden.de/models/domainmodels/vizBoardDataTypeExpressions#eSimileTimeline",
                "type": "uri"
            }
        ],
        "http://mmt.inf.tu-dresden.de/models/domainmodels/vizBoardDataTypeExpressions#dvNomManTimelineTitle": [
            {
                "value": "another week",
                "type": "literal",
                "datatype": "http://www.w3.org/2001/XMLSchema#string"
            }
        ]
    },
    "http://mmt.inf.tu-dresden/vizBoard/SimileTimelineTestData#event2": {
        "http://mmt.inf.tu-dresden.de/models/domainmodels/vizBoardDataTypeExpressions#dvQuManTimelineStart": [
            {
                "value": "2013-09-02",
                "type": "literal",
                "datatype": "http://www.w3.org/2001/XMLSchema#date"
            }
        ],
        "http://mmt.inf.tu-dresden.de/models/domainmodels/vizBoardDataTypeExpressions#dvQuOptTimelineEnd": [
            {
                "value": "2013-08-26",
                "type": "literal",
                "datatype": "http://www.w3.org/2001/XMLSchema#date"
            }
        ],
        "http://www.w3.org/1999/02/22-rdf-syntax-ns#type": [
            {
                "value":...