A method for processing interactive and extended information of overlapping points in a scatter plot

Abstract

This invention belongs to the field of scatter plot processing technology and discloses a method for processing interactive and extended information of overlapping points in a scatter plot. The specific steps are as follows: Step 1: Obtain the raw data of all scatter points from the backend; Step 2: Parse the data into the data format required by ECharts scatter plots. Drawing scatter plots according to the logic of this invention can achieve a more perfect interactive effect, with the following advantages: multiple extended information of overlapping scatter points will not appear; the number of scatter points in the scatter plot is reduced, making the data easier to understand; the display style of overlapping scatter points will not overlap; the display information of overlapping scatter points can be customized by the product to provide more user-friendly extended information; when an overlapping point is hit, it is clearer from the scatter plot which scatter point is hit; when hovering over an overlapping point, the information of all overlapping points can be better displayed; when clicking on an overlapping point, it can achieve the hit of a custom scatter point and the corresponding scatter point in the tooltip; the zoom bar can scale scatter points with similar coordinates, etc.

Description

Technical Field

[0001] This invention belongs to the field of scatter plot processing technology, specifically a method for processing interactive and extended information of overlapping points in a scatter plot. Background Technology

[0002] Using charts to display data makes it easier to visually represent large amounts of data. Scatter plots are particularly effective in work reports or in helping stakeholders understand the relationships and trends between data and the data processing you want to convey. Scatter plots can help us discover hidden relationships between variables, which facilitates data analysis and guides decision-making. Therefore, scatter plots are frequently used in many data products.

[0003] As products diversify, so too do the interactions of scatter plots. However, scatter plots inevitably suffer from overlapping data points. Especially in scenarios with diverse scatter plot interactions, the interaction with overlapping points can affect user comfort and cause some confusion. Most scatter plots on the market only offer visualization effects with very few click interactions. Furthermore, most solutions for overlapping points involve displaying text about the overlapping points and showing information about all overlapping points when hovering over them. Some solutions on the market calculate the displacement difference between overlapping points to offset the scatter points and resolve overlapping issues. However, this still doesn't prevent the possibility of overlap with other data points even after offsetting the coordinates, especially with large datasets. Therefore, improvements are needed. Summary of the Invention

[0004] The purpose of this invention is to provide a method for processing interactive and extended information of overlapping points in a scatter plot, so as to solve the problems mentioned in the background art.

[0005] To achieve the above objectives, the present invention provides the following technical solution: a method for processing interactive and extended information of overlapping points in a scatter plot, the specific steps of which are as follows:

[0006] Step 1:

[0007] Retrieve the raw data of all scatter points from the backend;

[0008] Step Two:

[0009] Parsing Data -- Converting data into the format required for ECharts scatter plots;

[0010] Step 3:

[0011] The data is analyzed, grouped, and the scattered points on the scatter plot are parsed out. These points contain non-overlapping coordinate points and overlapping points. Overlapping points are identified by finding the same coordinate points according to certain rules. The coordinate points that are the same as the original coordinate point are collected and saved into an object. Then, custom coordinate points are created using these coordinate points, including processing the necessary point information and handling whether to highlight them.

[0012] Step Four:

[0013] The created custom coordinate point carries all the scatter points that overlap with it, and a custom outline name, such as '**** etc.', where 'etc.' indicates that there are multiple scatter points and ID identifiers;

[0014] Step 5:

[0015] Use the scatter plot data parsed from the above steps to initialize and create an ECharts scatter plot instance;

[0016] Step Six:

[0017] Draw an ECharts scatter plot;

[0018] Step Seven:

[0019] When hovering over a custom scatter point, the tooltip component of ECharts is used to draw tooltip information, displaying scatter point information that is equal to the coordinates of the custom scatter point.

[0020] Step 8:

[0021] When a custom scatter point is clicked, the custom scatter point hit style is triggered, and the highlight effect of the custom scatter point is updated.

[0022] Step Nine:

