jquery array into organized (by original array index) chunks - javascript

Okay, so this is the idea.
1.I got an array with 12 numbers (a=[1,2,3,4,5,6,7,8,9,10,11,12]
2.I want to split it into 4 chunks so i did this...
a=[1,2,3,4,5,6,7,8,9,10,11,12];
var b = [];
while(a.length) {
b.push(a.splice(0,3));
}
This gave me an array with 4 elements with 3 values inside each element
i.e. [1,2,3,4] = [ 1 2 3 , 4 5 6 , 7 8 9 , 10 11 12 ]
3.Now my problem is that i would like it to be organized in a way that the first value goes into the first element, the second into the second, the third into the third, and the fourth into the fourth and it repeats the process until i got something like this:
i.e. [1,2,3,4] = [ 1 5 9 , 2 6 10 , 3 7 11 , 4 8 12 ]

This should do it;
var a = [1,2,3,4,5,6,7,8,9,10,11,12];
var chunksize = 3;
var numOfChunks = Math.ceil(a.length/ chunksize);
var b = new Array(numOfChunks);
for(var i=0; i<a.length; i++) {
var pos = i%numOfChunks;
if(!b[pos]) b[pos] = [];
b[pos].push(a[i]);
}

Related

Javascript compare values in column separately and sort such columns

I have a task to find an order ('2 4 5 10 123' , the next value must be bigger than the previous one) in separate columns of nested array.
function createArray(n){
let result = [];
for (var i = 0 ; i < n; i++) {
result[i] = [];
for (var j = 0; j < n; j++) {
result[i][j] = (Math.random() * 5 | 0) + 6;
}
}
return result;
}
var n = prompt("Enter the size of array"), result = createArray(n);
I've created the function to fill this array with random values and I'd like to have:
Loop to compare values in separate columns
Sort columns, depending on how much values included in order:
For example, we have a column 2 4 8 3 7 and we're finding order here. We did and we have 3 values, creating the order -> 2 4 8. We stop it, since the number 3 break it and we start from this particular number: 3 8. Now we have an order having 3 nums included and 2 nums included, but we save the biggest one and than we compare these counter of max ordered nums in different columns and sort them in a way, that the column with the biggest counter is on the left side and column with the smallest one - on the right side;
[
1 3 5
2 7 7
6 9 1
7 2 2
8 3 1
]
^ ^ ^
5 3 2
I'll surely be glad to have some help, at least with comparing values in columns.
Thanks for attention.
Nothing helped, ask for help ;)

How to create doubled start pattern using javascript for loops

How to achieve following pattern using for loops without relying on external memory outside the loop:
I want to return 3 zeros, 6 ones and 12 tows and so on..
// the number on the left represents the current index
// the number on the right represents the value that needs to be returned
/*
0 = 0
1 = 0
2 = 0
3 = 1
4 = 1
5 = 1
6 = 1
7 = 1
8 = 1
9 = 2
10 = 2
11 = 2
12 = 2
13 = 2
14 = 2
15 = 2
16 = 2
17 = 2
18 = 2
19 = 2
20 = 2
*/
basically this will help me achieve the following star pattern:
***
******
************
************************
************************************************
I can use the following following but it's not what I really need.
let x = 3;
while (x < 30) {
console.log(x)
x = x * 2
}
In my case, I have a function that exposes an index prop that increments from 0 to a certain value x:
animation.start(({ index }) => {
// is it really possible to achieve the above patten (3, 6, 12..) using only the index prop.
})

Iterate an array into a custom grid

