Published
Edited
Feb 14, 2018
1 fork
64 stars
{
const ctx = DOM.context2d(width, 100);
ctx.strokeStyle = '#459';
while (true) {
ctx.clearRect(0, 0, width, 100);
ctx.beginPath();
for (let i = 0; i < width; i += 2) {
ctx[i ? 'lineTo' : 'moveTo'](i, 50 + Math.sin((Date.now() / 2000) + i / 20) * 20);
}
ctx.stroke();
yield ctx.canvas;
}
}
{
const myWidth = Math.min(640, width);
const ctx = DOM.context2d(myWidth, 100);
ctx.strokeStyle = '#959';
while (true) {
ctx.clearRect(0, 0, myWidth, 100);
ctx.beginPath();
for (let i = 0; i < myWidth; i += 2) {
ctx[i ? 'lineTo' : 'moveTo'](i, 50 +
Math.cos((Date.now() / 2000) - i / 5) *
Math.cos((Date.now() / 2000) - i / 20) * 20);
}
ctx.stroke();
yield ctx.canvas;
}
}
{
const height = 500;
const svg = d3.select(DOM.svg(1024, height))
.style('max-width', '100%')
.style('height', 'auto');
svg.append('rect')
.attr('fill', '#E93223')
.attr('transform', 'translate(50, 50)')
.attr('width', 1024 - 100)
.attr('height', height - 100);
svg.append('text')
.attr('transform', 'translate(100, 315)')
.style('font-family', 'Futura')
.style('font-style', 'italic')
.style('letter-spacing', '-10px')
.style('font-size', '200px')
.attr('fill', '#ffffff')
.text('Supreme');
return svg.node();
}
{
const xAxis = g => g
.attr("transform", `translate(0,50)`)
.call(d3.axisBottom(d3.scaleLinear().domain([0, 100]).range([50, width - 50]))
.ticks(width / 80)
.tickSizeOuter(0));
const svg = d3.select(DOM.svg(width, 100));
svg.append("g").call(xAxis);
return svg.node();
}
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.
