Published
Edited
Nov 23, 2021
timeScale = d3
.scaleTime()
.domain([
new Date(Date.UTC(2021, 10, 17, 0, 0, 0)),
new Date(Date.UTC(2021, 10, 17, 23, 59, 59))
])
.range([0 - Math.PI / 2, turns - Math.PI / 2])
radiusScale = d3
.scaleLinear()
.domain([0, 1])
.range([spiralInnerRadius, spiralOuterRadius])
categories = Array.from(new Set(sortedTimeData.map((d) => d.category))).sort()
categoryCount = categories.length
categoryScale = d3
.scaleOrdinal()
.domain(categories)
.range(
d3
.range(0, finalStaveOffset, finalStaveOffset / (categoryCount - 1))
.concat(finalStaveOffset)
)
spiralCoordinates = categories.map((cat) =>
d3
.range(spiralResolution)
.concat(spiralResolution)
.map((d, i) => ({
angle: d3.scaleLinear().domain([0, spiralResolution]).range([0, turns])(
i
),
radius: radiusScale(i / spiralResolution) + categoryScale(cat)
}))
)
spiralGen = d3
.lineRadial()
.angle((d) => d.angle)
.radius((d) => d.radius)
.curve(d3.curveCatmullRomOpen)
noteCoordinates = sortedTimeData.map((d) => ({
startAngle: timeScale(d.start),
startRadius: radiusScale(d.startParameter),
endAngle: timeScale(d.end),
endRadius: radiusScale(d.endParameter),
offset: categoryScale(d.category),
category: d.category,
timing: d
}))
noteArcs = noteCoordinates
.map((d) => {
return {
timing: d.timing,
category: d.category,
angles: d3.range(
d.startAngle + Math.PI / 2,
d.endAngle + Math.PI / 2,
(d.endAngle - d.startAngle) / arcResolution
),
radii: d3.range(
d.startRadius + d.offset,
d.endRadius + d.offset,
(d.endRadius + d.offset - (d.startRadius + d.offset)) / arcResolution
)
};
})
.map((e, i) =>
e.angles.map((f, j) => ({
timing: e.timing,
category: e.category,
angle: f,
radius: e.radii[j]
}))
)
barCoordinates = {
return d3
.range(0, turns, turns / 100)
.concat([turns])
.map((angle, angleIndex) => {
return spiralGen(
d3
.range(0, finalStaveOffset, finalStaveOffset / 100)
.concat(finalStaveOffset)
.map((offset) => ({
angle: angle,
radius: radiusScale(angleIndex / 100) + offset
}))
);
});
}
timeSoundSpiral = {
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.selectAll(".bars")
.data(barCoordinates)
.enter()
.append("path")
.attr("d", (d, i) => d)
.attr("stroke-width", 1)
.attr("fill", "none")
.attr("stroke", "black")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg
.selectAll(".staves")
.data(spiralCoordinates)
.enter()
.append("path")
.attr("d", (d) => spiralGen(d))
.attr("stroke", (d, i) => d3.interpolatePlasma(i / categoryCount))
.attr("stroke-width", staveStrokeWidth)
.attr("fill", "none")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg
.selectAll(".notes")
.data(noteArcs)
.enter()
.append("path")
.attr("d", (d) => spiralGen(d))
.attr("stroke", (d) => d3.interpolatePlasma(d[0].category / categoryCount))
.attr("stroke-width", noteStrokeWidth)
.attr("fill", "none")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.on("mouseover", (e, d) => {
d3.select("#tooltip")
.transition()
.attr("opacity", 1)
.attr("transform", "translate(" + e.offsetX + "," + e.offsetY + ")");
d3.select("#tooltipText").text(
d[0].timing.start.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit"
}) +
" => " +
d[0].timing.end.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit"
}) +
" | " +
d[0].category
);
})
.on("mouseout", (e, d) => {
d3.select("#tooltip").transition().attr("opacity", 0);
});
const g = svg
.append("g")
.attr("id", "tooltip")
.attr("pointer-events", "none")
.attr("opacity", 0)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
g.append("rect")
.attr("x", -100)
.attr("y", -15)
.attr("width", 200)
.attr("height", 30)
.attr("stroke", "orange")
.attr("fill", "white");
g.append("text")
.text("")
.attr("id", "tooltipText")
.attr("font-family", "courier")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle");
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.
