chart2 = {
const colorScale = d3.scaleOrdinal()
.range(yLabel.map(d => d[1]))
.domain(yLabel.map(d => d[0]))
.unknown("#d4d4d4")
const margins = {right: 10, left: 40, top: 30, bottom:10}
const width = 1800
const height = 1200
const barHeight = 0.3
const usedData = data
const y = d3.scalePoint(usedData.map(d => d[""]),
[0, barHeight * (usedData.length) - margins.bottom])
const x = d3.scaleLinear()
.domain([0, data.row.length -1 ])
.range([ 0, (data.row.length - 1) * 85])
const xAxis = g => g
.attr("transform", `translate(${margins.left + 33}, ${margins.top - 3})`)
.call(d3.axisTop(x)
.ticks(8)
)
.call(g => g.select(".domain").remove())
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, barHeight * usedData.length + margins.bottom + margins.top ]);
svg.append("g")
.call(xAxis)
const seq = svg.append("g")
.attr("transform", `translate(${margins.left}, ${margins.top})` )
.selectAll("g")
.data(usedData) //
.join("g")
.attr("transform", (d,i) => `translate(0, ${d.y = y(d[""])}) `)
.attr("cluster", d => d["pov.om.pam.factor"])
const paths = seq.selectAll("rect")
.data( function(d,i){ return data.row.map(x => [d[x], d["data$migback"],x, d.ch ] )} )
.join("rect")
.attr("width", 85)
.attr("height", barHeight)
.style("fill", d => /*d[1] == "1" ?*/ colorScale(d[0]) /*: 'lightgrey' */)
.attr("x", (d,i) => d.x = x(i))
.attr("y", 0)
const legend = svg.append("g")
.selectAll("rect")
.data(yLabel)
.join("rect")
.attr("x", (d,i) => i * 12)
.attr("y", 0)
.attr("width", 10)
.attr("height", 10)
.style("fill", d => colorScale(d[0]))
function update() {
y.domain(usedData.sort(viewof order.value).map(d => d[""]));
const t = svg.transition()
.duration(750);
seq.transition(t)
.delay((d,i) => i * 2)
.attrTween("transform", d => {
const i = d3.interpolateNumber(d.y, y(d[""]));
return t => `translate(${0}, ${d.y = i(t)})`;}
);
};
function updateX(){ //linear transformation only
x.domain([d3.min(usedData.map(d => d.ch)), d3.max(usedData.map(d => d.ch)) + data.row.length ])
.range([ 0, (data.row.length + 10) * 85])
const t = svg.transition()
.duration(1150);
seq.each(function(d,i){
d3.select(this)
.selectAll("rect")
.transition(t)
.delay((d,i) => i * 500)
.attrTween("x", (d,i) => {
const j = d3.interpolateNumber(d.x, x(d[3] + i) );
return t => `${d.x = j(t)}`;}
)
});
/*
paths.transition(t)
.delay((d,i) => i * 2)
.attrTween("x", (d,i) => {
const j = d3.interpolateNumber(d.x, x(d[3] + i) );
return t => `${d.x = i(t)}`;}
) */
}
viewof order.addEventListener("input", update);
invalidation.then(() => viewof order.removeEventListener("input", update));
viewof sortX.addEventListener("click",updateX);
return svg.node();
}