Plotly plots selection in JavaScript is very slow


Plotly plots selection in JavaScript is very slow



I am trying to plot a scatter plot of nearly 100k items using plotly in javascript. I then want to select certain points from the plot.


plotly


javascript



I am able to plot the graph as I needed. But when I am trying to select the points the selection tool runs to slow ie response from the tool is very slow. It only happens after a few seconds.



How can I make the selection faster.? Is it fully machine dependent and require more hardware for the purpose.?



The below code shows how I am plotting and selecting the points. x_selected and y_selected are two arrays used to store the points selected.


x_selected


y_selected


Plotly.plot(
graphDiv,
[
{
type: "scatter",
mode: "markers",
x: WS,
y: AP,
xaxis: "x",
yaxis: "y",
name: "WS v/s AP",
marker: { color: color1, size: 5 }
}
],
{
title: "Lasso around the scatter points to see sub-distributions",
dragmode: "lasso",
autoresize: false,
width: 1500,
height: 1500,

xaxis: {
zeroline: false
},
yaxis: {
domain: [0.55, 1]
},
xaxis2: {
domain: [0, 0.45],
anchor: "y2"
},
yaxis2: {
domain: [0, 0.45],
anchor: "x2"
},
xaxis3: {
domain: [0.55, 1],
anchor: "y3"
},
yaxis3: {
domain: [0, 0.45],
anchor: "x3"
}
}
);




// Record points

// to append the present selection

graphDiv.on("plotly_selected", function(eventData) {
var x = ;
var y = ;

x_selected = ;
y_selected = ;

var colors = ;
for (var i = 0; i < N; i++) colors.push(color1Light);

eventData.points.forEach(function(pt) {

x_selected.push(pt.x);
y_selected.push(pt.y);

colors[pt.pointNumber] = color1;
});





Plotly builds charts as SVG. 100k+ SVG nodes are definitely not something you'd want to use DOM to traverse/manipulate unless you know exactly what you are doing. You'll have to show us what exactly you mean by "selecting" points, otherwise there's no way we can give you input on how you could optimise this.
– Sergiu Paraschiv
Jun 29 at 10:02





Selecting in the sense drawing with the selection tool and at the same time appending the points that come under selection to an array. I will update the question to show code
– Sreeram TP
Jun 29 at 10:06





Not sure how the Plotly selection tool works, but "at the same time appending the points that come under selection to an array" sounds like it uses the DOM intersection API or something similar. That's going to be painfully slow on that amount of SVG nodes.
– Sergiu Paraschiv
Jun 29 at 10:08





I can't reduce the number of points and maybe I want to encounter more points in the future.
– Sreeram TP
Jun 29 at 10:10





Everything you're using is "built-in". Maybe you could prevent it from doing anything until mouseup, because I see it tries to highlight points real-time while drawing with the lasso tool.
– Sergiu Paraschiv
Jun 29 at 10:16


mouseup









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Possible Unhandled Promise Rejection (id: 0): ReferenceError: user is not defined ReferenceError: user is not defined

Possible Unhandled Promise Rejection (id: 0): ReferenceError: user is not defined ReferenceError: user is not defined I have stored data user with AsyncStorage when i want to get it, it renders null in alert and the above error in the console,i don't know why. I can not see why it returns null with user but token all is well profile.js : import React, {Component} from 'react'; import { StyleSheet, Text, View, Image, TouchableOpacity,AsyncStorage} from 'react-native'; import { Container, Content, Header,Right, Left, Body} from 'native- base'; import Feather from 'react-native-vector-icons/Feather'; export default class Profile extends Component { constructor (props){ super(props); this.state = { user: null } } componentDidMount(){ this.fetchData(); } fetchData = async() =>{ let username = await AsyncStorage.getItem('user') this.setState({ user: username }) ...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more