JSFiddle - React, Tailwind, and code Playground
JavaScript
var colors = d3.scale.category10().domain([1951, 1963]);
var data = [
["1951", "306", "27", "159", "34", "82", "4"],
["1956", "426", "41", "203", "47", "119", "16"]
];
d3.select("body")
.append("svg")
.attr("width", 1000)
.attr("height", 1000)
.selectAll("g")
.data(data)
.enter()
.append("g")
.selectAll("circle")
.data(function(d) {
var year = +d[0];
return d.slice(1).map(function(value) {
return {
year: year,
value: +value
};
});
})
.enter()
.append("circle")
.attr("r", 2)
.attr("cx", function(d) {
return d.value;
})
.attr("cy", function(d) {
return d.value;
})
.attr("fill", function(d) {
return colors(d.year);
});