animation_colors = {
const svg = d3.create('svg')
.attr('width', 200)
.attr('height', 200)
const circle = svg.append('circle')
.attr('r', 30)
.attr('cx', 100)
.attr('cy', 100)
.style('fill', '#9cb9db')
var breath_in_time = 5000;
const breath_out_time = 5000;
// Cycle number
var i = 1;
var circle_color = '#9cb9db'
while(true) {
yield svg.node()
// orange when it's special, light blue when not
circle_color = i % 4 == 0 ? '#e3793b' : '#9cb9db';
breath_in_time = i % 4 == 0 ? 1000 : 5000;
i = i %4; // prevent it from getting absurdly large
await circle
.transition()
.ease(d3.easeSinInOut)
.style('fill', circle_color)
.delay(1000) // pause the circle for longer (hold your breathe)
.duration(breath_in_time)
.attr('r', 50)
.transition()
.delay(1000)
.ease(d3.easeSinInOut)
.duration(breath_out_time)
.attr('r', 30)
.end()
i = i + 1;
}
}
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3 = require("d3@5")
chart_width=400;
chart_height=400
formatDay = d => "SMTWTFS"[d.getUTCDay()]
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.
