Posts

Showing posts from May, 2022

How to Reorder An Array of Numbers in JavaScript

Sometimes we need to reorder an array of numbers so that the order goes from small to big or otherwise. Logic The logic of reorder an array of numbers is this: Find the min or max number in the array. Push this number into a new array. Delete this number. Continue the second and steps until there is no number in the original array. Tools  Here are some of the methods I use to make a reordering function: Math.min() or Math.max() depending whether you want to start with the minimun or maximun number. array.push is used to add number to the array with the target order, small to big or vise versa. array.splice() is used to delete the pushed number to prevent multiple counting. while loop is used to execute the process unitl all numbers are arranged. Code function reorder(arr){ var newArr = []; while(arr.length != 0){ var min = Math.min(...arr); var index = arr...

Plotly.js Bar Charts Automatically Order the X-Axis Values

When I build a bar chart while my data are dynamic, I want to be able to reorder the x value array so that the y values can be shown corresponding with the appropritate x value. For exampe, an array of [1,2,3,4,5] for x-axis and [10,5,3,7,9] for y-axis looks like this: WHen Data is Dynamic When data is dynamic, the x values are created randomly. Either I need to use other algorithem to reorder the x array and create y arrray corresponding it, or Plotly.js takes care of the reordering work. For exampe, an array of [2,1,4,5,3] for x-axis and [5,10,9,3,7] for y-axis looks like this, which looks exactly the same with the one above, because x-y value pairs are reorganized from small to big: The problem of counting random numbers With Ployly.js' automatic array reordering mechenism, couting random numbers are easy. Here, the order of random numbers matter, otherwise we don't even need to reorder them. Now I want to count random intergers from 1 to 100 created b...

Plotting Any X-Y Graph With JavaScript

If I have any one-variable function, I can plot it out on web using JavaScriopt. The trick is to calculate all x-y pairs and use any open-sourced ploting JavaScript libray to draw it out. So the key point is the JavaScript function to calculate all y when we have x. Define Domain Domain mean what x are. The basic way to get x is to use the for loop. For example, here is a domain of 1 - 10 var x = []; for(let i = 1;i<=100;i++){ x.push(x); }; Now we havre x, we need y. All we need to do is store calculated y value into an array. var x = []; var y = []; var a = 5; var b = 10; for(let i = 1;i<=10;i++){ x.push(x); y.push(a*i+b); }; console.log(y) //[15, 20, 25, 30, 35, 40, 45, 50, 55, 60] Smaller Increments The above example is with x addig 1 at a time, we can make a liitle adjustment so that x can incrase with a smaller increament, which could make our graph more continuous. In fact, if we want to find out if a function converges, we need to make gaps between rela...

The Use of thead, tbody and tfoot

The HTML table tag has its organix child tags such as the thead, tbody and tfoot tags. They seem to be intuitive, however, I don't see how they can be useful, since they all look the same on browser.  Uesful Case I have found a case when I actually have to use the tfoot tag. This is when I want to dynamically render the table rows while keep the last row static. I can put tfoot tag around the last row. and keep adding innerHTML to the table wihtout affecting the position of the last row. The tfoot tag will fix whatever inside the tag at the very bottom of the table. Make a table head and foot stay while scrolling table body Month Savings January $100 February $80 January $100 February $80 January $100 February $80 January $100 February $80 J...

JavaScript Array ForEach Loop Trick

In JavaScrupt. arrays have one interesting and usiful built-in method, which is the forEach() method. What does the ForEach() Method do? The forEach() method runs through all elements in an array. This greatly reducesed the amount of code if it does not exist. For example, I want to console.log() out all elements. Without the forEach() loop, the code would look like this: var arr = [1,2,3,4] for(let i = 0;i<arr.length;i++){ console.log(arr[i]); }; And with the forEach() loop, the code looks like this: var arr = [1,2,3,4] arr.forEach(item=>{ console.log(item); }); I like the second way. Reverse the order of an array In this article , I have made a function to generate an array with the reversed order from the original. Essentially, this is done by using the forEach() loop. Looking for more than one array element If we are looking for one element or its index, we can just use the array.find() or array.findIndex() method to get it done....