JSFiddle - React, Tailwind, and code Playground

by Shawn Allen

HTML

<ul id="groceries"></ul>

JavaScript

var list = d3.select("#groceries");

var groceries = [
    {name: "cheese", color: "yellow"},
    {name: "bread", color: "#c93"},
    {name: "salami", color: "red"},
    {name: "broccoli", color: "green"}
];

console.log(list.datum());

for (var i = 0; i < groceries.length; i++) {
  var item = list.append("li")
      .datum(groceries[i]);
}

list.selectAll("li")
      .text(function(data, i) {
          return data.name;
      })
      .style("color", function(data) {
          return data.color;
      });