JS: How to make a for loop out of this? - javascript

I have to create a 20 column bar-chart. The bar on the very right gets updated every second with a random number which gives the bar its height. After one second the value gets transferred to its neighbour on the left and so on. To connect the values from the array to css, I created this piece of code. On the left (barchart) is connected to the div via querySelectorAll and then indexed with [i], on the right i take the corresponding value from the array. Since I need to do 20 bars, it would make sense to use a for loop, but I don't really know how to create it... Any ideas?
const arr = [];
let number = "";
function timer() {
setInterval(function () {
number = Math.floor((Math.random() * 100) + 1);
const barchart = document.querySelectorAll(".bar");
barchart[4].style.height = number + "%";
barchart[3].style.height = arr[4] + "%";
barchart[2].style.height = arr[3] + "%";
barchart[1].style.height = arr[2] + "%";
barchart[0].style.height = arr[1] + "%";
arr.push(number);
if (arr.length > 5) {
arr.shift();
}
console.log(arr);
}, 1000);
}
How to shorten this into a loop?
barchart[4].style.height = number + "%";
barchart[3].style.height = arr[4] + "%";
barchart[2].style.height = arr[3] + "%";
barchart[1].style.height = arr[2] + "%";
barchart[0].style.height = arr[1] + "%";

Looking at what you have so far the first time the code runs arr is only initialized with no elements at all and you are attempting to reach out of bound indices which returns undefined
Moreover, you should not use initialize an array as a const if you are planning on changing the values it stores.
Now for the problem at hand:
Considering the bar on the far right is positioned at the last index of barchart and that arr contains the corresponding bar's heights:
//give the bar on the far right a random height.
barchart[barchart.length-1].style.height = number + "%";
//loop through barcharts array from end to start excluding the last bar.
for(let i=barchart.length-2; i>=0; i--)
{
//give each bar the height of his right neighbour
barchart[i].style.height = arr[i+1] + "%";
}

How about just making sure arr has what you want before updating the bar chart, then you can just iterate over it.
Adding the new number and then making sure there are at most 5 numbers allows you to just iterate over all the elements in the array and it will only update the bars for the values it contains - no index out of bounds issues (you just get undefined with JS though.)
NOTE, I replaced querySelectorAll with querySelector as querySelectorAll returns a collection of matched elements rather than a single element.
const arr = [];
let number = "";
function timer() {
setInterval(function() {
number = Math.floor((Math.random() * 100) + 1);
arr.push(number);
// make sure arr max's out at 5 numbers
if (arr.length > 5)
arr.shift();
// update the bar chart(s)
const barchart = document.querySelector(".bar");
for (let i = 0; i < arr.length; i++)
barchart[i].style.height = arr[i] + "%";
console.log(arr);
}, 1000);
}

for(var i = 0;i < 5;i++){
barchart[i].style.height = arr[i+1] + "%";
}

Related

Sorting and Median with Arrays in Javascript