[0023] When hovering over a custom scatter plot, a tooltip is displayed. Clicking on another scatter plot in the tooltip will update the outward information, ID, and related information of the custom scatter plot without destroying the ECharts scatter plot instance. At the same time, the custom scatter plot style and the corresponding scatter plot in the tooltip will be hit (highlighted) to render the chart.

[0024] Step 10:

[0025] For scatter plots with similar coordinates, add a zoom bar to the ECharts scatter chart to support zooming in and out.

[0026] Step Eleven:

[0027] When switching query conditions to obtain a new data source, the above steps (cycle) are repeated.

[0028] As a preferred technical solution of the present invention, the non-coincident coordinate points mentioned in step three refer to coordinate points that are not equal, while coincident points refer to data with equal coordinate points.

[0029] As a preferred technical solution of the present invention, the creation of custom coordinate points in step three can distinguish the same coordinate points according to their required processing methods.

[0030] As a preferred technical solution of the present invention, the tooltip component described in step seven can be customized to draw tooltip information according to actual needs.

[0031] As a preferred technical solution of the present invention, the addition of the zoom bar in step ten makes the viewing of scattered points with similar coordinates clearer and more intuitive.

[0032] As a preferred technical solution of the present invention, the step three of collecting coordinate points that are the same as the coordinate points and saving the set to an object can reduce the number of scatter points in the scatter plot.

[0033] As a preferred technical solution of the present invention, the updating of the highlighting effect of the custom scatter points and the updating of the outward information, ID and related information of the custom scatter points in steps eight and nine ensure that when the custom scatter points are in the Click hit (highlight) style, the tooltip will also hit (highlight) the corresponding scatter points when hovering.

[0034] As a preferred technical solution of the present invention, ECharts, mentioned in steps two, five, six, seven, nine and ten, is an open-source visualization chart library based on JavaScript.

[0035] As a preferred embodiment of the present invention, Hover in steps seven and nine refers to hovering the mouse over an element, and Click in step eight refers to clicking the mouse on an element.

[0036] The beneficial effects of this invention are as follows:

[0037] Drawing scatter plots according to the logic of this invention can achieve a more perfect interactive effect and improve the user experience. It features: when drawing scatter plots, there will be no multiple overlapping scatter plots; the number of scatter plots is reduced, making the data easier to understand; the display styles of overlapping scatter plots will not overlap, causing confusion for users, thus improving the readability and visualization effect of the scatter plot and enhancing the user experience; the overlapping scatter plot display information can be customized by the product to provide more user-friendly information, making it easier for users to understand; when overlapping points (custom scatter plots) are hit (highlighted), it is clearer from the scatter plot which point is hit (highlighted). What are scatter plots? When hovering over overlapping points (custom scatter plots), information about all overlapping points can be displayed better. If the custom scatter plot is in the Click hit (highlight) style, then when hovering, the tooltip will also hit (highlight) the corresponding scatter plot, making the interaction more user-friendly. When clicking over overlapping points (custom scatter plots), both the custom scatter plot and the corresponding scatter plot in the tooltip will be hit (highlighted). Adding a zoom bar to the scatter plot allows for convenient zooming of scatter plots with similar coordinates via hover or Click. Attached Figure Description

[0038] Figure 1 This is the overall logic for drawing the scatter plot of this invention. Detailed Implementation

[0039] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0040] like Figure 1 As shown in the figure, this embodiment of the invention provides a method for processing interactive and extended information of overlapping points in a scatter plot. The specific steps are as follows:

[0041] Step 1:

[0042] Retrieve the raw data of all scatter points from the backend;

[0043] Step Two:

[0044] Parsing Data -- Converting data into the format required for ECharts scatter plots;

[0045] Step 3:

[0046] The data is analyzed, grouped, and the scattered points on the scatter plot are parsed out. These points contain non-overlapping coordinate points and overlapping points. Overlapping points are identified by finding the same coordinate points according to certain rules. The coordinate points that are the same as the original coordinate point are collected and saved into an object. Then, custom coordinate points are created using these coordinate points, including processing the necessary point information and handling whether to highlight them.

