Related
I have a data variable that needs to be represented on a line chart in Chart.js in React app. I am showing train and test data on the same line chart.
The values for the train dataset and test dataset are as follows:
train(y-axis): [369, 438, 329, 435, 359, 345, 406, 469, 457, 499, 352, 336, 480, 499, 354]
test(y-axis): [354, 354, 354, 354, 354]
The values for the train dataset indices and test dataset indices are as follows:
train_idx(x-axis): [0, 1, 2, 3, 4, 5,6,7 ,8 9, 10, 11, 12, 13, 14]
test_idx(x-axis): [14, 15, 16, 17, 18] /
I have hard-coded the values for now and the code looks as follows:
const [data, setData] = useState({
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
datasets: [{
label: 'Train Dataset',
data: [{x: 0, y: 369},
{x: 1, y: 438},
{x: 2, y: 329},
{x: 3, y: 435},
{x: 4, y: 359},
{x: 5, y: 345},
{x: 6, y: 406},
{x: 7, y: 469},
{x: 8, y: 457},
{x: 9, y: 499},
{x: 10, y: 352},
{x: 11, y: 336},
{x: 12, y: 480},
{x: 13, y: 499},
{x: 14, y: 354}],
//data: [369, 438, 329, 435, 359, 345, 406, 469, 457, 499, 352, 336, 480, 499, 354],
borderColor: 'blue',
}, {
label: 'Test Dataset',
data: [{x: 14, y: 354},
{x: 15, y: 354},
{x: 16, y: 354},
{x: 17, y: 354},
{x: 18, y: 354}],
//data: [354, 354, 354, 354, 354],
type: 'line',
borderColor: 'purple',
}],
})
From the above data, I get a graph that looks like this:
Now, I need the same graph but without hard-coding the values like above.
Please help me. The resulting graph without hard-coding the values needs to look like the picture.
I have 1D pointer array like below:
Darray = [{x: 334, y: 400.5}, {x: 237, y: 389},{x: 149, y: 387.5},{x: 55, y: 379.5},{x: 210, y: 301.5},{x: 48, y: 295.5},{x: 378.5, y: 224.5},{x: 283, y: 217.5},{x: 121.5, y: 211.5},{x: 198.5, y: 211.5},{x: 42.5, y: 201},{x: 33, y: 134},{x: 364, y: 142},{x: 268.5, y: 137},{x: 192, y: 136.5},{x: 106, y: 131.5},{x: 263.5, y: 68},{x: 182.5, y: 63.5},{x: 102.5, y: 61.5},{x: 344.5, y: 65.5},{x: 32, y: 52}]
//console.log(Darray)
const points = Darray.slice();
points.sort((a, b) => a.y - b.y);
console.log(points)
I want to convert this 1D array into 2D array based on the array row length. For example,
row_length = [5, 5, 5, 2, 4]
new_Darray = [[element[1,1],element[1,2], element[1,3], element[1,4], element[1,5],
[element[2,1],element[2,2], element[2,3], element[2,4], element[2,5],
[element[3,1],element[3,2], element[3,3], element[3,4], element[3,5],
[element[4,1],element[4,2],
[element[5,1],element[5,2], element[5,3], element[5,4], element[5,5]]
Here, element[i] represents {x:someValue, y:someValue}
Sorry, if I wrongly represented anything. Any help will be highly appreciated.
Using map, slice and temp variable, can be simplified to one-liner
const Darray = [
{ x: 334, y: 400.5 },
{ x: 237, y: 389 },
{ x: 149, y: 387.5 },
{ x: 55, y: 379.5 },
{ x: 210, y: 301.5 },
{ x: 48, y: 295.5 },
{ x: 378.5, y: 224.5 },
{ x: 283, y: 217.5 },
{ x: 121.5, y: 211.5 },
{ x: 198.5, y: 211.5 },
{ x: 42.5, y: 201 },
{ x: 33, y: 134 },
{ x: 364, y: 142 },
{ x: 268.5, y: 137 },
{ x: 192, y: 136.5 },
{ x: 106, y: 131.5 },
{ x: 263.5, y: 68 },
{ x: 182.5, y: 63.5 },
{ x: 102.5, y: 61.5 },
{ x: 344.5, y: 65.5 },
{ x: 32, y: 52 },
];
const points = Darray.slice();
points.sort((a, b) => a.y - b.y);
// console.log(points);
const row_length = [5, 5, 5, 2, 4];
let last = 0;
const output = row_length.map((len) => points.slice(last, (last += len)));
console.log(output);
I have to add gradient inside a foot shape according to the value of a point inside the foot. I have X and Y coordinates of a point and a value is attached to it. According to the value I have to assign color gradient like in the picture below. Higher the value of a point, darker the area is
So far, I have created the foot and added 2 color gradient to the whole foot, but I am unable to add gradient like this in the picture. Below is what I have achieved. Please if anyone could help me to find any solution to this
Here is the Stackblitz Link
Sample data :
[
{sensor: 0, value: 7.4, x: 108, y: 406}
{sensor: 1, value: 8.1, x: 68, y: 412}
{sensor: 2, value: 3.6, x: 108, y: 346}
{sensor: 3, value: 4.5, x: 61, y: 350}
{sensor: 4, value: 0.5, x: 108, y: 280}
{sensor: 5, value: 1, x: 49, y: 288}
{sensor: 6, value: 1, x: 122, y: 200}
{sensor: 7, value: 0.5, x: 30, y: 218}
{sensor: 8, value: 3.3, x: 140, y: 109}
{sensor: 9, value: 3.4, x: 105, y: 114}
{sensor: 10, value: 2.7, x: 78, y: 119}
{sensor: 11, value: 2.3, x: 51, y: 124}
{sensor: 12, value: 1.6, x: 22, y: 136}
{sensor: 13, value: 3.5, x: 121, y: 41}
{sensor: 14, value: 1.2, x: 85, y: 45}
{sensor: 15, value: 1, x: 50, y: 59}
]
Here is a hit map with 'populated' data (based on average value of closest points):
Just add the mask of the foot contour...
const data = [
{sensor: 0, value: 7.4, x: 108, y: 406},
{sensor: 1, value: 8.1, x: 68, y: 412},
{sensor: 2, value: 3.6, x: 108, y: 346},
{sensor: 3, value: 4.5, x: 61, y: 350},
{sensor: 4, value: 0.5, x: 108, y: 280},
{sensor: 5, value: 1, x: 49, y: 288},
{sensor: 6, value: 1, x: 122, y: 200},
{sensor: 7, value: 0.5, x: 30, y: 218},
{sensor: 8, value: 3.3, x: 140, y: 109},
{sensor: 9, value: 3.4, x: 105, y: 114},
{sensor: 10, value: 2.7, x: 78, y: 119},
{sensor: 11, value: 2.3, x: 51, y: 124},
{sensor: 12, value: 1.6, x: 22, y: 136},
{sensor: 13, value: 3.5, x: 121, y: 41},
{sensor: 14, value: 1.2, x: 85, y: 45},
{sensor: 15, value: 1, x: 50, y: 59},
];
const populateData = (points, width, height, step) => {
const populated = [];
for (let x = 0; x < width; x += step)
for (let y = 0; y < height; y += step) {
const distances = points.map(p =>
({...p, distance: Math.hypot(p.x - x, p.y - y)})).filter(d => d.distance < 100);
const sum = distances.reduce((s, d) => s + 1 / d.distance, 0);
const value = distances.reduce((a, d) => a + 1 / sum / d.distance * d.value, 0);
populated.push({x, y, value});
}
return populated;
};
const pd = populateData(data, 300, 500, 10);
const RECT_SIZE = 20;
const getColor = v => `rgb(255,${255 - v * 25},0)`
const svg = d3.select('svg');
pd.forEach(d => {
svg.append('rect')
.attr('x', d.x - RECT_SIZE / 2)
.attr('y', d.y - RECT_SIZE / 2)
.attr('width', RECT_SIZE / 2)
.attr('height', RECT_SIZE / 2)
.style('fill', getColor(d.value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="500" />
Here is a simple plot with the data you provided:
If you have more points, it can be a more precise picture
const data = [
{sensor: 0, value: 7.4, x: 108, y: 406},
{sensor: 1, value: 8.1, x: 68, y: 412},
{sensor: 2, value: 3.6, x: 108, y: 346},
{sensor: 3, value: 4.5, x: 61, y: 350},
{sensor: 4, value: 0.5, x: 108, y: 280},
{sensor: 5, value: 1, x: 49, y: 288},
{sensor: 6, value: 1, x: 122, y: 200},
{sensor: 7, value: 0.5, x: 30, y: 218},
{sensor: 8, value: 3.3, x: 140, y: 109},
{sensor: 9, value: 3.4, x: 105, y: 114},
{sensor: 10, value: 2.7, x: 78, y: 119},
{sensor: 11, value: 2.3, x: 51, y: 124},
{sensor: 12, value: 1.6, x: 22, y: 136},
{sensor: 13, value: 3.5, x: 121, y: 41},
{sensor: 14, value: 1.2, x: 85, y: 45},
{sensor: 15, value: 1, x: 50, y: 59},
];
const RECT_SIZE = 20;
const getColor = v => `rgb(255,${255 - v * 25},0)`
const svg = d3.select('svg');
data.forEach(d => {
svg.append('rect')
.attr('x', d.x - RECT_SIZE / 2)
.attr('y', d.y - RECT_SIZE / 2)
.attr('width', RECT_SIZE / 2)
.attr('height', RECT_SIZE / 2)
.style('fill', getColor(d.value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="500" />
I need to know the best method to check if the value is in the array before push it
I have an array :
coordinates: [
{x: 160, y: 160},
{x: 192, y: 160},
{x: 224, y: 160},
{x: 224, y: 192},
];
For each call of my function , I need to check if new coordinates is it before proceed to push.
const payload= {x: 224, y: 190}
//Next function call
const payload = {x: 224, y: 190} // need to refuse pushing this value
I tried filter and other JS methods without success.
for example:
coordinates.filter(c => {if(payload !== c){coordinates.push(new)});
This one doesn't work for me .
since each coordinate is an object, you'll need to do a deep comparison to check if the object exists in your array already:
const coordinates = [{
x: 160,
y: 160
}, {
x: 192,
y: 160
}, {
x: 224,
y: 160
}, {
x: 224,
y: 192
}];
const isInArray = newCoordinate => coordinates.filter(c => newCoordinate.x === c.x && newCoordinate.y === c.y).length > 0;
console.log(isInArray({
x: 0,
y: 0
})) // false
console.log(isInArray({
x: 160,
y: 160
})) // true
I hope this helps
var coordinates= [
{x: 160, y: 160},
{x: 192, y: 160},
{x: 224, y: 160},
{x: 224, y: 192},
];
const payload = {x: 225, y: 193};
for(let prop of coordinates){
if(prop.x == payload.x || prop.y == payload.y){
var includes = true;
} else {
includes = false;
}
}
if(includes == false){
coordinates.push(payload);
}
console.log(coordinates);
A simple checker function to check duplicate objects
var coordinates=[
{x: 160, y: 160},
{x: 192, y: 160},
{x: 224, y: 160},
{x: 224, y: 192},
];
const pushCoordinate=(obj)=>{
var flag=0;
coordinates.forEach((elem)=>{
if(obj.x===elem.x && obj.y===elem.y){
flag=1;
}
});
if(flag===1){
return false;
}else{
return true;
}
};
var payload1 = {x: 224, y: 190};
var payload2 = {x:224, y:190};
if(pushCoordinate(payload1)){
coordinates.push(payload1);
}
if(pushCoordinate(payload2)){
coordinates.push(payload2);
}
console.log(coordinates);
you can simply use filter array method to check x,y values
and if the filtered array has no length then there are no matching values and push payload object
let filteredArr;
let coordinates = [
{x: 160, y: 160},
{x: 192, y: 160},
{x: 224, y: 160},
{x: 224, y: 192}
];
// checker fn
const checker = (obj) => filteredArr = coordinates.filter(elm => obj.x == elm.x && obj.y == elm.y);
let payload = {x: 224, y: 190};
checker(payload);
// no matching
if (filteredArr.length === 0) coordinates.push(payload);
console.log(coordinates);
var payload = {x: 224, y: 190};
var coordinates = [
{x: 160, y: 160},
{x: 192, y: 160},
{x: 224, y: 160},
{x: 224, y: 192},
];
var filtered = coordinates.filter(c => c.x == payload.x &&
c.y == payload.y);
if (filtered.length == 0) filtered.push(payload)
console.log("Filtered:", filtered)
You can use some() to check whether coordinates array includes the values of payload object
const coordinates = [
{x: 160, y: 160},
{x: 192, y: 160},
{x: 224, y: 160},
{x: 224, y: 192},
];
const payload = {x: 224, y: 192};
if(!coordinates.some(({x, y}) => x === payload.x && y === payload.y)) {
coordinates.push(payload);
}
console.log(coordinates);
I am building something where I need to draw multiple rectangles, either adding them or subtracting them, and from that produce one or more polygons that represent the overall area enclosed. This would work like the thing you see in paint programs, etc, where you can create a selection by drawing rectangles and clicking the + or - button to determine whether to add or subtract from the current selected area.
I can do all the drawing code, but need to know how to convert an ordered series of rectangles, each with a mode of "add" or "subtract", into one or more polygons. Here is how I envision it being used:
var rectList = [
{x: 50, y: 40, w: 20, h: 30, mode: "+"},
{x: 24, y: 12, w: 14, h: 62, mode: "+"},
{x: 12, y: 30, w: 34, h: 14, mode: "-"},
{x: 22, y: 21, w: 45, h: 19, mode: "+"},
{x: 17, y: 20, w: 10, h: 21, mode: "+"}
];
var polygonList = getPolygonsFromRectangleList (rectList);
The polygonList might look like this (an array of arrays of points). (The numbers below are just made up and have nothing to do with the input above)
[
[
{x: 23, y: 12},
{x: 14, y: 12},
{x: 14, y: 36},
{x: 24, y: 36},
....
],
[
{x: 32, y: 45},
{x: 32, y: 22},
{x: 14, y: 22},
...
]
I imagine this must be a pretty standard graphics gem sort of thing.