{
const height = 300
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, 300]);
const circle = svg.append('circle')
.attr('cx', width / 2)
.attr('cy', height / 2)
.attr('r', 80)
.attr('fill', 'green');
const line = svg.append('line')
.attr('x1', 0)
.attr('y1', 50)
.attr('x2', width)
.attr('y2', 50.001)
.style('stroke', 'black')
.style('stroke-width', 20);
const rec = svg.append('rect')
.attr('x', 0)
.attr('y', 150)
.attr('width', 300)
.attr('height', 50);
const defs = svg.append('defs')
const linearGradient = defs.append('linearGradient')
.attr('id', 'linear-gradient');
const linearGradient2 = defs.append('linearGradient')
.attr('id', 'linear-gradient2');
linearGradient
.attr('x1', '0%')
.attr('y1', '0%')
.attr('x2', '100%')
.attr('y2', '0%');
linearGradient.append('stop')
.attr('offset', '0%')
.attr('stop-color', 'yellow');
linearGradient.append('stop')
.attr('offset', '100%')
.attr('stop-color', 'red');
linearGradient2
.attr('x1', '0%')
.attr('y1', '0%')
.attr('x2', '100%')
.attr('y2', '0%');
linearGradient2.append('stop')
.attr('offset', '0%')
.attr('stop-color', 'white');
linearGradient2.append('stop')
.attr('offset', '100%')
.attr('stop-color', 'black');
circle.style('fill', 'url(#linear-gradient)');
line.style('stroke', 'url(#linear-gradient)');
rec.style('fill', 'url(#linear-gradient)');
rec.style('stroke', 'url(#linear-gradient2)').style('stroke-width', 20);
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.
