Large dataset performance tips
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 591
- PR merge metrics
- No merged PRs in 30d
Description
G2plot takes a couple seconds to render a dataset I'm working with. The resulting visualization looks great, but I'm curious what the recommendation is to eke out additional performance from g2 / g2plot. The data looks like:
```js
const data = [{
country: "Bohemia",
class: "Tariffs",
value: 2.500
}, {
country: "Bohemia",
class: "Trade",
value: 3.001
}]
// etc
```
In my dataset there are 20 instances of income classes over 320 countries for a total of 6,400 data points.
I'm displaying the data in barchart with following config
```js
const colors = new Map([
["Trade", "#3688AD"],
["Tariffs", "#8BC395"],
// etc
]);
const numCountries = 320;
const config = {
title: {
visible: false,
text: "",
},
data,
height: 24 * numCountries,
width: 1000,
xField: "value",
yField: "country",
stackField: "class",
color: (v) => colors.get(v) || "#000",
label: {
visible: true,
formatter: (v) => v.toFixed(2),
},
};
```
While rendering the chart, the browser will become unresponsive for a couple seconds while the chart is rendered.
So if I'm interested in decreasing the latency it takes to render the chart, what is the best way to go about it? Do I disable animations, ledger interactivity (and if so, how?), or another configurable knob? Or if nothing else, is there a way to not block the UI thread so the browser remains responsive? Thanks!
Contributor guide
Research direction
No source file or test is named. Start by reproducing the 6,400-point stacked bar chart with the shown G2Plot configuration, then review the available rendering, animation, and interaction controls. Done means identifying and documenting a concrete way to reduce render latency while keeping the browser responsive.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100