Public
Edited
Oct 14, 2023
md`# Spotify gradient rectangles`
d3 = require("d3@5")
sampleConfusionMatrix = ({'a': 27.90425, 'b': 23.76380, 'c': 21.62339, 'd': 33.88469, 'e': 17.29599, 'f': 23.78580, 'g': 22.34275,
'h': 23.80282, 'i': 23.06920, 'j': 25.99837, 'k':8.63565 })
sampleConfusionMatrix2 = ({'a': 8.95312, 'b': 27.23146, 'c': 20.00114, 'd': 16.10539, 'e': 52.41090, 'f': 15.54930,
'g': 36.29443, 'h': 24.89426})
sampleConfusionMatrix3 = ({'a': 5.08788, 'b': 16.09519, 'c': 50.29677, 'd': 16.66469, 'e': 15.64690, 'f': 35.05347, 'g': 27.41026, 'h': 12.91865, 'i': 49.63565, 'j': 8.89791, 'k': 14.91197, 'l': 29.47611, 'm':16.80384})
sampleConfusionMatrix4 = ({'a': 21.69614, 'b': 18.49098, 'c': 10.55873, 'd': 28.98307, 'e': 40.89560, 'f': 12.97554, 'g': 68.12591, 'h': 19.22070, })
sampleConfusionMatrix5 = ({'a': 8.25622, 'b': 59.35445, 'c': 13.41176, 'd': 16.45202, 'e': 18.20047, 'f': 23.82125, 'g': 51.54749,
'h': 26.42437, 'i':5.17197})
{
const width = 500,
height = 700,
margin = {top: 5, bottom: 5, left: 5, right: 5}
const xScale = d3.scaleLinear()
.domain([0, 252.1067])
.range([0, width])
const xScale2 = d3.scaleLinear()
.domain([0, 201.44])
.range([0, width])
const xScale3 = d3.scaleLinear()
.domain([0, 298.8993])
.range([0, width])
const xScale4 = d3.scaleLinear()
.domain([0, 220.9467])
.range([0, width])
const xScale5 = d3.scaleLinear()
.domain([0, 222.64
])
.range([0, width])
// const xScale5 = d3.scaleLinear()
// .domain([0, 183.6243])
// .range([0, width])
const stack = d3.stack()
.keys(['a','b','c','d', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n'])
// .order(d3.stackOrderNone)
// .offset(d3.stackOffsetNone);
const series = stack([sampleConfusionMatrix]);
const series2 = stack([sampleConfusionMatrix2]);
const series3 = stack([sampleConfusionMatrix3]);
const series4 = stack([sampleConfusionMatrix4]);
const series5 = stack([sampleConfusionMatrix5]);
const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom))
// const g = svg.append("g").attr("transform",`translate(${margin.left}, ${margin.top})`)
var g = svg.selectAll(".rect")
.data(series)
.enter()
.append("g")
.classed('rect', true)
g.selectAll("rect")
.data(series)
.enter().append("rect")
.attr("width", d => { console.log(d[0][1] - d[0][0]); return xScale(d[0][1] - d[0][0]) })
.attr("height", 140)
.attr("x", (d, i) => xScale(d[0][0]))
.style("fill", d => d.key == 'a' || d.key == 'b' ? 'orange' : 'steelblue')
.style("stroke","#fff")
.style("stroke-width", 5)
g.append("rect")
.data(series2)
.attr("width", d => { console.log(d[0][1] - d[0][0]); return xScale2(d[0][1] - d[0][0]) })
.attr("height", 140)
.attr("y", 140)
.attr("x", (d, i) => xScale2(d[0][0]))
.style("fill", d => d.key == 'a' || d.key == 'b' ? 'red' : 'green')
.style("stroke","#fff")
.style("stroke-width", 5)
g.append("rect")
.data(series3)
.attr("width", d => { console.log(d[0][1] - d[0][0]); return xScale3(d[0][1] - d[0][0]) })
.attr("height", 140)
.attr("y", 280)
.attr("x", (d, i) => xScale3(d[0][0]))
.style("fill", d => d.key == 'a' || d.key == 'b' ? 'purple' : 'black')
.style("stroke","#fff")
.style("stroke-width", 5)
g.append("rect")
.data(series4)
.attr("width", d => { console.log(d[0][1] - d[0][0]); return xScale4(d[0][1] - d[0][0]) })
.attr("height", 140)
.attr("y", 420)
.attr("x", (d, i) => xScale4(d[0][0]))
.style("fill", d => d.key == 'a' || d.key == 'b' ? 'red' : 'green')
.style("stroke","#fff")
.style("stroke-width", 5)
g.append("rect")
.data(series5)
.attr("width", d => { console.log(d[0][1] - d[0][0]); return xScale5(d[0][1] - d[0][0]) })
.attr("height", 140)
.attr("y", 560)
.attr("x", (d, i) => xScale5(d[0][0]))
.style("fill", d => d.key == 'a' || d.key == 'b' ? 'green' : 'blue')
.style("stroke","#fff")
.style("stroke-width", 5)
return svg.node()
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
