Public
Edited
May 9, 2023
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
do_it = d3
.select(membrane)
.select('transform')
.attr('scale', `1 1 ${Math.sin(now / 250) / 2}`)
Insert cell
x3d_files = [
FileAttachment("KochScene1.x3d"),
FileAttachment("KochScene2.x3d"),
FileAttachment("KochScene3.x3d"),
FileAttachment("KochScene4.x3d"),
FileAttachment("KochScene5.x3d"),
FileAttachment("KochScene6.x3d"),
FileAttachment("KochScene7.x3d"),
FileAttachment("KochScene8.x3d"),
FileAttachment("KochScene9.x3d"),
FileAttachment("KochScene10.x3d"),
FileAttachment("KochScene11.x3d"),
FileAttachment("KochScene12.x3d"),
FileAttachment("KochScene13.x3d")
]
Insert cell
import { select } from "@jashkenas/inputs"
Insert cell
x3dom = require('x3dom').catch(() => window['x3dom'])
Insert cell
d3 = require('d3-selection@2', 'd3-array@2')
Insert cell
html`<style>
canvas {
outline: none
}
</style>`
Insert cell
little = x3d_files[5].text()
Insert cell
little_membrane = {
let interval_id;
let html_x3d = d3
.create('div')
.style('width', `${0.25 * width}px`)
.style('height', `${250}px`)
.html(little);
html_x3d
.select('x3d')
.attr('width', 0.25 * width)
.attr('height', '250px')
.select('viewpoint')
.attr('position', '-1.61620 -2.52883 1.97864')
.attr('orientation', '0.85616 -0.25828 -0.44753 1.06637')
.attr('zNear', null)
.attr('zFar', null);
html_x3d
.select('x3d')
.select('transform')
.attr('scale', '1 1 0.6');
html_x3d
.on('mouseenter', function() {
let T = Date.now();
interval_id = setInterval(function() {
let t = (Date.now() - T) / 200;
html_x3d.select('transform').attr('scale', `1 1 ${Math.sin(t) * 0.6}`);
});
})
.on('mouseleave', () => clearInterval(interval_id));
yield html_x3d.node();
x3dom.reload();
}
Insert cell

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.
Learn more