Solving Dynamical Systems in Javascript

So here is the second step, how to solve a tent map in javascript and plot it as it is getting iterated.

The map is defined as follows

\[x_{n+1} = 2~x_n ~\text{mod}~ 1\]

The \(x_n\) are plotted with respect to the step numbers. Change the value given in the slider to provide the initial condition.


The javascript code is given below.

tentmap(0.45); // Running it to get the first graph
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
  output.innerHTML = this.value/100;

//The functions
function tentmap(init)
var statei = init;
var xaxis = [0];
var yaxis = [statei];
var i ;
for (i = 0; i < 45; i++) {

  statei = (2*statei)%1

  var trace1 = {
  x: xaxis,
  y: yaxis,
  mode: 'lines', //use markers if you want just dots
  type: 'scatter'
var data = [trace1];
Plotly.newPlot('myDiv', data);

The HTML is as follows.

	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
  <div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>


subscribe via RSS