JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<textarea id="input">
a,is for apple,61
b,is for banana,62
c,is for coconut,63
</textarea><button id="go">Go</button>

CSS

textarea {
    width: 500px;
    height: 100px;
    vertical-align: middle;
}

button {
    height: 100px;
    width: 100px;
}

table {
  border-collapse: collapse;
  border: 2px black solid;
  font: 12px Andale Mono, Lucida Console, fixed-width;
}

td {
  border: 1px black solid;
  padding: 5px;
}

JavaScript

document.getElementById("go").addEventListener("click", function() { 
    var v = document.getElementById("input").value;
    var parsedCSV = d3.csv.parseRows(v);
    var container = d3.select("body").append("table")
        .selectAll("tr")
        .data(parsedCSV).enter()
        .append("tr")
        .selectAll("td")
        .data(function(d) { return d; }).enter()
        .append("td")
        .text(function(d) { return d; });
});