stdlib = require( "https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js" )
randu = stdlib.base.random.randu
randn = stdlib.base.random.normal
plot = stdlib.plot
linspace = stdlib.linspace
vdom2html = require( "https://wzrd.in/standalone/vdom-to-html@2.1" )
initial = [ 0.3, 0.7 ] // should sum to 1
transition = [[ 0.2, 0.8 ], [ 0.4, 0.6 ]] // each row should sum to 1
initial_state = ( randu() <= initial[0] ) ? 0 : 1
second_state = ( randu() <= transition[initial_state][0] ) ? 0 : 1
third_state = ( randu() <= transition[second_state][0] ) ? 0 : 1
state_sequence = {
var nsteps = 100;
var states;
var curr;
var i;
states = new Array( nsteps );
states[ 0 ] = initial_state;
curr = initial_state;
for ( i = 1; i < nsteps; i++ ) {
curr = ( randu() <= transition[curr][0] ) ? 0 : 1;
states[ i ] = curr;
}
return states;
}
plt = plot()
function configurePlot( plt, y, numStates ) {
// Disable auto-rendering, deferring, instead, to Observable:
plt.autoRender = false;
// Plot meta data:
plt.description = 'Markov chain simulated state sequence.';
plt.title = 'Simulated Markov Chain';
// Plot dimensions:
plt.width = 800; // pixels
// x-axis configuration:
plt.xLabel = 'Step';
plt.xMin = -1;
plt.xMax = y.length;
// y-axis configuration:
plt.yLabel = 'State';
plt.yMin = -0.1;
plt.yMax = (numStates-1) + 0.1;
plt.yNumTicks = numStates;
// Data point encoding:
plt.symbols = [ 'open-circle' ];
// Values along the abscissa (x-values) will simply be a linearly spaced array representing the step number:
plt.x = [ linspace(0, y.length-1, y.length) ];
// State sequence:
plt.y = [ y ];
return plt;
}
configurePlot( plt, state_sequence, 2 )
function renderPlot( plt, y, numStates ) {
configurePlot( plt, y, numStates );
return vdom2html( plt.render() );
}
html`${renderPlot(plt, state_sequence, 2)}`
function csum( arr ) {
var out;
var i;
out = [];
out.push( arr[ 0 ] );
for ( i = 1; i < arr.length; i++ ) {
out.push( out[ i-1 ] + arr[ i ] );
}
return out;
}
csum( [ 0.1, 0.3, 0.2, 0.1, 0.3 ] )
I = [ 0.1, 0.3, 0.2, 0.1, 0.3 ] // should sum to 1
A = {
var transition = new Array( 5 );
// Transition probabilities when in state s_0:
transition[ 0 ] = [ 0.2, 0.7, 0.1, 0.0, 0.0 ]; // should sum to 1
// Transition probabilities when in state s_1:
transition[ 1 ] = [ 0.4, 0.3, 0.25, 0.05, 0.0 ]; // should sum to 1
// Transition probabilities when in state s_2:
transition[ 2 ] = [ 0.05, 0.2, 0.4, 0.3, 0.05 ]; // should sum to 1
// Transition probabilities when in state s_3:
transition[ 3 ] = [ 0.02, 0.18, 0.2, 0.2, 0.4 ]; // should sum to 1
// Transition probabilities when in state s_4:
transition[ 4 ] = [ 0.3, 0.0, 0.0, 0.2, 0.5 ]; // should sum to 1
return transition;
}
function simulate( initial, transition, n ) {
var nStates;
var states;
var probs;
var r;
var i;
var j;
nStates = initial.length;
// Convert the initial probabilities to cumulative probabilities:
initial = csum( initial );
// Convert each set of transition probabilities to cumulative probabilities:
transition = transition.slice(); // avoid mutation
for ( i = 0; i < nStates; i++ ) {
transition[ i ] = csum( transition[ i ] );
}
// Define the output state array:
states = new Array( n );
// Determine the initial state:
r = randu();
for ( i = 0; i < nStates; i++ ) {
if ( r < initial[ i ] ) {
states[ 0 ] = i;
break;
}
}
// Simulate the next `n-1` steps:
for ( i = 0; i < n-1; i++ ) {
probs = transition[ states[i] ];
r = randu();
for ( j = 0; j < nStates; j++ ) {
if ( r < probs[ j ] ) {
states[ i+1 ] = j;
break;
}
}
}
return states;
}
seq = simulate( I, A, n )
plt2 = plot()
html`${renderPlot( plt2, seq, 5 ) }`
I_corrupted = [ 0.1, 0.3, 0.2, 0.1, 0.3 ] // should sum to 1
A_corrupted = {
var transition = new Array( 5 );
// Transition probabilities when in state s_0:
transition[ 0 ] = [ 0.2, 0.7, 0.1, 0.0, 0.0 ]; // should sum to 1
// Transition probabilities when in state s_1:
transition[ 1 ] = [ 0.4, 0.3, 0.25, 0.05, 0.0 ]; // should sum to 1
// Transition probabilities when in state s_2:
transition[ 2 ] = [ 0.05, 0.2, 0.4, 0.3, 0.05 ]; // should sum to 1
// Transition probabilities when in state s_3:
transition[ 3 ] = [ 0.02, 0.18, 0.2, 0.2, 0.4 ]; // should sum to 1
// Transition probabilities when in state s_4:
transition[ 4 ] = [ 0.3, 0.0, 0.0, 0.2, 0.5 ]; // should sum to 1
return transition;
}
means = [ 0.2, 0.35, 0.5, 0.6, 0.8 ]
sigmas = [ 0.1, 0.1, 0.1, 0.1, 0.1 ]
function stateSequence( seq, means ) {
var states;
var i;
states = new Array( seq.length );
for ( i = 0; i < seq.length; i++ ) {
states[ i ] = means[ seq[i] ];
}
return states;
}
function corrupt( states, means, sigmas ) {
var state;
var out;
var i;
// Initialize an output array:
out = new Array( states.length );
// For each state, simulate a corrupted observation:
for ( i = 0; i < states.length; i++ ) {
state = states[ i ];
out[ i ] = randn( means[ state ], sigmas[ state ] );
}
return out;
}
seq_corrupted = simulate( I_corrupted, A_corrupted, n_corrupted )
obs = corrupt( seq_corrupted, means, sigmas )
plt3 = plot()
function configurePlotCorrupted( plt, corrupted, underlying ) {
var n;
var x;
n = corrupted.length;
// Disable auto-rendering, deferring, instead, to Observable:
plt.autoRender = false;
// Plot meta data:
plt.description = 'Simulated noisy time series.';
plt.title = 'Simulated Time Series';
plt.labels = [
'noisy',
'true'
];
// Plot dimensions:
plt.width = 800; // pixels
// x-axis configuration:
plt.xLabel = 'Step';
plt.xMin = -1;
plt.xMax = n;
// y-axis configuration:
plt.yLabel = 'Observation';
plt.yMin = 0.0;
plt.yMax = 1.0;
// Data point encoding:
plt.colors = [
'#1f77b4', // blue
'#d62728' // red
];
plt.symbols = 'none';
plt.lineOpacity = [ 1.0, 0.3 ];
// Values along the abscissa (x-values) will simply be a linearly spaced array representing the step number:
x = linspace(0, n-1, n);
plt.x = [ x, x ];
// Observations:
plt.y = [ corrupted, underlying ];
return plt;
}
function renderPlotCorrupted( plt, corrupted, underlying ) {
configurePlotCorrupted( plt, corrupted, underlying );
return vdom2html( plt.render() );
}
html`${renderPlotCorrupted( plt3, obs, stateSequence( seq_corrupted, means ) ) }`
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.
