Develop Reference

sort 2 array's with objects of coordinates to get a list of which are closest to each-other

I have 2 array's with objects of coordinates. For example:
const coordinates = [
{ x: 2, y: 6 },
{ x: 14, y: 10 },
{ x: 7, y: 10 },
{ x: 11, y: 6 },
];
const coordinates2 = [
{ x: 8, y: 9 },
{ x: 25, y: 11 },
{ x: 2, y: 11 },
{ x: 7, y: 8 },
];
I want to make an sort function which will return which are closest to each other.
I tried multiple things but can not figure it out.
Any solution is accepted. Maybe sort 1 to the other or sort both at the same time.
This is wat I want to achive:
result array 1[
{ x: 2, y: 6 },
{ x: 14, y: 10 },
{ x: 7, y: 10 },
{ x: 11, y: 6 },
];
result array 2 = [
{ x: 2, y: 11 }, // beceause it is closest to {x: 2,y: 6}
{ x: 25, y: 11 }, // beceayse it is closest to {x: 14,y: 10},
{ x: 7, y: 8 }, // beceause it is closest to { x: 7, y: 10 }
{ x: 8, y: 9 }, // beceause it is closest to {x: 11,y: 6} after x: 7, y:10 but x:7, y:8 is even closer
];
^ the result can be different. But I want the most efficient distance between them.
The formula to see the distance of coordination a and coordination b is the following:
distance=√((x1-x2)²+(y1-y2)²).
If anyone has an idea or an tip please let me know !

You could map the first array by getting the closest coordinate from the second array.
const
getClosest = ({ x, y }, data) => data.reduce((a, b) => Math.hypot(x - a.x, y - a.y) < Math.hypot(x - b.x, y - b.y) ? a : b),
coordinates = [{ x: 2, y: 6 }, { x: 14, y: 10 }, { x: 7, y: 10 }, { x: 11, y: 6 }, { x: 6, y: 2 }],
coordinates2 = [{ x: 8, y: 9 }, { x: 25, y: 11 }, { x: 2, y: 11 }, { x: 18, y: 21 }, { x: 7, y: 8 }],
pairs = coordinates.map(o => [o, getClosest(o, coordinates2)]);
console.log(pairs);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Someone have an idea how i can calculate the position?

So I have triangles and getting Information of which triangles is on what Connection.
like so:
[
{id:3
connected:[2,1,null]}
{id:1
connected:[null,null,3]}
{id:2
connected:[4,3,null]}
{id:4
connected:[2,null,null]}
]
It would look like this:
I need some method to calculate the X- and Y-position and rotation
When i hard code it would look like this:
[
{
id: 3,
x: 200,
y: 200,
radius: 100,
rotation: 0,
},
{
id: 1,
x: 300,
y: 150,
radius: 100,
rotation: 180,
},
{
id: 2,
x: 200,
y: 310,
radius: 100,
rotation: 180,
},
{
id: 4,
x: 300,
y: 360,
radius: 100,
rotation: 0,
},
]

Highcharts xrange timeline overlapping

I am using Highcharts with the xrange plugin, as seen in this fiddle here.
As seen in the dataobject, I have two areas that overlap:
data: [{
x: Date.UTC(2015, 0, 1),
x2: Date.UTC(2020, 11, 2),
y: 0
}
,{
x: Date.UTC(2015, 0, 1),
x2: Date.UTC(2020, 5, 2),
y: 0
}
, {
x: Date.UTC(2015, 0, 2),
x2: Date.UTC(2020, 11, 5),
y: 1
}]
Is there a Highcharts way to group a 'y row' according to the rowLabel, as is done in google charts, as seen below?
var options = {
**timeline: { groupByRowLabel: true},**
backgroundColor: 'white',
avoidOverlappingGridLines: true,
tooltip: { isHtml: false }
};
I would like to create this without creating a new row (e.g. y:3), as this causes spacing, alternating colours and visual confusion in the dataset.
EDIT: Here is what I am looking for:

Is it possible to manually set the scale and ticks on a plot.ly 3D scatter graph?

