Published
Edited
Nov 2, 2021
Example Posture Data Visualization
postureData = d3.range(100).map((d, i) => [
{ place: "top", value: 0.5 + Math.random() * 0.25, time: i },
{ place: "middle", value: 0.2 + Math.random() * 0.15, time: i },
{ place: "bottom", value: 0.05 + Math.random() * 0.15, time: i }
])
margin = 30
width = 400
height = 600
yScale = d3
.scaleOrdinal()
.domain(["top", "middle", "bottom"])
.range([margin, height / 2, height - margin])
xScale = d3
.scaleLinear()
.domain([0, 1])
.range([margin, width - margin])
lineGen = d3
.line()
.y((d) => yScale(d.place))
.x((d) => xScale(d.value))
.curve(d3.curveCatmullRom)
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#334");
const g = svg.append("g");
g.selectAll(".postureLines")
.data(postureData)
.enter()
.append("path")
.attr("d", (d) => lineGen(d))
.attr("stroke-width", 1)
.attr("stroke", (d) =>
d3.interpolateViridis(
d3.scaleLinear().domain([0, 0.5])(d[0].value - d[1].value)
)
)
.attr("fill", "none")
.attr("opacity", 0.25)
.on("mouseover", (e, d) =>
d3
.select(e.target)
.raise()
.transition()
.attr("opacity", 1)
.attr("stroke-width", 2)
)
.on("mouseout", (e, d) =>
d3
.select(e.target)
.lower()
.transition()
.attr("opacity", 0.25)
.attr("stroke-width", 1)
);
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.
