Published
Edited
Oct 4, 2018
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
stdlib = require( "https://unpkg.com/@stdlib/stdlib@0.0.43/dist/stdlib-flat.min.js" )
Insert cell
Insert cell
Insert cell
Insert cell
plot = stdlib.plot
Insert cell
Insert cell
erf = stdlib.base.erf
Insert cell
Insert cell
sqrt = stdlib.base.sqrt
Insert cell
Insert cell
linspace = stdlib.linspace
Insert cell
Insert cell
inmap = stdlib.inmap
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function u( x, t ) {
return (a/2.0) * erf( (x-b)/sqrt(4*k*t) );
}
Insert cell
Insert cell
Insert cell
Insert cell
plt = plot()
Insert cell
Insert cell
function configurePlot( plt, x, y ) {
// Disable auto-rendering, deferring instead to Observable:
plt.autoRender = false;
// Plot meta data:
plt.description = 'Plot displaying a solution to the heat equation.';
plt.title = 'Temperatures Across Material';
// Plot dimensions:
plt.width = 800; // pixels
// x-axis configuration:
plt.xLabel = 'x';
plt.xMin = -6;
plt.xMax = 6;
// y-axis configuration:
plt.yLabel = 'Temperature';
plt.yMin = -5.0;
plt.yMax = 5.0;
// Plot data:
plt.x = x;
plt.y = y;
return plt;
}
Insert cell
Insert cell
function renderPlot( plt, x, y ) {
configurePlot( plt, x, y );
return plt.render( 'html' );
}
Insert cell
Insert cell
x = linspace( -6.0, 6.0, 100 )
Insert cell
Insert cell
t = [ 0.1, 1.0, 10.0, 50.0, 100.0 ]
Insert cell
Insert cell
function evaluate() {
var out;
var i;
var j;
out = new Array( t.length );
for ( i = 0; i < t.length; i++ ) {
out[ i ] = new Array( x.length );
for ( j = 0; j < x.length; j++ ) {
out[i][j] = u( x[j], t[i] );
}
}
return out;
}
Insert cell
Insert cell
yData = evaluate()
Insert cell
Insert cell
xData = inmap( new Array(yData.length), () => x )
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`${renderPlot( plt, xData, yData ) }`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more