[0047] Step Four:

[0048] The created custom coordinate point carries all the scatter points that overlap with it, and a custom outline name, such as '**** etc.', where 'etc.' indicates that there are multiple scatter points and ID identifiers;

[0049] Step 5:

[0050] Use the scatter plot data parsed from the above steps to initialize and create an ECharts scatter plot instance;

[0051] Step Six:

[0052] Draw an ECharts scatter plot;

[0053] Step Seven:

[0054] When hovering over a custom scatter point, the tooltip component of ECharts is used to draw tooltip information, displaying scatter point information that is equal to the coordinates of the custom scatter point.

[0055] Step 8:

[0056] When a custom scatter point is clicked, the custom scatter point hit style is triggered, and the highlight effect of the custom scatter point is updated.

[0057] Step Nine:

[0058] When hovering over a custom scatter plot, a tooltip is displayed. Clicking on another scatter plot in the tooltip will update the outward information, ID, and related information of the custom scatter plot without destroying the ECharts scatter plot instance. At the same time, the custom scatter plot style and the corresponding scatter plot in the tooltip will be hit (highlighted) to render the chart.

[0059] Step 10:

[0060] For scatter plots with similar coordinates, add a zoom bar to the ECharts scatter chart to support zooming in and out.

[0061] Step Eleven:

[0062] When switching query conditions to obtain a new data source, the above steps (cycle) are repeated.

[0063] The existing solution is to increase the X-axis step size of all overlapping scatter points sequentially, so that the scatter points are horizontally offset from their original positions. However, this solution is feasible when plotting a small number of scatter points. When there is a lot of data, even if the position is offset, it is still impossible to guarantee that the offset coordinate points will not overlap with other coordinate points. The processing method of this invention will solve the problem of perfect interaction between hover and click on overlapping points, optimize the visualization effect of scatter plots, and further improve the user experience.

[0064] In step three, non-overlapping coordinate points refer to points with no equal coordinates, while overlapping points refer to data with equal coordinates.

[0065] By grouping the data, we can distinguish between non-overlapping and overlapping coordinate points, which facilitates subsequent data analysis and prevents data from becoming mixed up and causing confusion.

[0066] In step three, creating custom coordinate points allows identical coordinate points to be distinguished according to the desired processing method.

[0067] Creating custom coordinate points helps to refine the distinction of overlapping information, making the information of overlapping points clearer.

[0068] Among them, the tooltip component in step seven can be customized to draw tooltip information according to actual needs.

[0069] Customizing the drawing prompt message allows for a more flexible and convenient display of scatter point information that is equal to the custom scatter point coordinates.

[0070] The addition of the zoom bar in step ten makes viewing scattered points with similar coordinates clearer and more intuitive.

[0071] By adding a zoom bar, the scattered points can be freely zoomed in and out, thus preventing click errors when hovering over and clicking custom scattered points.

[0072] In step three, collecting the coordinate points that are the same as the coordinate points and saving the set to an object can reduce the number of scatter points in the scatter plot.

[0073] The reduction in the number of scatter points makes the scatter plot clearer and more intuitive, thus making it easier to understand the data.

[0074] In particular, steps eight and nine update the highlighting effect of the custom scatter points, update the outward information of the custom scatter points, and update the ID and related information of the custom scatter points so that when the custom scatter points are in the Click hit (highlight) style, the tooltip will also hit (highlight) the corresponding scatter points when hovering.

[0075] When clicking and hovering, the tooltip's corresponding scatter points are highlighted, which can better display information about all overlapping points and make the interaction more user-friendly.

[0076] ECharts, mentioned in steps two, five, six, seven, nine, and ten, is an open-source visualization chart library based on JavaScript.

[0077] ECharts can be used to draw various charts such as scatter plots. It is convenient and quick to use, and can improve the drawing speed of scatter plots.