I have been working on this code, and the goal is to sort out the numbers in the array, and then find the median. My median isn't outputting correctly, and when I try to just see what is in array[0], it never has the right value. I'm not exactly sure where I messed up.
Code:
var array = [];
window.onload = function (){
var answer = '';
var median = 0;
for (var i = 0; i < 8; i++) {
var rand = Math.floor(Math.random() * 101);
array.push(rand);
array.sort(function(a, b){return a-b});
answer = answer + array[i] + " ";
}
median = ((array[3] + array[4]) /2);
document.getElementById("result").innerHTML = answer + "<br />" + median;
}
I would suggest first moving your loops ending. Currently you are sorting every single time you add a new number to the array. This means two things : you are wasting computation power on something you should only do once and when you 'log' your result in the line answer = answer + array[i] + " "; its constantly changing since the order is changing. Your functions logic is correct so by making the change below you should get the result you want.
var array = [];
window.onload = function (){
var answer = '';
var median = 0;
//Loop is simplified to just push a random value
for (var i = 0; i < 8; i++) {
array.push(Math.floor(Math.random() * 101));
}
//Sort is outside of the loop;
array.sort(function(a, b){return a-b});
//Median is outside of the loop
median = ((array[3] + array[4]) /2);
//answer is outside of the loop (if you don't know reduce look at the link below)
answer = array.reduce( function ( answer , value ) {
return answer + ',' + value;
} );
// put into the dom
document.getElementById("result").innerHTML = answer + "<br />" + median;
}
If you need help with this feel free to message me, also checkout the documentation for reduce HERE.
Using purely SO posts, I came up with a solution.
Strategy
Shuffle
At first, the partial expression (Math.floor(Math.random() * 101)) came up with duplicates, that's weaksauce. Fisher-Yates (aka Knuth) Shuffle has an excellent algorithm.
Your var answer and reduce expression is now combined and out of the loop as per #hyphnKnight explained. There's no need to break it down any further because reduce return is everything you need to display a sorted array. I also used unshift instead of push, I read that it's faster to use the front of the array rather than the back, but you can't tell the difference, too small of a function and all.
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35469092</title>
</head>
<output id="result"></output>
<body>
<script>
// 1. Populate an array with the numbers 1 through 100.
var arr = [];
for(var i = 1; i <= 100; i++) {
arr.unshift(i);
}
median(arr);
function median(arr){
var median = 0;
// 2. Shuffle
var ran100 = shuffle(arr);
var ran8 = [];
for(var j = 0; j < 8; j++) {
// Take the first 8 elements of the resulting array.
ran8.unshift(ran100[j]);
}
var answer = ran8.sort(function(a, b){return a-b});
median = ((ran8[3] + ran8[4]) /2);
document.getElementById("result").innerHTML = answer + "<br />" + median;
}
function shuffle(arr) {
var curIdx = arr.length, tmpVal, randIdx;
while (0 !== curIdx) {
ranIdx = Math.floor(Math.random() * curIdx);
curIdx -= 1;
tmpVal = arr[curIdx];
arr[curIdx] = arr[ranIdx];
arr[ranIdx] = tmpVal;
}
return arr;
}
</script>
</body>
</html>

Split an array into even chunks based on integer in javascript

