JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<div id="top"></div>
<input name="new-name" value="" placeholder="Enter a name"></input>
<button>change data</button>

CSS

.person {
    padding: 10px;
}

.person .person {
    color: red;
}

JavaScript

var data = [{
    name: "doug"
}, {
    name: "tony"
}, {
    name: "chris"
}];

function identity (m) {
    return m.name;
}

var top = d3.select('#top').append('div').attr({class: 'people'});
var i = 0;

function paint (m) {
    this.append('div')
    .attr({
        class: 'person'
    })
    .text(function (m) {
        return m.name + Math.random();
    });
    this.append('div').text(function (m) {
        return m.seed;
    });
}

function createUI() {
    var selection = top.selectAll('div.person').data(data, identity)
    selection.enter().call(paint);
    selection.exit().remove();
}

function updateUI() {
    var selection = top.selectAll('div.person').data(data, identity)
    selection.call(paint);
    selection.exit().remove();
}

d3.select('button').on('click', function () {
    data[1].seed = Math.random();
    updateUI();
});

d3.select('input').on('change', function () {
    var val = this.value;
    console.log(val);
    data.push({
        name: val,
        seed: Math.random()
    });
    updateUI();
});

createUI();