Determine the central point of the cluster with the most concentrated xy data points

In my project, I have a 200 x 200 square grid where users can vote on the next desired position of an object within this space. Each time a user submits their vote, the XY position is added to an array.

Currently, to determine the "winning" position, I calculate the average X and Y coordinates. However, I have noticed that the winning position tends to cluster around the middle of the area (as expected with averaging).

https://i.sstatic.net/o4osS.png

In the diagram: White represents votes, Yellow represents the "winning" XY point

Instead of relying solely on averages, I would like the system to identify the densest area of votes and choose a point in the center of that cluster.

This way, isolated or scattered votes will not heavily influence the final winning position as it does with averaging.

Is there a way to implement this functionality?

Example data array:

[ { x: 39, y: 28 },
  { x: 69, y: 33 },
  { x: 51, y: 51 },
  { x: 14, y: 63 },
  { x: 75, y: 140 },
  { x: 171, y: 68 },
  { x: 140, y: 53 },
  { x: 173, y: 150 },
  { x: 123, y: 179 },
  { x: 103, y: 150 },
  { x: 145, y: 119 },
  { x: 92, y: 85 },
  { x: 58, y: 49 },
  { x: 28, y: 65 },
  { x: 41, y: 39 },
  { x: 46, y: 41 },
  { x: 49, y: 51 },
  { x: 43, y: 55 },
  { x: 35, y: 48 },
  { x: 29, y: 31 },
  { x: 68, y: 22 },
  { x: 58, y: 39 } ]
javascriptarrayscoordinate-systems

Answer №1

One approach is to calculate the total distance from each point to all other points. The point with the lowest sum of distances is likely to be the central point of the region with the greatest density.

Answer №2

Instead of just proposing an idea, I've shared some actual code for you. Give it a try to see if it solves your problem.

Your issue seems to be related to cluster analysis. The goal is to identify different groups within your dataset that form clusters. You can learn more about cluster analysis by visiting this link.

Fortunately, there are existing methods to tackle this problem, including an NPM package that provides tools for cluster analysis.

I opted for DBSCAN to work with your data points, but feel free to explore other algorithms if needed. Check out this page for more on DBSCAN.

The library I used is density-clustering from NPM. See more details here: here

In my implementation, the parameters provided to DBSCAN were a neighbourhood radius of 20 and a minimum number of points required to be considered a "cluster" set at 5.

The code is based on a modified version of the sample available on the NPM package's GitHub page.

 (sample array and relevant code snippets)

The program output will indicate:

 The cluster points and their center coordinates

Answer №3

One way to simplify this is to aggregate all X values into one variable and divide it by the total number of X values. The same process can be applied for Y values as well.

var totalX = 0, totalY = 0, avgX, avgY;

var coords = [ { x: 39, y: 28 },
    { x: 69, y: 33 },
    { x: 51, y: 51 },
    { x: 14, y: 63 },
    ...
    { x: 58, y: 39 } ]

for (var i = 0; i <= coords.length; i++) {
    totalX += coords[i].x;
    totalY += coords[i].y;
}

avgX = totalX / coords.length;
avgY = totalY / coords.length;

To see a live example in action, visit this URL: https://jsfiddle.net/harr55d2/

Apologies for the confusion earlier - the previous explanation was incorrect. However, you could consider finding the average point and calculating the distances from that point to all other points. Averaging these distances may lead you closer to your desired outcome.

Another approach involves dividing the area into smaller blocks or circles and tallying votes within each block. The block with the highest number of votes would then determine the final result.

Additionally, you could assign a score or weight to each vote based on its distance from the average point. This way, votes closest to the average receive higher weightage in the final decision-making process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a sticky popup feature for your Chrome extension

Just starting out with chrome extensions and looking to create one that appends an external class to a selected tag. For example, let's say we have the following tag: <h1>extension</h1> When the user clicks on this element, I want to ad ...

javascriptjqueryhtmlcssgoogle-chrome-extension

Removing duplicate values in Vue after sorting

Explore <div v-for="todo in sortedArray"> <b-button block pill variant="outline-info" id="fetchButtonGap" v-model:value="todo.items[0].arrivalTime"> {{fromMilTime(todo.items[0].arrivalTime)}} < ...

javascriptvue.jsmomentjs

Guide to configuring a robust schema and validation with joi

Currently in the process of setting up validation using the joi package, encountering syntax-related issues along the way. The schema in place is simple, checking for a valid number and verifying if the ID exists in the database. export default router.pos ...

javascriptnode.jsexpressjoi

Encountering Error with Axios in Nuxt while Navigating Pages

Working on a nuxt application utilizing axios for API calls. In my index.vue file, I have the code snippet below. <template> <div> <Hero /> <Homebooks :details="details" /> </div> </template> <s ...

