Mastering Canvas Data Visualization: From Basics to Interactive Charts

1. Introduction

Data visualization converts data into graphical forms using computer graphics and image processing, enabling interactive exploration and a visual perspective on the world.

1.1 What is data visualization?

It is the process of turning abstract concepts into concrete visual representations, allowing people to perceive data as images.

1.2 Why use data visualization?

Visual perception processes far more information than other senses.

It provides a more comprehensive understanding of data, as illustrated by the example below.

Example data set with variables X and Y, statistical measures (means, variance, linear regression) are shown.

Means: X = 9, Y = 7.5

Variance: X = 11, Y = 4.122

Linear regression: Y = 3.0 + 0.5X

Visualizing the same data reveals different patterns.

1.3 Common front‑end visualization tools

ECharts – runs on PC and mobile, compatible with most browsers, built on ZRender.

AntV – a suite of products (G, G2, G6, F2, L7) for various visualization scenarios.

D3 – a JavaScript library that manipulates the DOM based on data without additional frameworks.

1.4 How front‑end charts are drawn (2D)

Two main approaches: Canvas (bitmap) and SVG (vector).

Canvas – high performance, pixel‑level control, constant memory per pixel.

SVG – resolution‑independent, low learning curve, easy to edit and export from design tools.

2. Implementing drawing with Canvas

2.1 Terminology

Bounding box – algorithm for approximating a set of points with a simple geometric shape (AABB, bounding sphere, etc.).

Bezier curve – mathematical curve defined by end points and control points.

Interpolation function – creates a continuous function passing through discrete data points.

B‑spline basis function – defined by a knot vector U and degree p.

2.2 Drawing a polyline

Points are split into segments; each segment is drawn with Canvas moveTo / lineTo. Sample pseudo‑code is provided.

getSegment(points, defined) {
  segCache = [];
  totalLength = 0;
  // iterate points, create segments, compute length, handle empty segments
}

2.3 Drawing curves

2.3.1 Bézier curves

Canvas supports quadratic and cubic Bézier curves via quadraticCurveTo and bezierCurveTo. The article explains the construction of quadratic and cubic curves, the parameter t ∈ [0,1], and the step‑by‑step generation of points.

2.3.2 Using Canvas API

Canvas provides moveTo and lineTo ; for multiple connected segments only lineTo is needed.

Code example for drawing a line with segment handling:

drawLine(ctx) {
  defined = false;
  lineStart;
  for (i = 0; i < len; i++) {
    seg = segCache[i];
    // handle empty segment, drawSeg or lineStart
  }
}

2.4 Animating drawings

By mapping the total line length to a t range and updating t over time, only the portion of each segment corresponding to the current t is rendered, achieving a stroke‑dash animation effect.

2.5 Interaction (picking)

Canvas does not retain shape information, so picking requires additional techniques:

Off‑screen cache Canvas with color‑coded shapes.

Canvas isPointInPath() API.

Geometric bounding‑box tests.

Hybrid approaches combining the above.

Each method’s advantages, disadvantages, suitable scenarios, and performance numbers are discussed.

3. Summary

The article covered the definition of data visualization, why it matters, common front‑end tools, and detailed Canvas implementations for lines, curves, animation, and interaction, demonstrating that visualizing data is achievable with systematic techniques.

4. References

G rendering engine documentation

Bezier curve resources

ByteCharts implementation

BizCharts

D3