d3.js:tsv

code:test.css

.circleGroups text {

font: 10px sans-serif;

}

.title {

font: 20px sans-serif;

}

.axis .tick {

stroke-dasharray: 1;

stroke-opacity: .5;

}

code:test.js

var margin = {top: 20, right: 10, bottom: 40, left: 40};

var width = 400 - margin.left - margin.right,

height = 400 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scaleLinear()

var yScale = d3.scaleLinear()

var xAxis = d3.axisBottom(xScale)

.tickSize(-height);

var yAxis = d3.axisLeft(yScale)

.tickSize(-width);

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

svg.append("g")

.attr("class", "x axis")

.attr("transform","translate(0," + height + ")")

.call(xAxis)

var colorScale = d3.scaleSequential(d3.interpolateRainbow);

function dataSwap(datasetGroup) {

thisDataGroup = data.filter(function(d) { return d.group == datasetGroup })

thisDataGroup.sort(function(a, b) { return a.x - b.x });

svg.selectAll(".circleGroups")

.data(thisDataGroup)

.transition()

.delay(function(d, i) { return i*40; })

.attr("transform",function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")" })

svg.selectAll(".circleGroups")

.select("circle")

.transition()

.delay(function(d, i) { return i*40; })

.style("fill", function(d, i) { return colorScale(i); })

d3.select(".title")

.text("Group " + datasetGroup)

}

//d3.tsv("quartet.tsv")

.then(function(data) {

console.log(data);

window.data = data;

var groups = d3.set(data.map(function(d) { return d.group })).values();

d3.select(".buttons")

.selectAll("button")

.data(groups)

.enter().append("button")

.text(function(d) { return "Group " + d; })

.on("click", function(d) {

dataSwap(d);

})

groupFourData = data.filter(function(d) { return d.group == "IV" })

groupFourData.sort(function(a, b) { return a.x - b.x });

svg.append("text")

.attr("class", "title")

.attr("dy", -5)

var circleGroups = svg.selectAll(".circleGroups")

.data(groupFourData)

.enter().append("g")

.attr("class", "circleGroups")

.attr("transform",function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")" })

.on("mouseenter", function(d) {

d3.select(this)

.append("text")

.attr("dx", 5)

.attr("dy", 10)

.text("(" + d.x + "," + d.y + ")")

d3.selectAll("circle")

.style("fill-opacity", .5);

d3.select(this)

.select("circle")

.transition()

.ease(d3.easeElastic)

.attr("r", 20)

.style("fill-opacity", 1);

})

.on("mouseleave", function(d) {

d3.select(this)

.select("text")

.transition()

.style("opacity", 0)

.transition()

.remove();

d3.select(this)

.select("circle")

.transition()

.ease(d3.easeElastic)

.attr("r", 10)

d3.selectAll("circle")

.style("fill-opacity", 1);

})

var radiusSize = 10;

circleGroups.append("circle")

.attr("r", radiusSize)

.style("fill", function(d, i) { return colorScale(i); })

})

code:quartet.tsv

group x y

I 10 8.04

I 8 6.95

I 13 7.58

I 9 8.81

I 11 8.33

I 14 9.96

I 6 7.24

I 4 4.26

I 12 10.84

I 7 4.82

I 5 5.68

II 10 9.14

II 8 8.14

II 13 8.74

II 9 8.77

II 11 9.26

II 14 8.1

II 6 6.13

II 4 3.1

II 12 9.13

II 7 7.26

II 5 4.74

III 10 7.46

III 8 6.77

III 13 12.74

III 9 7.11

III 11 7.81

III 14 8.84

III 6 6.08

III 4 5.39

III 12 8.15

III 7 6.42

III 5 5.73

IV 8 6.58

IV 8 5.76

IV 8 7.71

IV 8 8.84

IV 8 8.47

IV 8 7.04

IV 8 5.25

IV 19 12.5

IV 8 5.56

IV 8 7.91

IV 8 6.89

https://img.shields.io/badge/D3.js-tsv-F9A03C.svg?logo=D3.js&style=for-the-badge