Interactive data visualization
Public
Edited
Jan 29, 2023
showPlan(plan)
plan = {
const wallHeight = 300;
const a = 4000;
const p = new GalleryPlan(a, a, 0.1);
const s = a / (Math.sqrt(2) + 1) * Math.sqrt(2) / 2;
const eps = 1;
p.wallAttrs = {
// color: `url('${await FileAttachment("The-brick-wall-corresponding-to-the-choice-N-3.png").url()}'), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,185,1) 100%)`,
color: `linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,185,1) 100%)`,
border: '1px solid black',
};
p.jumpTo(0, s);
p.wallTo(s, 0);
p.wallTo(a - s, 0);
p.wallTo(a, s);
p.wallTo(a, a - s);
p.wallTo(a - s, a);
p.wallTo(s, a);
p.wallTo(0, a - s);
p.wallTo(0, s);
const k = 0.33;
p.jumpTo(a * k, a * k);
p.wallTo(a - a * k, a * k);
p.jumpTo(a / 2, a * k - eps);
p.put(-90, '9 ', StaticImage, {
url: images.a,
height: wallHeight,
});
p.jumpTo(a / 2, a * k + eps);
p.put(90, ' 10', StaticImage, {
url: images.b,
height: wallHeight,
});
p.jumpTo(s / 2 + eps, s / 2 + eps);
p.put(45, '1', StaticImage, {
url: images.a,
height: wallHeight,
});
p.jumpTo(a - s / 2 - eps, s / 2 + eps);
p.put(180 - 45, '3', StaticImage, {
url: images.b,
height: wallHeight,
});
p.jumpTo(s / 2 + eps, a - s / 2 - eps);
p.put(-45, '7', StaticImage, {
url: images.a,
height: wallHeight,
});
p.jumpTo(a - s / 2 - eps, a - s / 2 - eps);
p.put(180 + 45, '5', StaticImage, {
url: images.b,
height: wallHeight,
});
p.jumpTo(a / 2, eps);
p.put(90, '2', StaticImage, {
url: images.a,
height: wallHeight,
});
p.jumpTo(a / 2, a - eps);
p.put(-90, '6', StaticImage, {
url: images.b,
height: wallHeight,
});
p.jumpTo(a - eps, a / 2);
p.put(180, '4', StaticImage, {
url: images.a,
height: wallHeight,
});
p.jumpTo(eps, a / 2);
p.put(0, '8', StaticImage, {
url: images.b,
height: wallHeight,
});
p.jumpTo(a / 2, a * 3 / 4);
p.put(-90, '3d', StaticImage, {
url: images.a,
height: wallHeight,
}, 10);
p.jumpTo(a / 2, a / 2);
return p;
}
root = new Composer({
scene: wallsTo3d(plan, {height: 300, topAttrs: {
// color: `url('${await FileAttachment("The-brick-wall-corresponding-to-the-choice-N-3.png").url()}'), white`,
color: 'white',
}, bottomAttrs: {
color: 'orange',
}}),
plan,
height: 500,
coords: [plan.curPos[0], 0, plan.curPos[1]],
}).root
import {images} from '6b912694e561e710'
import {GalleryPlan, showPlan, wallsTo3d} from '448b9c58f7ff72f5';
import {StaticImage, Composer, DivPlane} from 'a9a6ee48aa1de1bc';
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.