javascriptapivue.jsaxiosnuxt.js

loop through a multidimensional array using a foreach

I am attempting to display an array in the following format: durations&quot;:[{&quot;months&quot;:&quot;36&quot;},{&quot;months&quot;:&quot;48&quot;}],&quot;duration_default&quot;:&quot;60&quot;,&quot ...

phparraysmultidimensional-array

The browser is unable to access localhost:3000

Backend: Utilizing an Express server, created with the npx create-express-api command Frontend: Using Next.js, set up with npx create-react-app in the frontend directory Having executed these commands in the root folder, I attempted to run npm start xxx ...

javascriptnode.jsreactjsexpressnpm

Having trouble getting JavaScript to select a stylesheet based on time?

I am attempting to implement two different styles based on the time of day. Here is the code I am using to select the CSS file depending on the current time: <script type="text/javascript"> function setTimedStylesheet() { var currentTim ...

javascripthtmlcss

What is the best way to transfer a variable from jQuery to a PHP script?

While I am aware that similar questions have been asked in the past, I am facing a unique challenge in trying to create a table with distinct links and pass the id of the link to a PHP page. Here is what I have so far: echo("<p>To reser ...

javascriptphpjquery

Is it possible to select multiple drop-down lists on a webpage using Python and Selenium?

I am encountering an issue while attempting to click on multiple dropdown lists within a page. I continuously receive an error message stating that my list object does not have an attribute 'tag_name'. Here is my code snippet: def click_follow_ ...

javascriptpythonselenium

Encountering the error message "Angular 'undefined is not a function' when trying to define a component

My Ionic code was originally working fine, allowing the user to input a list. I decided to refactor it into a component for re-usability but encountered an error undefined is not a function on line 4 of the Javascript file. How can this issue be resolved? ...

javascriptangularjs

Creating a HMAC-SHA-256 signature in JavaScript for datatrans: A step-by-step guide

I'm currently working on an Angular project that involves implementing the Datatrans payment system. Unfortunately, I have been facing difficulties in generating a sign for the payment. I have been following the process outlined in this link (enter l ...

javascriptangularsha256cryptojs

Tips for adjusting the order in which styles load in NuxtJS

I need to adjust the loading order of styles in my current project. In my custom stylesheet style.css, I've made some overrides, body { font-family: "Lato", sans-serif; font-size: 14px; font-weight: 400; font-style: normal; ...

javascriptcssvue.jsbootstrap-vue

Enhancing User Experience with JQuery Pagination and Efficient Data Loading

I am looking to implement pagination for data retrieved from a database. The information needs to be displayed in a 4x4 table format. For the remaining data that doesn't fit in the initial view, I want to enable pagination with AJAX functionality so ...

javascriptjqueryajax

Dealing with ASP.NET forms that involve a javascript plugin generating substitute input

I'm facing an issue with my ASP.NET MVC webpage where I submit a form using AJAX in the following way: function ValidateFormAndAjaxSubmit(formId, callingElement) { if (IsNotDblClick(callingElement.id)) { var _form = $("#" + formId); ...

javascriptjqueryajaxasp.net-mvcjquery-plugins

Is there a way to dynamically replace a section of a link with the current URL using JavaScript or jQuery?

I have a link that appears on multiple pages, and I want to dynamically change part of the link based on the current URL* of the page being visited. (*current URL refers to the web address shown in the browser's address bar) How can I use JavaScript ...

javascriptjquery

The (ReactJS + Redux) form fails to load when the /new segment is appended to the URL

I'm currently working on a project using React, Redux, and Rails. I've encountered an issue with loading the form. In my App.js file, I have set up a Router that defines the routes. import React, { Component } from 'react'; import { Br ...

javascriptreactjsreact-reduxreact-router

Utilize JavaScript, MySQL, and PHP to input data into a database

My JS function is supposed to make an ajax request, but for some reason it's not working. I've checked the URL in an alert and all variables are declared. var request = new XMLHttpRequest(); var url = "ajax_js/q_ajax.php?q="+ques+ ...

javascriptphpajaxmysqli

switch between showing and hiding dynamic table rows

As I dynamically add rows to a table, each row can either be a parent row or a child row. My goal is to toggle the visibility of child rows when the parent row is clicked. if (response != null && response != "") { ...

javascripthtmlajaxjquery

Incorporating Dynamic Javascript: A Step-by-Step Guide

I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...

javascriptjqueryhtml

The specified project directory was not detected. Please restart Next.js in your updated directory

I am facing a challenge with running my NextJS web app on a VPS server with PM2 as the Process Management tool. Despite trying different approaches, I am unable to get it to run properly. I have a deploy.js file that successfully deploys my other NextJS an ...

javascriptnode.jslinuxnext.js