Published
Edited
Oct 6, 2020
md`# Func`
chart = {
const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]);
svg.append('g').call(s => s.append('text')
.attr('alignment-baseline', 'hanging')
.attr('text-anchor', 'middle')
.attr('transform', `translate(${width/2},${margin.top})`)
.attr('font-size', 24)
.text('Func'));
svg.append('g').call(xaxis).attr('transform', `translate(0,${yscale(0)})`);
svg.append('g').call(yaxis).attr('transform', `translate(${xscale(0)},0)`);
svg.append('g').call(s => s.selectAll('path')
.data([x.map(d => ([d, f(d), g(d)])).filter(d => d[1] <= d[2])])
.join('path')
.attr('fill', 'purple')
.attr('opacity', 0.2)
.attr('d', d3.area()
.x(d => xscale(d[0]))
.y0(d => yscale(d[2]))
.y1(d => yscale(d[1]))
));
svg.append('g').call(plot, f).call(s => s.selectAll('path').attr('stroke', 'red'));
svg.append('g').call(plot, g).call(s => s.selectAll('path').attr('stroke', 'blue'));
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.
