Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information.
illo01 = {
const illo = new Zdog.Illustration({
element: DOM.canvas(width, 240)
});
illo.element.style.backgroundColor = '#FDB';
// add circle
new Zdog.Ellipse({
addTo: illo,
diameter: 80,
stroke: 20,
color: '#636'
});
while (true) {
// update & render
illo.updateRenderGraph();
yield illo.element;
}
}
illo02 = {
const illo = new Zdog.Illustration({
element: DOM.canvas(width, 240),
dragRotate: true,
zoom: 4
});
illo.element.style.backgroundColor = '#FDB';
// add circle
new Zdog.Ellipse({
addTo: illo,
diameter: 20,
// position closer
translate: { z: 10 },
stroke: 5,
color: '#636'
});
// square
new Zdog.Rect({
addTo: illo,
width: 20,
height: 20,
// position further back
translate: { z: -10 },
stroke: 3,
color: '#E62',
fill: true
});
function animate() {
// rotate illo each frame
illo.rotate.y += speed;
illo.updateRenderGraph();
// animate next frame
requestAnimationFrame(animate);
}
// start animation
animate();
while (true) {
illo.updateRenderGraph();
yield illo.element;
}
}
illo03 = {
// rotating flag variable
let isSpinning = true;
const illo = new Zdog.Illustration({
element: DOM.canvas(width, 240),
dragRotate: true,
// stop rotation when dragging starts
onDragStart: function() {
isSpinning = false;
},
zoom: 4
});
illo.element.style.backgroundColor = '#FDB';
// add circle
new Zdog.Ellipse({
addTo: illo,
diameter: 20,
// position closer
translate: { z: 10 },
stroke: 5,
color: '#636'
});
// square
new Zdog.Rect({
addTo: illo,
width: 20,
height: 20,
// position further back
translate: { z: -10 },
stroke: 3,
color: '#E62',
fill: true
});
function animate() {
// rotate
if (isSpinning) {
illo.rotate.y += 0.03;
}
illo.updateRenderGraph();
requestAnimationFrame(animate);
}
// start animation
animate();
while (true) {
illo.updateRenderGraph();
yield illo.element;
}
}
illo04 = {
var yellow = '#ED0';
var gold = '#EA0';
var orange = '#E62';
var garnet = '#C25';
const TAU = Zdog.TAU;
const illo = new Zdog.Illustration({
element: DOM.canvas(width, 240),
dragRotate: true,
rotate: { x: -TAU / 8 }
});
illo.element.style.backgroundColor = '#FDB';
illo.element.style.cursor = 'move';
var burger = new Zdog.Anchor({
addTo: illo,
translate: { y: 24 },
rotate: { x: TAU / 4 }
});
// top bun
var topBun = new Zdog.Hemisphere({
addTo: burger,
diameter: 96,
translate: { z: 44 },
stroke: 24,
color: orange
// backface: gold,
});
// cheese
new Zdog.Rect({
addTo: burger,
width: 92,
height: 92,
translate: { z: 24 },
stroke: 16,
color: yellow,
fill: true
});
// patty
new Zdog.Ellipse({
addTo: burger,
diameter: 96,
stroke: 32,
color: garnet,
fill: true
});
// bottom bun
new Zdog.Cylinder({
addTo: burger,
diameter: topBun.diameter,
length: 16,
translate: { z: -36 },
stroke: topBun.stroke,
color: topBun.color
});
var seedAnchor = new Zdog.Anchor({
addTo: topBun
});
var seedZ = (topBun.diameter + topBun.stroke) / 2 + 1;
// seed
new Zdog.Shape({
addTo: seedAnchor,
path: [{ y: -3 }, { y: 3 }],
translate: { z: seedZ },
stroke: 8,
color: gold
});
seedAnchor.copyGraph({
rotate: { x: 0.6 }
});
seedAnchor.copyGraph({
rotate: { x: -0.6 }
});
seedAnchor.copyGraph({
rotate: { y: -0.5 }
});
seedAnchor.copyGraph({
rotate: { y: 0.5 }
});
function animate() {
illo.updateRenderGraph();
requestAnimationFrame(animate);
}
// start animation
animate();
while (true) {
illo.updateRenderGraph();
yield illo.element;
}
}
illo05 = {
const illo = new Zdog.Illustration({
element: DOM.canvas(width, 240),
dragRotate: true
});
illo.element.style.backgroundColor = '#FDB';
illo.element.style.cursor = 'move';
// render shapes in order added
var eyeGroup = new Zdog.Group({
addTo: illo,
translate: { z: 20 }
});
// eye white first
new Zdog.Ellipse({
addTo: eyeGroup,
width: 160,
height: 80,
stroke: 8,
fill: true,
color: 'white'
});
// then iris
let iris = new Zdog.Ellipse({
addTo: eyeGroup,
diameter: 70,
stroke: 8,
fill: true,
color: "gold"
});
// then pupil
iris.copy({
diameter: 30,
color: '#636'
});
// highlight last in front
iris.copy({
diameter: 30,
translate: { x: 15, y: -15 },
color: 'white'
});
while (true) {
// update & render
illo.updateRenderGraph();
yield illo.element;
}
}
illoEX = {
//const TAU = Zdog.TAU;
const illo = new Zdog.Illustration({
element: DOM.canvas(width, width / 2),
dragRotate: true
//rotate: { x: -TAU / 8 }
});
illo.element.style.backgroundColor = '#003';
const body = new Zdog.Shape({
addTo: illo,
stroke: 50,
path: [{ y: 0 }, { y: 30 }],
color: '#cfc'
//rotate: { x: TAU / 4 }
});
const leftEye = new Zdog.Shape({
addTo: body,
translate: { x: -10, z: 20 },
stroke: 5,
color: '#111'
});
const rightEye = leftEye.copy({
translate: { x: 10, z: 20 },
stroke: 10
});
const mouth = new Zdog.Shape({
addTo: body,
color: '#fff',
stroke: 20,
path: [{ x: -5 }, { x: 5 }],
translate: { y: 20, z: 15 }
});
const dots = [];
for (let i = 0; i < 30; i++)
dots.push(
new Zdog.Shape({
addTo: illo,
diameter: 10 * Math.random(),
translate: {
x: (Math.random() - .5) * width,
y: (Math.random() - .5) * width,
z: (Math.random() - .5) * width
},
stroke: 50 * Math.random(),
color: '#ccf',
fill: true
})
);
while (true) {
for (let dot of dots) {
//dot.translate.x += Math.random() - .5
dot.translate.y += 1;
// dot.translate.z -= 1
}
illo.rotate.y += .03;
illo.updateRenderGraph();
yield illo.element;
}
}
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.
