dataviz + interactive analytics
// Transcribed
// Save as an older version
flipBenchPath = [
{ x: 428, y: 101 }, // start
{ bezier: [
{ x: 416, y: 122 }, // start control point
{ x: 412, y: 156 }, // end control point
{ x: 411, y: 163 }, // end point
]},
{ bezier: [
{ x: 410, y: 170 }, // start control point
{ x: 417, y: 202 }, // end control point
{ x: 391, y: 218 }, // end point
]},
{ bezier: [
{ x: 364, y: 234 }, // start control point
{ x: 265, y: 207 }, // end control point
{ x: 266, y: 233 }, // end point
]},
{ bezier: [
{ x: 267, y: 253 }, // start control point
{ x: 292, y: 289 }, // end control point
{ x: 322, y: 304 }, // end point
]},
// Offset to move to the middle
].map(instruction => {
const xOffset = -400;
const yOffset = -200;
if (instruction.bezier) {
return {
bezier: instruction.bezier.map(point => ({
x: -(point.x + xOffset),
y: -(point.y + yOffset)
}))
}
} else {
return {
x: -(instruction.x + xOffset),
y: -(instruction.y + yOffset)
}
}
})
{
let isSpinning = true;
let element = DOM.canvas(width, 400);
let illo = new Zdog.Illustration({
element,
dragRotate: true,
// pause spinning while dragging
onDragStart: () => isSpinning = false,
onDragEnd: () => isSpinning = true
});
for (let i = 0; i < 30; i++) {
new Zdog.Shape({
addTo: illo,
path: flipBenchPath,
stroke: 10,
closed: false,
color: '#636',
translate: { z: 10 * i},
rotate: { y: -Zdog.TAU*i/ 30 }
});
}
while (true) {
// if (isSpinning) illo.rotate.y += 0.03;
illo.updateRenderGraph();
yield element;
}
}
mushroomPath = [
{ x: 428, y: 101 }, // start
{ bezier: [
{ x: 416, y: 122 }, // start control point
{ x: 412, y: 156 }, // end control point
{ x: 411, y: 163 }, // end point
]},
{ bezier: [
{ x: 410, y: 170 }, // start control point
{ x: 417, y: 202 }, // end control point
{ x: 391, y: 218 }, // end point
]},
{ bezier: [
{ x: 364, y: 234 }, // start control point
{ x: 265, y: 207 }, // end control point
{ x: 266, y: 233 }, // end point
]},
{ bezier: [
{ x: 267, y: 253 }, // start control point
{ x: 292, y: 289 }, // end control point
{ x: 322, y: 304 }, // end point
]},
// Offset to move to the middle
].map(instruction => {
const xOffset = -400;
const yOffset = -200;
if (instruction.bezier) {
return {
bezier: instruction.bezier.map(point => ({
x: -(point.x + xOffset),
y: -(point.y + yOffset)
}))
}
} else {
return {
x: -(instruction.x + xOffset),
y: -(instruction.y + yOffset)
}
}
})
{
let isSpinning = true;
let element = DOM.canvas(width, 400);
let illo = new Zdog.Illustration({
element,
dragRotate: true,
// pause spinning while dragging
onDragStart: () => isSpinning = false,
onDragEnd: () => isSpinning = true
});
for (let i = 0; i < 30; i++) {
new Zdog.Shape({
addTo: illo,
path: mushroomPath,
stroke: 10,
closed: false,
color: '#636',
// translate: { z: 10 * i},
rotate: { y: -Zdog.TAU*i/ 30 }
});
}
while (true) {
// if (isSpinning) illo.rotate.y += 0.03;
illo.updateRenderGraph();
yield element;
}
}
{
let isSpinning = true;
let element = DOM.canvas(width, 400);
let illo = new Zdog.Illustration({
element,
dragRotate: true,
// pause spinning while dragging
onDragStart: () => isSpinning = false,
onDragEnd: () => isSpinning = true
});
for (let i = 0; i < 60; i++) {
new Zdog.Shape({
addTo: illo,
path: path,
stroke: 8,
closed: false,
color: '#636',
translate: { y: -200 },
rotate: { y: Zdog.TAU*i/ 110 }
});
}
while (true) {
// if (isSpinning) illo.rotate.y += 0.03;
illo.updateRenderGraph();
yield element;
}
}
// Let's make something that can be drawn with different silhouettes depending on its position along a sine wave.
getPath = (ratio) => {
// ratio is a value between 1 and -1
return [
{ x: 428, y: 101 }, // start
{ bezier: [
{ x: 416, y: 122 }, // start control point
{ x: 412, y: 156 }, // end control point
{ x: 411, y: 163 }, // end point
]},
{ bezier: [
{ x: 410, y: 170 }, // start control point
{ x: 417, y: 202 }, // end control point
{ x: 391, y: 218 }, // end point
]},
{ bezier: [
{ x: 364, y: 234 }, // start control point
{ x: 265, y: 207 }, // end control point
{ x: 266, y: 233 }, // end point
]},
{ bezier: [
{ x: 267, y: 253 }, // start control point
{ x: 265 + Math.abs(ratio) * (292 - 265), y: 289 }, // end control point
{ x: 266 + Math.abs(ratio) * (322 - 266), y: 304 }, // end point
]},
// Offset to move to the middle
].map(instruction => {
const xOffset = 0;
const yOffset = 0;
if (instruction.bezier) {
return {
bezier: instruction.bezier.map(point => ({
x: point.x + xOffset,
y: point.y + yOffset
}))
}
} else {
return {
x: instruction.x + xOffset,
y: instruction.y + yOffset
}
}
});
}
{
let isSpinning = true;
let element = DOM.canvas(width, 400);
let illo = new Zdog.Illustration({
element,
dragRotate: true,
onDragStart: () => isSpinning = false,
onDragEnd: () => isSpinning = true
});
let i = parametrizedTester;
new Zdog.Shape({
addTo: illo,
path: getPath(parametrizedTester), // 60, 15, and 110 are all magic numbers
stroke: 8,
closed: false,
color: '#636',
translate: { y: -200 },
rotate: { y: Zdog.TAU*i / 110 }
});
while (true) {
illo.updateRenderGraph();
yield element;
}
}
{
let isSpinning = true;
let element = DOM.canvas(width, 400);
let illo = new Zdog.Illustration({
element,
dragRotate: true,
onDragStart: () => isSpinning = false,
onDragEnd: () => isSpinning = true
});
for (let i = 0; i < 60; i++) {
new Zdog.Shape({
addTo: illo,
path: getPath(Math.sin(i * Zdog.TAU / 15)), // 60, 15, and 110 are all magic numbers
stroke: 8,
closed: false,
color: '#636',
translate: { y: -200 },
rotate: { y: Zdog.TAU*i / 110 }
});
}
while (true) {
// if (isSpinning) illo.rotate.y += 0.01;
illo.updateRenderGraph();
yield element;
}
}
Zdog = require("zdog@1/dist/zdog.dist.min.js")
import {slider} from "@jashkenas/inputs"
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.
