JAVASCRIPT

append new element for each value in array d3.js

var data = [
    ["colours", "green", "blue"],
    ["shapes", "square", "triangle"],
    ["languages", "javascript", "c++"]
];

var svg = d3.select("body")
    .append("svg")
    .attr("width", 500)
    .attr("height", 200);

var groups = svg.selectAll("groups")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", (d, i) => "translate(" + (50 + i * 100) + ",0)");

var texts = groups.selectAll("texts")
    .data(d => d)
    .enter()
    .append("text")
    .attr("y", (d, i) => 10 + i * 20)
    .text(d => d);