This might be a duplicate, though I didn't find any questions specific to my problem here.
Say I have an array like this
var hundred = [1,2,3,4,5...100]
This array has 100 elements. From 1 to 100.
Based on an integer, how can I split this array into another array with the same amount of elements, except they've been evenly distributed like this?
var integer = 2;
var hundred = [50,50,50,50,50,50...100,100,100,100,100,100]
In this example, the array has 50 elements with the value 50, and 50 elements with the value 100, because the integer was 2.
I'm bad at math, so this might be incorrect, but I hope you understand what I mean. The array must have the same ammount of indexes after the calculation.
Edit (Due to me being very bad at formulating questions, I'm going to use the code I need this for here):
So I have a frequencybin array (from the AudioContext analyser):
var fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
This array has a set number of elements ( They are the frequencies of audio played ).
Now I have a spectrum analyser, which has a set number of "bars" so if I have only 3 bars, then how can I split the fbc_array so that each bar has the evenly distributed frequency in it? For example, with 3 bars, bar one would have the bass, bar two would have the mids, bar three would have the treble.
I'm using a for loop for iterating over each bar:
for (i = 0; i < bars; i++) {
bar_x = i * canspace;
bar_width = 2;
bar_height = -3 - (fbc_array[i] / 2);
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
Here's what I gathered from this craziness! Sorry you're having trouble conveying your problem. That's always a headache! Good luck.
//set integer to whatever you want
var integer = 3;
var randomNumber;
var output = new Array()
function getRandomIntInclusive(min, max) {
randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
}
for(i = 0; i<integer;i++){
getRandomIntInclusive(1,100);
for(j = 1; j< (100/integer); j++){
output.push(randomNumber);
}
}
//note, you will not always get 100 array items
//you can check with console.log(output.length);
console.log(output);
(Written before your update, so guessing here).
You're looking for a way to approximate a graph so that it's divided into bands and each point within a band is replaced with that band's maximum:
Number.prototype.times = function(fn) {
var a = [];
for(var i = 0; i < this; i++)
a.push(fn(i));
return a;
}
function approximate(src, n) {
var res = [],
size = Math.ceil(src.length / n),
i = 0;
while(i < src.length) {
var chunk = src.slice(i, i += size)
var p = Math.max.apply(null, chunk);
// this gives you an average instead of maximum
// p = chunk.reduce((x, y) => x + y) / chunk.length;
res = res.concat(size.times(i => p));
}
return res;
}
src = 20..times(i => 10 + Math.floor(Math.random() * 80));
res = approximate(src, 4);
document.write('<pre>'+JSON.stringify(src));
document.write('<pre>'+JSON.stringify(res));

Finding average from input array with Javascript - not calculating correctly

I am trying to calculate the average of 3 values (each numbered from 1-10) that are selected by the user and then pass the results to an text input (for display as a graph).
It should be updating the new average every time one of the values is changed, but the averaging is not working correctly at all. I think that the loop is not resetting the values every time it runs- it's adding up the sum each time it runs, but not sure how to fix it.
Here is my code:
var sliders = $("#health1,#health2,#health3");
var elmt = [];
$(sliders).each(function () {
elmt.push($(this).attr('value'));
$("#health1,#health2,#health3").change(function () {
var sum = 0;
averageRisk();
});
});
function averageRisk() {
var sum = 0;
for (var i = 0; i < elmt.length; i++) {
sum += parseInt(elmt[i], 10);
}
var avg = sum / elmt.length;
document.getElementById('healthLevel').value = +avg;
elmt.push($(sliders).attr('value'));
$('#healthLevel').val(avg).trigger('change');
console.log("Sum: " + sum);
console.log("Average: " + avg);
}
Here is an example:
http://jsfiddle.net/pixelmix/783cfmnv/
Not sure but seems like a lot of extra work going. Main issue was you were building array of initial values and not getting the values each time they changed. That first .each got all the slider values and added them to elmt and continued to push new values on to after every change instead of just getting the current values every time. Did you want to accumulate all values over time?
Fiddle: http://jsfiddle.net/AtheistP3ace/783cfmnv/6/
$("#health1,#health2,#health3").on('change', function () {
averageRisk();
});
function averageRisk() {
var sum = 0;
var elmt = $("#health1,#health2,#health3");
for (var i = 0; i < elmt.length; i++) {
sum += parseInt(elmt[i].value, 10); //don't forget to add the base
}
var avg = sum / elmt.length;
document.getElementById('healthLevel').value = +avg;
$('#healthLevel').val(avg).trigger('change');
console.log("Sum: " + sum);
console.log("Average: " + avg);
}
And as pointed out if you want to ignore updating things when the sum is NaN you can do this:
function averageRisk() {
var sum = 0;
var elmt = $("#health1,#health2,#health3");
for (var i = 0; i < elmt.length; i++) {
sum += parseInt(elmt[i].value, 10); //don't forget to add the base
}
if (isNaN(sum)) {
return false;
}
var avg = sum / elmt.length;
document.getElementById('healthLevel').value = +avg;
$('#healthLevel').val(avg).trigger('change');
console.log("Sum: " + sum);
console.log("Average: " + avg);
}
The problem is that you fill the elmt array at page loading.
When user changes the values, you do not refresh the elmt array. So the array used to compute the average is always the same, empty.
You have to recover the input values each time they are modified.
function averageRisk() {
var sum = 0;
// Re make the loop for getting all inputs values
$(sliders).each(function() {
var value = parseInt($(this).val(), 10);
sum += value;
});
var avg = sum/$(sliders).length;
$('#healthLevel').val(avg);
}
Working example : http://jsfiddle.net/783cfmnv/7/
PS : You can use the css class healthInput to select your inputs. If you add later other fields, you will not have to add the new input id to your jQuery selector.
I did this work, check it .
http://jsfiddle.net/783cfmnv/10/
$("#health1,#health2,#health3").change(function() {
var val1 = +slider1.val();
var val2 = +slider2.val();
var val3 = +slider3.val();
var avg = (val1 + val2 + val3) /3;
$("#healthLevel").val(avg);
});

How to get a unique random integer in a certain range for every number in that range in javascript?

I have:
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
But the problem is I want randomise the population of something with elements in an array (so they do not appear in the same order every time in the thing I am populating) so I need to ensure the number returned is unique compared to the other numbers so far.
So instead of:
for(var i = 0; i < myArray.length; i++) {
}
I have:
var i;
var count = 0;
while(count < myArray.length){
count++;
i = getRandomInt(0, myArray.length); // TODO ensure value is unique
// do stuff with myArray[i];
}
It looks like rather than independent uniform random numbers you rather want a random permutation of the set {1, 2, 3, ..., N}. I think there's a shuffle method for arrays that will do that for you.
As requested, here's the code example:
function shuffle(array) {
var top = array.length;
while (top--) {
var current = Math.floor(Math.random() * top);
var tmp = array[current];
array[current] = array[top - 1];
array[top - 1] = tmp;
}
return array;
}
Sometimes the best way to randomize something (say a card deck) is to not shuffle it before pulling it out, but to shuffle it as you pull it out.
Say you have:
var i,
endNum = 51,
array = new Array(52);
for(i = 0; i <= endNum; i++) {
array[i] = i;
}
Then you can write a function like this:
function drawNumber() {
// set index to draw from
var swap,
drawIndex = Math.floor(Math.random() * (endNum+ 1));
// swap the values at the drawn index and at the "end" of the deck
swap = array[drawIndex];
array[drawIndex] = array[endNum];
array[endNum] = swap;
endNum--;
}
Since I decrement the end counter the drawn items will be "discarded" at the end of the stack and the randomize function will only treat the items from 0 to end as viable.
This is a common pattern I've used, I may have adopted it into js incorrectly since the last time I used it was for writing a simple card game in c#. In fact I just looked at it and I had int ____ instead of var ____ lol
If i understand well, you want an array of integers but sorted randomly.
A way to do it is described here
First create a rand function :
function randOrd(){
return (Math.round(Math.random())-0.5); }
Then, randomize your array. The following example shows how:
anyArray = new Array('1','2','3','4','5');
anyArray.sort( randOrd );
document.write('Random : ' + anyArray + '<br />';);
Hope that will help,
Regards,
Max
You can pass in a function to the Array.Sort method. If this function returns a value that is randomly above or below zero then your array will be randomly sorted.
myarray.sort(function() {return 0.5 - Math.random()})
should do the trick for you without you having to worry about whether or not every random number is unique.
No loops and very simple.

Why is pop faster than shift?

Douglas Crockford, in JavaScript: The Good Parts, states that "shift is usually much slower than pop". jsPerf confirms this. Does anyone know why this is the case? From an unsophisticated point of view, they seem to be doing pretty much the same thing.
To remove the returned item without re-addressing the array and invalidating all references to it, shift() requires moving the entire array around; pop() can simply subtract 1 from its length.
shift() has to re-index the whole array while pop() doesn't.
pop() simply removes the last element in the array. Therefore, the elements do not move; simply the .length has to be updated.
shift() removes the first element in the array. This requires a re-indexing of all elements in the array, so that [1] becomes [0] and so on.
I was doing some tests on this with node (which uses chrome v8) and noticed that for arrays up to around 120k elements the performance of shift is pretty close to pop. Once you get bigger than 120K it seems to slow down dramatically.
var sum;
var tests = [125000,130000];
console.log(JSON.stringify(process.versions));
tests.forEach(function(count) {
console.log('Testing arrays of size ' + count);
var s1 = Date.now();
var sArray = new Array(count);
var pArray = new Array(count);
for (var i = 0; i < count ; i++) {
var num = Math.floor(Math.random() * 6) + 1
sArray[i] = num;
pArray[i] = num;
}
console.log(' -> ' + (Date.now() - s1) + 'ms: built arrays with ' + count + ' random elements');
s1 = Date.now();
sum = 0;
while (pArray.length) {
sum += pArray.pop();
}
console.log(' -> ' + (Date.now() - s1) + 'ms: sum with pop() ' + count + ' elements, sum = ' + sum);
s1 = Date.now();
sum = 0;
while (sArray.length) {
sum += sArray.shift();
}
console.log(' -> ' + (Date.now() - s1) + 'ms: sum with shift() ' + count + ' elements, sum = ' + sum);
});
Output:
{"http_parser":"1.0","node":"0.10.22","v8":"3.14.5.9","ares":"1.9.0-DEV","uv":"0.10.19","zlib":"1.2.3","modules":"11","openssl":"1.0.1e"}
Testing arrays of size 125000
-> 14ms: built arrays with 125000 random elements
-> 2ms: sum with pop() 125000 elements, sum = 436673
-> 6ms: sum with shift() 125000 elements, sum = 436673
Testing arrays of size 130000
-> 50ms: built arrays with 130000 random elements
-> 1ms: sum with pop() 130000 elements, sum = 455971
-> 54372ms: sum with shift() 130000 elements, sum = 455971
Because shift() reindex array so the shift method is very slow on large array.
var array = [];
for(var i = 0;i< 1000000;i++){
array.push(i)
}
var start = new Date().getTime()
for(var i = 0; i< 100000; i++){
array.shift();
}
var duration = new Date().getTime() - start;// duration is so large, greater than 3 minutes
But the duration is just 8ms when using linked-queue
var LQueue = require('linked-queue')
var queue = new LQueue()
for(var i = 0;i< 1000000;i++){
queue.enqueue(i);
}
console.log("Queue length:"+ queue.length);
var start = new Date().getTime()
queue.dequeueAll(function(data){
})
var end = new Date().getTime();
console.log("Time:" + (end - start));// 8 ms
console.log("Queue length:"+ queue.length);
The difference can be negligible—Unoptimized executors may run shift much slower than pop, but optimized ones won't.
You can optimize like this:
let WrapArray = _=>{
//Ensure no other ref to `_`.
let numlike = _=>isNaN(_)?false:true
let num = _=>Number(_)
{
let shift_q = 0
return new Proxy(_, {
get(first_t, k){
switch(k){
case 'shift': return (z={})=>(z.r=first_t[0 + shift_q], delete first_t[0 + shift_q++], z.r)
break; case 'length': return first_t.length - shift_q
break; default: return first_t[numlike(k)?num(k) +/*todo overflowguard*/shift_q:k]
}
},
set(first_t, k, v){
switch(k){
case 'length': first_t.length = v + shift_q
break; default: first_t[numlike(k)?num(k) +/*todo overflowguard*/shift_q:k] = v
}
},
has(first_t, k){
return (numlike(k)?num(k) +/*todo overflowguard*/shift_q:k) in first_t
},
deleteProperty(first_t, k){
delete first_t[numlike(k)?num(k) +/*todo overflowguard*/shift_q:k];return 543
},
apply(first_t, t, s){
first_t.call(t, s)
},
construct(first_t, s, t){
new first_t(...s)
},
})
}
}
(_=WrapArray(['a','b','c'])).shift()
console.log(_.length/*2*/, _[0]/*b*/, _[1]/*c*/, _[2]/*undefined*/)
If you shift, you have copy all the elements in the array backwards. To pop, you only need to decrement the length of the array. Technically, an implementation could get around this, but you would need to store an extra `shift' variable that tells you where the real start of the array is. However, this type of operation has not proven to be very useful in practice and so most implementations save space by only storing a start of array pointer and a length value.

Categories