FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Graphics, Media & UI

Advanced

Charts & Data Visuals

Charts turn data into visuals, but the data and labels must remain understandable.

const values = [30, 80, 55];
const max = Math.max(...values);
bars.forEach((bar, index) => {
  bar.style.height = `${(values[index] / max) * 100}%`;
});

Graphics, Media & UI

Charts & Data Visuals connects JavaScript to visual interfaces.

Charts turn data into visuals, but the data and labels must remain understandable.

Visual JavaScript should make state easier to understand. The code must stay connected to real data, user intent and accessibility.

A polished interface is not only animation. It is timing, feedback, labels, fallback states and predictable interaction.

Core API

data-driven rendering

Visual goal

Use motion or graphics to explain state, not to distract from it.

Accessibility

Keep text, labels and keyboard alternatives available.

Performance

Avoid layout-heavy loops and unnecessary repaints.

Examples

Visual JavaScript should clarify the interface.

Let JavaScript express visual state clearly

const values = [30, 80, 55];
const max = Math.max(...values);
bars.forEach((bar, index) => {
  bar.style.height = `${(values[index] / max) * 100}%`;
});

Create visuals without data or accessibility

bar.style.height = "72px";
// The visual no longer comes from data.

Syntax reference

Named examples you can scan, copy, change and understand.

This is the practical reference part of the lesson. Each example has one job, a stable anchor and a small assignment, so the page works both as a course and as a developer reference when you need the syntax later.

Working visual pattern

A direct example of the topic.

const values = [30, 80, 55];
const max = Math.max(...values);
bars.forEach((bar, index) => {
  bar.style.height = `${(values[index] / max) * 100}%`;
});

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Weak visual pattern

A shortcut that makes the interface fragile.

bar.style.height = "72px";
// The visual no longer comes from data.

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Respect reduced motion

Users may ask the browser for less animation.

const prefersReducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!prefersReducedMotion) {
  element.animate(keyframes, options);
}

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Keep labels in the DOM

Visuals should not be the only source of meaning.

<figure>
  <canvas aria-label="Monthly revenue chart"></canvas>
  <figcaption>Revenue increased over four months.</figcaption>
</figure>

What to notice

  • Read the variable names before the syntax.
  • Change one value and predict the result before running it.

Try it yourself

  1. Rename one value and update every place where it is used.
  2. Add one console.log line that proves what the example returns.

Code patterns

Reusable examples for quick reference.

Use these examples when turning data, state and interaction into something visible.

Working visual pattern

A direct example of the topic.

const values = [30, 80, 55];
const max = Math.max(...values);
bars.forEach((bar, index) => {
  bar.style.height = `${(values[index] / max) * 100}%`;
});

Weak visual pattern

A shortcut that makes the interface fragile.

bar.style.height = "72px";
// The visual no longer comes from data.

Respect reduced motion

Users may ask the browser for less animation.

const prefersReducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!prefersReducedMotion) {
  element.animate(keyframes, options);
}

Keep labels in the DOM

Visuals should not be the only source of meaning.

<figure>
  <canvas aria-label="Monthly revenue chart"></canvas>
  <figcaption>Revenue increased over four months.</figcaption>
</figure>

Rules that matter

Richer UI needs richer responsibility.

Motion, canvas and drag/drop can improve a product, but only when they stay usable and understandable.

Connect visuals to data

Do not hard-code charts or status when data should drive them.

Keep text alternatives

Canvas, charts and drag/drop need labels or fallback content.

Use CSS for simple motion

JavaScript should orchestrate, CSS can animate state.

Avoid layout loops

Repeated measurements and writes can hurt performance.

Respect user preferences

Reduced motion and keyboard use are part of production design.

Test different input methods

Mouse, keyboard and touch can behave differently.

Production thinking

Ship visual code that remains readable, fast and accessible.

Why does this matter?

Graphics and interaction are where users feel quality immediately. Small implementation choices decide whether the UI feels smooth or chaotic.

Accessibility

Visual UI needs semantic labels, focus management, reduced motion support and alternatives for pointer-only behavior.

Production note

Production visual code should be measured, tested on real devices and kept separate from business logic where possible.

SEO note

Important text should not exist only inside canvas pixels or animation frames.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Change one visual value and run the example again.
  • Add one text label that explains the visual state.
  • Describe what should happen if animation is disabled.

Practice assignment

Do this before moving to the next topic.

  1. Build the simplest static version first.
  2. Add JavaScript to update one visible state.
  3. Check that a user can still understand the UI without relying only on motion.

Try it yourself

Experiment with Charts & Data Visuals

Live preview

Self-check

Before you continue, prove that you understand Charts & Data Visuals.

Advanced

Answer these before moving to the next graphics and UI lesson.

  1. What data or state drives this visual behavior?
  2. Where is the accessible label or explanation?
  3. Could CSS handle part of this interaction more cleanly?
  4. What performance risk exists?
  5. How would this work for keyboard or reduced-motion users?

Senior audit upgrade

Extra production context for Charts & Data Visuals.

Motion and input checklist

  • Respect prefers-reduced-motion.
  • Keep keyboard and touch alternatives available.
  • Do not rely on drag, hover or animation as the only path.
  • Prefer transform and opacity for smooth UI animation.

Chapter checkpoint

Graphics, Media & UI checkpoint

Finish this chapter by turning the lessons into a small practical proof.

Build

Build a small example that combines three lessons from this chapter.

Deliverables

  • working code
  • short explanation
  • self-check answers

Quality checks

  • readable code
  • clear failure path
  • accessibility considered

Review question

Can you explain the important tradeoff without reading from the page?