function display(angle,width) {
const radius = Math.min(width, height) / 2 - 20,
arcOffset = pi / 2,
arcGen = d3.arc()
.innerRadius(0)
.outerRadius(radius - 3)
.startAngle(arcOffset);
const rad=Math.min(width, height);
const svg = d3.select(DOM.svg(rad, rad))
.attr('viewBox',`-${rad / 2} -${rad / 2} ${rad} ${rad}`);
const axis = svg.append('g')
.attr('transform', `scale(1, -1)`);
const arc = axis.append("path")
.attr("fill", '#f2f4f6');
const ticks = axis.append('g')
.selectAll('g')
.data(d3.range(0, 360, 1))
.enter().append('g')
.attr('transform', d => `rotate(${d}) scale(1, -1)`)
.append('line')
.attr('x2', radius);
axis.append('g')
.attr('text-anchor', 'middle')
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.selectAll('g')
.data(d3.range(0, 360, 30))
.enter().append('g')
.attr('transform', d => `rotate(${d - 90}) translate(0, ${radius}) scale(1, -1)`)
.append('text')
.attr("dy", d => d > 180 ? 16 : -6)
.attr('transform', d => `rotate(${d > 180 ? 180 : 0})`)
.text(d => `${d}°`);
axis.append('circle')
.attr('r', 2)
.attr('fill', 'black');
axis.append('circle')
.attr('r', radius)
.attr("cursor", "move")
.attr('fill', 'transparent')
.call(d3.drag()
.on('drag', drag));
function drag() {
const x = -d3.event.x;
const y = -d3.event.y;
angle.rad = Math.atan2(y, x) + pi;
}
function update() {
const degrees = Math.round(angle.deg);
ticks
.attr('x1', tick => tick === degrees ? radius - 20 : tick % 30 ? radius - 3 : radius - 10)
.attr('stroke', tick => tick === degrees || tick === 0 && degrees > 359.5 ? 'red' : 'black');
arc.attr('d', arcGen.endAngle(deg2rad(degrees) + arcOffset));
}
update();
angle.addEventListener("input", update);
return Generators.disposable(svg.node(), () => {
angle.removeEventListener("input", update);
});
}
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.