[0078] In steps seven and nine, "Hover" refers to hovering the mouse over an element, while "Click" in step eight refers to clicking the mouse on an element.

[0079] The Hover and Click operation modes make it easier to view and manipulate the scatter plot information.

[0080] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus.

[0081] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A method for processing interactive and extended information of overlapping points in a scatter plot, characterized in that, The specific steps are as follows: Step 1: Retrieve the raw data of all scatter points from the backend; Step Two: Parsing Data -- Converting data into the format required for ECharts scatter plots; Step 3: The data is analyzed, grouped, and the scattered points on the scatter plot are parsed out. These points contain non-overlapping coordinate points and overlapping points. Overlapping points are identified by finding the same coordinate points according to certain rules. The coordinate points that are the same as the original coordinate point are collected and saved into an object. Then, a custom coordinate point is created based on this coordinate point, including the processing of the required point information and whether to highlight it. Step Four: The created custom coordinate point carries all the scatter points that overlap with it, and a custom outline name, which includes: '**** etc.', where 'etc.' indicates that there are multiple scatter points and ID identifiers; Step 5: Use the scatter plot data parsed from the above steps to initialize and create an ECharts scatter plot instance; Step Six: Draw an ECharts scatter plot; Step Seven: When hovering over a custom scatter point, the tooltip component of ECharts is used to draw tooltip information, displaying scatter point information that is equal to the coordinates of the custom scatter point. Step 8: When a custom scatter point is clicked, the custom scatter point hit style is triggered, and the highlight effect of the custom scatter point is updated. Step Nine: When hovering over a custom scatter plot, a tooltip is displayed. Clicking on another scatter plot in the tooltip will update the outward information, ID, and related information of the custom scatter plot without destroying the ECharts scatter plot instance. At the same time, the chart will be rendered by hitting the custom scatter plot style and the corresponding scatter plot in the tooltip. Step 10: For scatter plots with similar coordinates, add a zoom bar to the ECharts scatter chart to support zooming in and out. Step Eleven: When switching query conditions to obtain a new data source, repeat the above steps.

2. The method for processing interactive and extended information of overlapping points in a scatter plot according to claim 1, characterized in that: The non-coincident coordinate points mentioned in step three refer to coordinate points that are not equal, while coincident points refer to data points that have equal coordinate points.

3. The method for processing interactive and extended information of overlapping points in a scatter plot according to claim 1, characterized in that: The creation of custom coordinate points described in step three allows for the differentiation of identical coordinate points using the desired processing method.

4. The method for processing interactive and extended information of overlapping points in a scatter plot according to claim 1, characterized in that: The tooltip component described in step seven can be customized to draw tooltip information according to actual needs.

5. The method for processing interactive and extended information of overlapping points in a scatter plot according to claim 1, characterized in that: The addition of the zoom bar described in step ten makes viewing scattered points with similar coordinates clearer and more intuitive.

6. The method for processing interactive and extended information of overlapping points in a scatter plot according to claim 1, characterized in that: The step three, which involves collecting coordinate points that are identical to the coordinate points and saving the set to an object, can reduce the number of scatter points in the scatter plot.

7. The method for processing interactive and extended information of overlapping points in a scatter plot according to claim 1, characterized in that: The steps eight and nine describe updating the highlight effect of the custom scatter points, updating the outward information of the custom scatter points, and updating the ID and related information of the custom scatter points. This ensures that when a custom scatter point is in the Click hit style, the tooltip will also hit the corresponding scatter point when hovering.

8. The method for processing interactive and extended information of overlapping points in a scatter plot according to claim 1, characterized in that: ECharts, as described in steps two, five, six, seven, nine, and ten, is an open-source visualization chart library based on JavaScript.

9. The method for processing interactive and extended information of overlapping points in a scatter plot according to claim 1, characterized in that: The "Hover" mentioned in steps seven and nine refers to hovering the mouse over an element, and the "Click" mentioned in step eight refers to clicking the mouse on an element.

Images