JSFiddle - React, Tailwind, and code Playground

by tokestermw

HTML

<h4>a table</h4>
<div id="table"></div>
<h4>a graph</h4>
<div id="lines"></div>

CSS

.line {
    fill: none;
    stroke: #000;
    stroke-width: 1.0px;
}

JavaScript

var columns = ['Fruit', 'Color', 'Lines']

var data = [
    ['Orange', 'Orange', [6,3,3,2,5]],
    ['Apple', 'Red', [6,2,6,5,5]],
    ['Grape', 'Purple', [9,1,2,3,1]]
]

// create table
var table = d3.select("#table").append("table");

var thead = table.append("thead").append("tr");

thead.selectAll("th")
    .data(columns)
    .enter()
    .append("th")
    .text(function(d) {
        return d;
    });

var tbody = table.append("tbody");

var trows = tbody
    .selectAll("tr")
    .data(data)
    .enter()
    .append("tr");

var tcells = trows
    .selectAll("td")
    .data(function(d, i) { return d; })
    .enter()
    .append("td")
    .text(function(d, i) { return d; });

// a sparklines plot
var width = 100, height = 20;

lines = function(test) {    

    var data = []
    for (i = 0; i < test.length; i++) {
        data[i] = {
            'x': i,
            'y': test[i]
        }
    }
    
    var x = d3.scale.linear()
        .range([0, width - 10])
        .domain([0,5]);
    
    var y = d3.scale.linear()
        .range([height, 0])
        .domain([0,10]);
    
    var line = d3.svg.line()
                .x(function(d) {return x(d.x)})
                .y(function(d) {return y(d.y)});

    // static selection works
    var svg = d3.select("#lines").append('svg')
        .attr('width', width).attr('height', height)

    var path = svg.append('path').attr('class','line')
        .datum(data)
        .attr('d', line)
    
    // dynamic selection doesn't
    this.append("td").append('svg')
        .attr('width', width).attr('height', height)
        .append('path').attr('class','line')
        .datum(data).attr('d', line);

}

// update (add a column with graphs)
thead.append("th").text('Graphs');

// here's where i have a problem 
// how to dynamically add graphs given the data
trows.selectAll("td")
    .data(function(d) {return d[2]})
    .enter()
    .call(lines([3,8,2,5,8,4])); // this works
    //.call(lines);                // this doesn't