Passionate about viz & systems thinking. Stanford CS 2017
function getX(theta) {
return a*Math.cos(alpha)*Math.cos(theta) - b*Math.sin(alpha)*Math.sin(theta)
}
function getY(theta) {
return b*Math.cos(alpha)*Math.sin(theta) + a*Math.sin(alpha)*Math.cos(theta) - translateY
}
viewof theta = Inputs.range([0, 100], {label: "theta", step: 1})
translateY = Math.sqrt(a**2 * Math.sin(alpha)**2 + b**2 * Math.cos(alpha)**2)
mutable alpha = 0
rotate = {
var t = 0;
while (true) {
t += .005;
mutable alpha = (t * 2 * Math.PI) % (2 * Math.PI);
yield mutable alpha;
}
}
points = [0, Math.PI / 2, Math.PI, (3/2) * Math.PI, 2 * Math.PI].map(theta => [getX(theta), getY(theta)])
morePoints = d3.range(0, Math.PI * 2, .1).map(theta => [getX(theta), getY(theta)])
viewof a = Inputs.range([0, 100], {label: "a", step: 1})
viewof b = Inputs.range([0, 100], {label: "b", step: 1})
<svg width="500" height="300">
<g>
<line x1="0" x2="0" y1="-150" y2="150"/>
<line x1="-250" x2="250" y1="0" y2="0"/>
<!-- ${morePoints.map(([x, y]) =>
svg`<circle r="2" cx="${x}" cy="${y}"/>`
)} -->
${points.map(([x, y]) =>
svg`<circle class="sound" r="5" cx="${x}" cy="${y}"/>`
)}
</g>
</svg>
<style>
svg {
background: #fcf3f2;
}
g {
transform: translate(50%, 50%);
}
circle {
fill: black;
}
circle.sound {
fill: red;
}
line {
stroke: black;
stroke-width: 2px;
}
</style>
d3 = require("d3@5", "d3-array@2")
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.
