chart = {
// const width=1587/2, height=1123/2
const width=900, height=500
const viewBoxWidth=500, viewBoxHeight=500
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr('viewBox', `${-viewBoxWidth/2} ${-viewBoxHeight/2} ${viewBoxWidth} ${viewBoxHeight}`)
.attr('style', 'background: #1E1225')
let rand = makeRandomGenerator(inputSeed);
// Every point is a trace.
let points = (new Array(lineCount)).fill(0).map(p => {
let x = (rand.random()-.5)*512
let y = (rand.random()-.5)*512
let z = (rand.random()-.5)*512
let source = new THREE.Vector3(x, y, z);
// trace of a point moving over time
let path = d3.path();
let d, norm, diff, target = source.clone();
for(let i = 0; i < stepsNumber; i++) {
d = distance(target);
if(Math.abs(d)<1e-10){
// we start tracing path only on the surface
console.log(path)
if(path['_'].length == 0)
path.moveTo(target.x, target.y);
else
path.lineTo(target.x, target.y);
let slide = new THREE.Vector3(0,0,0)
let simplex1 = new noise('001')
slide.x = simplex1.noise3D(target.x/noiseDetails, target.y/noiseDetails, target.z/noiseDetails)
let simplex2 = new noise('002')
slide.y = simplex2.noise3D(target.x/noiseDetails, target.y/noiseDetails, target.z/noiseDetails)
let simplex3 = new noise('003')
slide.z = simplex3.noise3D(target.x/noiseDetails, target.y/noiseDetails, target.z/noiseDetails)
slide.normalize().multiplyScalar(minSlide)
// let slide = norm.clone().applyAxisAngle(
// new THREE.Vector3(0,0,1),
// 3.1415/2
// ).multiplyScalar(slideDistance);
target.add(slide);
}
norm = normal(target).multiplyScalar(-1);
diff = norm.clone().multiplyScalar(d);
source = target.clone();
target.add(diff);
}
// the last point is to be traced yet
path.lineTo(target.x, target.y);
console.log(path)
return path;
})
// drawing traces
if (flags.includes('l')) {
svg.selectAll('path')
.data( points )
.enter()
.append('path')
.attr('d', p => p.toString())
.attr('stroke', '#FCE000')
.attr('fill', 'none')
.attr('stroke-width', 1.4);
}
// drawing points
if (flags.includes('d')) {
svg.selectAll('circle')
.data( points )
.enter()
.append('circle')
.attr('cx', p => p['_x0'])
.attr('cy', p => p['_y0'])
.attr('r', p => 2)
.attr('fill', p => '#FCE000');
}
return svg.node()
}
new noise('4').noise3D(10,10,.7)
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.
