plot = {
const x = linspace(0, 2, 100);
const y = x.map(x => x*x);
return frame({label:'x', scale:[0,2]}, {label:'y(x)', scale:[0,4], grid:true})
.curve(x, y, {stroke:'red', strokeWidth:2})
.rect(0.4, 0.6, 1, 2, {fill:'blue', opacity:0.2})
.hline(1.5, {style:{strokeDasharray:'2 2'}})
.node();
}
graph = {
const [amin,amax] = [1e-4,1e2];
const F = frame(
{
scale: d3.scaleLog().domain([amin,amax]),
label: 'yyy',
grid: true
},
{
scale: d3.scaleLog().domain([amax**-4,amin**-4]),
label: 'The y axis',
grid: true
},
{
w:0.7 * width, // reactive width
h:400 // fixed height
}
);
const a = [amin, amax];
for(const w of [-1, 0, 1/3]) {
const eps = a.map(a => a ** (-3*(1+w)));
//F.curve(a, eps, p => p.attr('stroke', 'red').attr('stroke-width', '2'));
F.curve(a, eps, {stroke:'red', strokeWidth: 2});
}
F.hline(1e4, {x2:1, style:{stroke:'blue'}});
F.vline(1, {y2:1e4, style:{stroke:'green'}});
F.dot(1,1e4, {style:{fill:'blue'}});
return F.node();
}
svg`${svgtex`\int_0^\infty \sqrt{1-x^2} dx`}`
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.
