chart = {
const svg = d3.create("svg")
.attr("height", 512)
.attr("width", 512)
.attr('viewBox', "-256 -256 512 512")
.attr('style', 'background: #25321E')
// every point contains trace
let points = (new Array(10000)).fill(0).map(p => {
let n, d, dd
let x = (Math.random()-.5)*512
let y = (Math.random()-.5)*512
let z = (Math.random()-.5)*512
let begin = {
'x': x,
'y': y,
'z': z,
}
let end = begin
for (let i = 0; i < 100; i++) {
// begin = end
n = normal(end)
n = invert(n)
d = sdCircle(end)
end = add(end,mult(n, d*.5))
// console.log(sdCircle(end))
}
return [begin, end]
})
console.log(points)
svg.selectAll('line')
.data( points )
.enter()
.append('line')
.attr('x1', p => p[0].x)
.attr('y1', p => p[0].y)
.attr('x2', p => p[1].x)
.attr('y2', p => p[1].y)
.attr('stroke', p => sdCircle(p[0]) > 0 ? '#00A1BC' : '#FCE000')
.attr('stroke-width', 1.)
svg.selectAll('circle')
.data( points )
.enter()
.append('circle')
.attr('cx', p => p[1].x)
.attr('cy', p => p[1].y)
.attr('r', p => 2)
.attr('fill', p => sdCircle(p[0]) > 0 ? '#00A1BC' : '#FCE000')
return svg.node()
}
normal({x:1, y:1, z:1})
// vec3 getNormal(vec3 p) {
// vec2 e = vec2(EPSILON, 0.);
// vec3 n_ = getDist(p).x - vec3(getDist(p - e.xyy).x,
// getDist(p - e.yxy).x,
// getDist(p - e.yyx).x);
// return normalize(n_);
// }
normal = p => {
let n = sub(sdCircle(p),
{
x: sdCircle(sub(p, {x:.1, y:.0, z:.0,})),
y: sdCircle(sub(p, {x:.0, y:.1, z:.0,})),
z: sdCircle(sub(p, {x:.1, y:.0, z:.0,})),
})
n = normalize(n)
return n
}
normalize = p => {
return mult(p, 1/len(p))
}
invert = p => {
return {x: -p.x, y: -p.y, z: -p.z, }
}
sdCircle = p => {
return len(p)-200
}
len = p => {
return Math.sqrt(p.x*p.x + p.y*p.y + p.z*p.z)
}
sub = (a, b) => {
if (typeof a === 'object')
if (typeof b === 'object')
return {x: a.x-b.x, y: a.y-b.y, z: a.z-b.z}
else
return {x: a.x-b, y: a.y-b, z: a.z-b}
else
if (typeof b === 'object')
return {x: a-b.x, y: a-b.y, z: a-b.z}
else
return a-b
}
add = (a, b) => {
return {x: a.x+b.x, y: a.y+b.y, z: a.z+b.z}
}
mult = (a, b) => {
if (typeof a === 'object')
if (typeof b === 'object')
return {x: a.x*b.x, y: a.y*b.y, z: a.z*b.z}
else
return {x: a.x*b, y: a.y*b, z: a.z*b}
else
if (typeof b === 'object')
return {x: a*b.x, y: a*b.y, z: a*b.z}
else
return a*b
}
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.
