JSFiddle - React, Tailwind, and code Playground

by armensg

HTML

<script src="https://googledrive.com/host/0B9OF6NedUmIxTzFDVjZCaGVJY1k/"></script>
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
 <div id="chart1" class="chart"></div>

CSS

body {
    font: 10px sans-serif;
}
rect {
    fill: #fff;
}
ul {
    list-style-type: none;
    margin: 0.5em 0em 0.5em 0em;
    width: 100%;
}
ul li {
    display: table-cell;
    vertical-align: middle;
    margin: 0em;
    padding: 0em 1em;
}
.axis {
    font-size: 1.5em;
}
.chart {
    background-color: #F7F2C5;
    width: 960px;
    height: 500px;
}
circle, .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1px;
}
circle {
    fill: white;
    fill-opacity: 0.2;
    cursor: move;
}
circle.selected {
    fill: #ff7f0e;
    stroke: #ff7f0e;
}
circle:hover {
    fill: #ff7f0e;
    stroke: #707f0e;
}
circle.selected:hover {
    fill: #ff7f0e;
    stroke: #ff7f0e;
}

JavaScript

graph = new SimpleGraph("chart1", {
    "xmax": 60,
        "xmin": 0,
        "ymax": 40,
        "ymin": 0,
        "title": "Simple Graph1",
        "xlabel": "X Axis",
        "ylabel": "Y Axis"
});