User Manual
Interactive Set Theory Visualisation Tool — Complete Guide to Features & Usage
Contents
Section 01
SetViz is a browser-based interactive tool for learning set theory concepts through dynamic Venn diagram visualisations. No installation, no registration, no cost — open the link and start learning immediately.
Access SetViz
Open any modern browser and go to https://ciksuriyati.github.io/SetViz/ — works on desktop, tablet, and smartphone. No login required.
Open the URL
No download or login needed. The page loads in seconds on any device.
Choose a stage from the left panel
Start with Stage 0 (Orientation) or jump directly to any concept you need.
Click an operation button
The Venn diagram shades instantly to show which region represents that operation.
Read the teaching note and symbol
Each operation shows a contextual explanation and its formal mathematical notation.
Section 02
SetViz has two main panels: a Left Panel (stage navigator) and a Right Panel (learning area). Seven numbered callouts identify every key zone.
An interactive learning tool for set theory through visualizations.
Stage 2
Learn to read A, B, A∪B, A∩B, A′, B′ from shading.
Choose an operation
Teaching note
A ∪ B (union) = in A or B or both. A ∩ B (intersection) = overlap only.
Current operation
Both circles together form the union.
Symbol notation
Left Panel — Stage Navigator
Lists all 7 learning stages. Click any stage to jump to it. Active stage is highlighted in gold.
Theme Toggle
Switch between 🌙 Dark and ☀️ Light mode at any time from the top-right of the sidebar.
Stage Cards
Each card shows the stage number, title, and description. Active = gold; others = blue tint.
Operation Buttons
Click to select an operation (e.g. A∪B). Active button turns gold; Venn diagram shades instantly.
Teaching Note Panel
Contextual explanation for the current stage — common definitions and misconceptions.
Venn Diagram Canvas
Dynamic SVG diagram. Shaded region changes instantly when you click an operation button.
Status Bar & Symbol Notation
Plain-English description of the active operation (left) and its formal mathematical symbol (right), e.g. A ∪ B, A′, (A∩B)′.
Section 03
The left panel is your learning roadmap. It shows all seven stages and always highlights which one you are on.
An interactive learning tool for set theory concepts.
Theme Toggle (top right of sidebar)
Click 🌙 Dark to switch to Light mode, or ☀️ Light to switch back to Dark. The preference applies to the whole page immediately.
Active Stage Card (gold highlight)
The stage you are currently viewing. Gold border, gold stage-number badge. The main panel on the right updates to match. Click any other card to switch.
Inactive Stage Cards
All other stages shown with a blue tint. Click any card to jump directly to that stage — no need to go in order. Hover to see a subtle slide-in animation.
Non-linear navigation
You can click any stage at any time. If you already know Stage 1, skip straight to Stage 4 (Set Differences) or Stage 6 (De Morgan's Laws).
Section 04
Each stage shows a row of buttons for the available set operations. Clicking a button instantly shades the corresponding Venn diagram region and updates the status bar.
Choose an operation — Stage 2
Only one button is active at a time. Click a different button to switch operations instantly.
Inactive button (default state)
Dark background, light text. Click to activate. Each stage only shows the operations relevant to that concept — so Stage 0 has no buttons, Stage 2 has 6, and Stage 6 has 6.
Active button (selected operation)
Highlighted in gold with a glow shadow. The Venn diagram and status panel immediately reflect this operation. Clicking the same button again keeps it selected.
Section 05
The canvas renders a live SVG Venn diagram. The shaded region updates the moment you click an operation — no page reload needed. Below are examples of every shading type.
A — circle A shaded gold
A ∩ B — overlap region green
A′ — everything outside A
A \ B — A minus overlap
(A∪B)′ — outside both circles
Stage 3 — A ∩ B = ∅ badge
The shading label
A small label (e.g. A ∪ B) appears at the bottom of the canvas confirming which region is shaded. For Stage 3 (Mutually Exclusive), a red A ∩ B = ∅ badge appears instead to reinforce the empty-set concept.
Section 06
Below the canvas, three panels provide all the conceptual context you need without leaving the page.
Teaching note ← covers the whole stage
A ∪ B (union) = in A or B or both. A ∩ B (intersection) = overlap only. Use buttons to compare.
Current operation ← updates on every click
Both circles together form the union.
Symbol ← exam notation
Teaching Note (💡 panel)
Provides the conceptual explanation for the entire stage. This panel does not change when you click different operation buttons — it gives the broader context.
Current Operation Description
Updates every time you click an operation button. Gives a plain-English definition (e.g. "Elements in A but NOT in B") plus a sentence explaining what the shaded region means.
Symbol Notation Badge
Shows the formal mathematical expression for the selected operation — the exact notation used in textbooks and exams: A ∪ B, A′, A \ B, (A ∩ B)′, etc.
Section 07
SetViz progresses from the basic definition of a set all the way to De Morgan's Laws. Each stage builds on the previous one.
Section 08
Follow this sequence for first-time use or classroom demonstration.
Open Stage 0 — Orientation
Read the teaching note. Observe the empty bounding rectangle — this is the universal set U. No circles appear yet.
Stage 1 — Click A then A′
Click A to shade the circle gold, then click A′ to shade its complement grey. Compare the two. Check the Symbol badge for the notation.
Stage 2 — Work through all 6 buttons
Click A, B, A′, B′, A∪B, A∩B one by one. Focus on the difference between ∪ (both circles) and ∩ (only the lens-shaped overlap).
Stage 3 — Compare disjoint vs overlapping
Click A∩B here and notice the A ∩ B = ∅ badge. Compare with Stage 2 to understand why the result changes when circles don't touch.
Stage 6 — Verify De Morgan's Laws
Click (A∪B)′ — note the region outside both circles. Then click (A∩B)′ — note it shades everything except the small lens. Cross-reference with your textbook.
For lecturers
SetViz works well as a live demonstration tool. Open it on a projector, select operations as you explain each concept. Students can follow along on their own devices simultaneously — no setup or accounts needed.