User Manual
See set theory, don't just memorise it.
SetViz is an interactive tool for learning set theory by seeing it. You pick an operation, and the Venn diagram shades exactly the region that operation describes. This manual explains every part of the interface and walks through all seven stages.
Recently added — September 2026
Scenario questions added to the Quiz stage. A new toggle rephrases quiz prompts as
real-world word problems (e.g. "students who play football but not chess") instead of raw notation
like A − B — see section 10.
01
SetViz runs entirely in a web browser. There is nothing to install and no account to create.
Open SetViz
Visit setviz.visuallymath.com. It works offline once loaded.
Pick a stage from the row of tabs
Start at Basics, or jump straight to whichever topic you need. Stages can be taken in any order.
Click an operation
The diagram immediately shades the region that operation describes, and a plain-English explanation appears underneath.
Finish at the Quiz
Test yourself by shading regions or naming them. Feedback is immediate and nothing is graded.
02
Below the header sits a row of stage tabs. Under that, the screen is divided into three columns.
| Area | What it does |
|---|---|
| Stage rail (top) | Numbered tabs, one per stage. The current stage is underlined in orange. |
| Choose an operation (left) | Buttons for the operations relevant to the current stage. Each shows the symbol and its name. |
| How the sets sit (left) | Appears only on Subset & Disjoint. Changes how the circles are arranged. |
| Teaching note (left) | The concept for the whole stage. It does not change as you click operations. |
| Venn diagram (centre) | The diagram itself. The outer box is the universal set U. |
| Back / Next (centre) | Step through stages in order. |
| Result panel (centre) | Under the diagram: the notation in large type, plus what the shaded region means. |
| Try with real numbers (right) | Drops actual numbers into the diagram so you can count elements. |
| Symbols to remember (right) | A permanent reference card for the eight symbols used throughout. |
03
The stage rail runs horizontally across the top. Each tab shows a two-digit number and a title. The active tab is darker with an orange underline; the rest are grey.
Click any tab to jump
Navigation is non-linear. If a class already understands union and intersection, go straight to Three Sets or De Morgan's Laws.
Or use Back / Next
The buttons beside the stage title move one stage at a time and scroll back to the top. Back is disabled on the first stage; the last stage shows Done.
Arrow keys work too
Press ← and → to move between stages — handy when projecting to a class. They are ignored while typing in a text box.
04
Each stage shows only the operations that belong to it — between four and six buttons. Every button carries the mathematical symbol in large italic type and its name underneath in small capitals. The selected button is filled dark.
Every operation in SetViz
| Symbol | Meaning |
|---|---|
| U | The universal set — everything under discussion. |
| ∅ | The empty set — nothing is shaded. |
| A B | A single set on its own. |
| A ∪ B | Union — in A, or in B, or in both. |
| A ∩ B | Intersection — only the overlap. |
| A′ B′ | Complement — everything in U that is not in that set. |
| A − B B − A | Difference — in one set but not the other. |
| A Δ B | Symmetric difference — in exactly one of the two. |
| (A ∪ B)′ (A ∩ B)′ | The complement of a union or an intersection. |
| A′ ∩ B′ A′ ∪ B′ | The right-hand sides of De Morgan's Laws. |
| A ∪ B ∪ C A ∩ B ∩ C | Union and intersection across three sets. |
| A ∩ (B ∪ C) (A ∩ B) − C (A ∪ B) ∩ C | Three-set expressions with brackets. |
| (A ∪ B ∪ C)′ | Outside all three circles. |
Teaching tip
Ask students to predict which region will light up before you click. The moment of being
wrong is where the learning happens — particularly for (A ∩ B)′, which catches almost everyone out.
05
The diagram is the centre of the tool. Everything else exists to explain it.
The box is the universal set
The rounded rectangle, marked U in the top-left corner, holds everything. Anything outside the circles but inside the box still belongs to U.
Circles are outlined, never filled
A is blue, B is terracotta, C is purple. The outlines stay constant so that shading is the only thing that changes.
Gold shading is the answer
Whatever the current operation selects is shaded gold. Everything else stays plain. A legend under the diagram repeats this.
Regions are exact
Shading follows true region boundaries, so A − B produces a real crescent with the overlap cleanly removed — not an approximation.
Two sets or three
Most stages use two circles and four regions. The Three Sets stage uses three circles and eight regions.
06
On the Subset & Disjoint stage a second panel appears on the left called How the sets sit. It controls the geometry independently of the operation, so you can hold one fixed and change the other.
| Arrangement | What you see |
|---|---|
| Overlapping | The usual two circles crossing — the general case. |
| B ⊂ A | B sits entirely inside A. Now A ∩ B = B and A ∪ B = A. |
| Disjoint | The circles are separated. A ∩ B = ∅ — there is simply no overlap to shade. |
| A = B | The circles coincide exactly. Union, intersection and both sets are all the same region. |
Why this matters
Keep A ∩ B selected and click through all four arrangements. The notation never changes,
but the shaded region does — which is exactly the point students miss when they only ever see
one textbook picture.
07
This panel on the right turns the abstract diagram into a countable one. Switch on Show elements and the diagram fills with numbered dots placed in their correct regions.
Edit the sets
Boxes appear for U, A, B — and C on the three-set stage. Type values separated by commas. Anything not in U is ignored.
Watch the dots settle
Each value appears in the region it belongs to. Values inside a set are filled; values outside every set sit in the corner of the box as hollow dots.
Read the result
Underneath, the panel lists each set, the result of the current operation in set notation, and its size n( ).
Check the counting formula
On two-set stages the identity n(A∪B) = n(A) + n(B) − n(A∩B) is shown with your own numbers substituted in — so students can verify it rather than take it on trust.
Teaching tip
Change one number so it moves in or out of the overlap, and watch every figure update at once. It makes clear why the intersection has to be subtracted — it would otherwise be counted twice.
08
SetViz runs from the definition of a set through to De Morgan's Laws and a self-check quiz. Each stage builds on the one before it.
| # | Stage | Operations | Concept |
|---|---|---|---|
| 00 | Basics | UAB∅ | What a set is; the universal set as the surrounding box; the empty set. |
| 01 | Union & Intersection | A ∪ BA ∩ BAB | ∪ collects, ∩ filters. Reading ∪ as “or” and ∩ as “and”. |
| 02 | Complement & Difference | A′B′A − BB − AA Δ B(A ∩ B)′ | Taking things away: complements, differences, symmetric difference. |
| 03 | Subset & Disjoint | A ∩ BA ∪ BA − BB − A | How the same operation changes meaning as the arrangement changes. |
| 04 | Three Sets | A ∪ B ∪ CA ∩ B ∩ CA ∩ (B ∪ C)(A ∩ B) − C(A ∪ B) ∩ C(A ∪ B ∪ C)′ | Eight regions; working brackets first, exactly as in arithmetic. |
| 05 | De Morgan's Laws | side-by-side proof | Two diagrams shading identically — the visual proof of both laws. |
| 06 | Quiz | shade or name | Self-check with instant feedback, score and streak. |
09
This stage replaces the operation buttons with two diagrams shown side by side — the left-hand side of the law and the right-hand side — so students can see that they shade the same region.
Choose a law
Two pills at the top switch between (A ∪ B)′ = A′ ∩ B′ and (A ∩ B)′ = A′ ∪ B′.
Compare the two diagrams
Each is labelled with its own expression and shaded independently. They match exactly — which is what “equal” means for sets.
Read the verdict
A green banner underneath states the law in words: the complement flips the operation — ∪ becomes ∩, and ∩ becomes ∪.
Teaching tip
Cover the right-hand diagram and ask the class to sketch it from the notation alone before you reveal it. This stage is the payoff for everything in stages 01 and 02.
10
The final stage generates questions at random in two formats. Nothing is recorded or graded — wrong answers cost nothing.
Shade the region
An expression is given. Click regions of the diagram to shade them, then press Check answer. Clear starts the shading over.
Or name the region
The diagram is shaded for you and four expressions are offered. Pick the one that matches.
Read the marking
Green = correctly shaded · Red = shaded by mistake · Faint red = missed. A sentence explains the correct answer either way.
Score and streak
Two badges track how many you have answered correctly and how many in a row. A wrong answer resets the streak but never the score.
Hard mode
The toggle switches questions to three-set expressions with eight regions to choose from.
Scenario questions
The other toggle rephrases each prompt as a real-world word problem instead of raw notation — e.g. "Shade the region for: students who play football but not chess" instead of A − B. A small legend under the prompt maps A / B (and C in hard mode) back to the scenario. The diagram, choices, checking and scoring all work exactly the same either way — only the wording changes.
Classroom use
Project the quiz and have the class vote on the region before you click. Because questions are random, the same class can run it repeatedly without repeating the sequence.
11
| Control | Action |
|---|---|
| ← → | Previous / next stage. Ignored while typing in a text box. |
| Dark / Light | Switches theme. Your choice is remembered on the next visit; otherwise SetViz follows your system setting. |
| Manual | Opens this document in a new tab. |
12
A single sitting that covers the whole tool in roughly forty minutes.
Basics — establish the box
Click U, then ∅. One shades everything, the other nothing. Make the point that both are legitimate sets.
Union & Intersection — the core pair
Alternate between A ∪ B and A ∩ B until the “or / and” reading is automatic.
Complement & Difference — the tricky one
Contrast A − B with A Δ B, then finish on (A ∩ B)′, which is where most errors live.
Subset & Disjoint — hold the operation, change the picture
Keep A ∩ B selected and cycle all four arrangements.
Turn on real numbers
Go back to Union & Intersection with Show elements on and verify the counting formula together.
Three Sets — brackets first
Compare A ∩ (B ∪ C) with (A ∩ B) − C and talk through the order of operations.
De Morgan — the proof
Predict each right-hand side before revealing it.
Quiz — check it stuck
Run five or six questions as a class, then switch on hard mode if there is time.