JSFiddle - React, Tailwind, and code Playground

by jhbabon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.6.1/plottable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.11.0/plottable.min.js"></script>
<svg id="example"></svg>

CSS

#example {
    width: 300px;
    height: 300px;
}

JavaScript

d3.csv("https://raw.githubusercontent.com/karolinkas/CoLearningDatavis/master/data/nasa-near-earth-comets.csv").
get(function (error, rows) {
    var i = 0;
    var data = rows.map(function (r) {
        var m = d3.map({
            "name": r["Object"],
            "q": r["q (AU)"],
            "Q": r["Q (AU)"],
            "i": i
        });
        i = i + 1;
        
        return m;
    });

    data.forEach(function (element, _index, _array) {
        console.log(element.get("name") + " - " + element.get("q") + " - " + element.get("Q"));
    });

    var xScale = new Plottable.Scales.Linear();
    var yScale = new Plottable.Scales.Category();

    var plot = new Plottable.Plots.Scatter()
        .addDataset(new Plottable.Dataset(data))
        .x(function (d) { return new Number(d.get("Q")); }, xScale)
        .y(function (d) { return d.get("name"); }, yScale)
        .renderTo("svg#example");
});