circle = {
var svg = d3.select(DOM.svg(width, height))
.attr("width", width+"px")
.attr("height", height+"px")
// I added this to convert the value of zero2pi to the original around the circle
// pi = d3.range(200).map(d=>(d/100)*Math.PI+((3/2)*Math.PI))
const aroundTheCircle = zero2pi*2 + ((3/2)*Math.PI)
//pointer
svg.append("line")
.attr("x1", (d,i)=>(Math.sin(aroundTheCircle + Math.PI / 2)*radius)+width/5)
.attr("y1", (d,i)=>(Math.cos(aroundTheCircle + Math.PI / 2)*radius)+height/2)
.attr("x2", 0)
.attr("y2", 0)
.attr("style","stroke:black;stroke-width:4")
//.attr("marker-end","url(#arrowhead)")
//sine wave
svg.append("path")
.attr("d",d3.line().x(d => x1(d.x)).y(d => y1(d.y))(sine1))
.attr("stroke","blue")
.attr("stroke-width","4")
.attr("fill","none")
// because sine1 is created from pi_array, we can match them up when they are equal
svg.selectAll("circle.points").data(sine1).enter().append("circle")
.attr("class","points")
.attr("cx",d=>x1(d.x))
.attr("cy",d=>y1(d.y))
.attr("r",5)
.style("opacity",d=>(d.x==zero2pi) ? 1 : .2)
//red circle
svg.append("circle")
.attr("cx", width/5)
.attr("cy", height/2)
.attr("r", radius)
.attr("stroke","red")
.attr("stroke-width",4)
.style("fill-opacity",0)
//red radius
svg.append("line")
.attr("x1", (Math.sin(aroundTheCircle + Math.PI / 2)*radius)+width/5)
.attr("y1", (Math.cos(aroundTheCircle + Math.PI / 2)*radius)+height/2)
.attr("x2", width/5)
.attr("y2", height/2)
.style("stroke-width", 4)
.style("stroke","red")
yield svg.node();
}
sine1 = {
var data = []
pi_array.forEach(d=>data.push({x:d,y:(4*Math.sin(d))/Math.PI}))
return data
}
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.