I have a basic plot.ly 3D scatter graph with various paths specified in three dimensions. After three days of reading documentation, I still haven't found a way to define the tick interval of my axes. It seems to be auto-generating them based on my data, which I don't want. In effect, I need my three axes to be in a 1:1:1 ratio, is this possible?
<style>html, body { height: 100%; }</style>
<div id="myDiv" style="width: 100%; height: 100%"></div>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var data = [
{
x: [-886, -719],
y: [-4785, -5192],
z: [527, 501],
type: 'scatter3d'
},
{
x: [-1782, -92],
y: [1740, -5172],
z: [18, 252],
type: 'scatter3d'
},
{
x: [3844, -450],
y: [35, -5185],
z: [20, 219],
type: 'scatter3d'
},
{
x: [2770, 761],
y: [2360, -5122],
z: [246, 96],
type: 'scatter3d'
},
{
x: [3800, 546],
y: [-3419, -5215],
z: [57, 311],
type: 'scatter3d'
},
{
x: [-340, 775],
y: [-3893, -5189],
z: [573, 135],
type: 'scatter3d'
},
{
x: [-3141, -41],
y: [3677, -5205],
z: [18, 383],
type: 'scatter3d'
},
{
x: [19, -546],
y: [261, -5181],
z: [74, 93],
type: 'scatter3d'
},
{
x: [3, 789],
y: [394, -5165],
z: [112, 421],
type: 'scatter3d'
}
];
var layout = {
// height: 700,
// width: 700,
xaxis: {
range: [-5000, 5000]
},
yaxis: {
range: [-5000, 5000]
}
};
Plotly.newPlot('myDiv', data, layout);
</script>
Code demonstration: https://rocket-league-replays.github.io/3d-hitmaps/

I am less familiar with the javascript plotly api, this answer was written with python in mind. Hopefully it also helps in your situation.
If I understand your question properly you want to set the tickmode for the axis, and depending on the mode you pick you also want to set either nticks; tick0 and dticks; or tickvals.
the following is taken from: https://plot.ly/python/reference/#layout-scene-xaxis-tickmode a difficult to effectively search, but very useful page. The javascript version of the page is: https://plot.ly/javascript/reference/#layout-scene-xaxis-tickmode
tickmode (enumerated: "auto" | "linear" | "array" )
Sets the tick mode for this axis. If "auto", the number of ticks is set via nticks. If "linear", the placement of the ticks is determined by a starting position tick0 and a tick step dtick ("linear" is the default value if tick0 and dtick are provided). If "array", the placement of the ticks is set via tickvals and the tick text is ticktext. ("array" is the default value if tickvals is provided).

Again this is for python, but in the scene option there is a way to set the range of the x, y, or z axis using the range(list) option in the xaxis (or yaxis or zaxis) below is an example code.
scene = dict(xaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minX,maxX)),
yaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minY, maxY)),
zaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minZ, maxZ)))
fig['layout'].update(scene)
here is the documentation: https://plot.ly/python/reference/#layout-xaxis-range and for java https://plot.ly/javascript/reference/#layout-xaxis-range

Yes, sure. That information is possible to be seen in Plotly's documentation on how to format axes for 3d charts.
Code wise, what you want is something like this
var layout = {
scene:{
aspectmode: "manual",
aspectratio: {
x: 1, y: 1, z: 1,
},
xaxis: {
nticks: 100,
range: [-5000, 5000],
},
yaxis: {
nticks: 100,
range: [-5000, 5000],
},
zaxis: {
nticks: 100,
range: [-5000, 5000],
}},
};

Panning in Highcharts will not allow to go back to the max of the xAxis

I have a Highcharts chart which uses panning: true and sets min and max on the xAxis to provide the initial view together with historical data in the past as part of the data-series.
Initially panning works fine and I can go back in time, nice. However when I pan back to "now", it only allows to pan back to the last data-point, but not back to max, which is set higher on purpose here as I also have plotLines in the chart.
Relevant parts from the JS as follows, see http://jsfiddle.net/centic/efej646r/
There is a line for "Now" and you can pan to the left, but when you pan back to the right, the plotLine does not appear again.
Is there a way I can get this to work or is it a bug/limitation in highcharts?
chart: {
type: 'scatter',
panning: true
},
xAxis: {
type: 'datetime',
min: 1417161437595,
max: 1418435999999,
...
series: [
{
marker: {
enabled: true
},
data: [
{ x: 1410444900022, y: 0},
{ x: 1410786746435, y: 0},
{ x: 1410788673693, y: 0},
{ x: 1410945014300, y: 0},
{ x: 1410945194162, y: 0},
{ x: 1410952366889, y: 0},
{ x: 1410954169041, y: 0},
{ x: 1410966771659, y: 0},
{ x: 1411144973005, y: 0},
{ x: 1411371815266, y: 0},
...

You could add invisible series that will be disabled from mouse tracking.
Example: http://jsfiddle.net/efej646r/2/
Added series:
{data:[{ x: 1418435999999, y: 0}], color: 'rgba(0,0,0,0)',enableMouseTracking:false}