I have a gird similar with a table with columns and rows but custom created with divs and spans and I want to populate every cell with values from many arrays and is not really working :|
so this is my function that generay those arrays:
function generate(count, values) {
return Array.apply(null, { length: count }).map(function () {
var r = [],
array = values.slice();
while (array.length) {
r.push(array.splice(Math.floor(Math.random() * array.length), 1)[0]);
}
return r;
});
};
var myStringArray = generate(7, [1, 2, 3, 4, 5, 6, 7]);
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
console.log(myStringArray[i]);
}
and with this I try to add each array on each row but unfortunatley is not working.
Array.from(document.getElementsByClassName('cell')).forEach(function(e, j) {
e.textContent = myStringArray[i];
});
fiddle:
I'm not sure if i understand you right but i would try this JS code.
First we have to take your 2D Array and calculate the x and y coordinates. Its the index of your cells. If you have 7 Cells in a Row and 4 Rows you have 7*4=28 Output Elements (called Cell). All the Cell's where in a long 1D array. After the 7th Element a new Row start (and after 14th and so on). The Column number is the Index (Number of Cell inside your 1D array) mod 7 (the number of elements of one Row).
Index 0 --> x = Index % 7 = 0 % 7 = 0
Index 6 --> x = Index % 7 = 6 % 7 = 6
Index 7 --> x = Index % 7 = 7 % 7 = 0
Now we need the Row number. This is also the Index but divided by 7 (the number of elements of one Row)
Index 0 --> y = Index / 7 = 0 / 7 = 0
Index 6 --> y = Index / 7 = 6 / 7 = 0.85...
Index 7 --> y = Index / 7 = 7 / 7 = 1
Index 8 --> y = Index / 7 = 8 / 7 = 1.14...
1.14 isn't a nice row number. so we have to cut of the numbers after the point with Math.floor.
And now we have the coordinates x and y. We can use them inside the 2D Array and thats it :)
Array.from(document.getElementsByClassName('cell')).forEach(function(e, j){
//
var y = Math.floor(j/myStringArray.length);
var x = j%myStringArray.length;
e.textContent = myStringArray[y][x] /*+"("+x+","+y+")"*/;
});
Edited fiddle: https://jsfiddle.net/truvh94a/6/
If it's not what you want, please post an example result.
A different approach to your problem with two less specific utility functions, than your generate.
//retuns an Array of nodes that match the css-selector
function $$(selector, ctx){
if(!ctx || !ctx.querySelectorAll) ctx = document;
return Array.from(ctx.querySelectorAll(selector));
}
//shuffles an Array in place and returns it
function shuffle(arr){
for(var i=arr.length, j, tmp; i-->1;){
tmp = arr[ j = 0|(Math.random() * i) ];
arr[j] = arr[i];
arr[i] = tmp;
}
return arr;
}
//forEach `.row` ...
$$('.row').forEach(function(row){
// ... generate a shuffled sequence ...
var values = shuffle([1,2,3,4,5,6,7]);
//... and apply the values to the `.cell`s textContent
$$('.cell', row).forEach(function(cell, i){
cell.textContent = values[i];
});
});

Covert integer in pattern (1>=5, 6>=10, 11>=15 ...)

I have no idea to covert int like 1>=5, 6>=10, 11>=15 ...
I don't know how this call, but I think this example will explain my question...
1 = 5
2 = 5
3 = 5
4 = 5
5 = 5
6 = 10
7 = 10
8 = 10
9 = 10
10 = 10
11 = 15
//and more..
So JS
var x = 1;
var result = (???) // 5
This should do the trick:
Math.floor((x-1)/5 + 1) * 5
Simpler version (#RichardTowers):
Math.ceil(x/5) * 5
You can do this way:
var x=1;
var change= numberChange(x);
function numberChange(x){
while(x%5!=0){
x=x+1;
}
return x;
}
alert(change);
Demo Fiddle

D3.js multiple area chart not working

I am following this tutorial for creating multiple area charts with D3.js and I want to customize it to my data.
His data is:
Year, Variable1, Variable2, etc
My data is
YYYYMMDD, variable1, variable2, etc
I changed this part of the code to convert the date column to a Date object:
function createChart(data){
var countries = [];
var charts = [];
var maxDataPoint = 0;
/* Loop through first row and get each country
and push it into an array to use later */
for (var prop in data[0]) {
if (data[0].hasOwnProperty(prop)) {
if (prop != 'Day') {
countries.push(prop);
}
}
};
var countriesCount = countries.length;
var startYear = (data[0].Day).substr(0,4);
var endYear = (data[data.length - 1].Day).substr(0,4);
var chartHeight = height * (1 / countriesCount);
/* Let's make sure these are all numbers,
we don't want javaScript thinking it's text
Let's also figure out the maximum data point
We'll use this later to set the Y-Axis scale
*/
data.forEach(function(d) {
for (var prop in d) {
if (d.hasOwnProperty(prop)) {
d[prop] = parseFloat(d[prop]);
if (d[prop] > maxDataPoint) {
maxDataPoint = d[prop];
}
}
}
// D3 needs a date object, let's convert it just one time
var y = (d.Day).substr(0,4),
m = (d.Day).substr(4,2) - 1,
d = (d.Day).substr(6,2);
d.Day = new Date(y,m,d);
});
This is a sample of my data and there is around 400 rows
Day NYTimes Guardian The Peninsula Gulf Times
20101201 1 8 2 0
20101203 3 9 2 0
20101205 6 10 4 1
20101207 2 9 5 1
20101209 1 3 7 0
20101211 12 8 6 0
20101213 3 4 3 0
No graph is shown, I just get a blank page and no errors on the console, take a look here. What is wrong?
Somewhere in the code, the Day value is getting converted from a string ("20101201") to an integer (20101201). You are then getting a no method substr error when trying use .substr() on a integer.
Try converting the var y to a string using .toString() by replacing line:
var y = (d.Day).substr(0,4)
With
var y = (d.Day).toString().substr(0,4)
Or consider using the d3's built in time parsing functions

Categories

Resources