A fraction visualizer with pies, bars and number lines
This fraction visualizer draws any fraction the three ways teachers use most — as a pie (fraction circle), a bar (fraction strip) and a point on a number line — so you can see what 3/4 or 2⅓ actually means. Type a fraction or mixed number and the models, the simplest form, the decimal and the percentage update as you type.
Switch to Compare to see which of two fractions is bigger on bars cut into a common number of parts, or to Calculate to add, subtract, multiply or divide two fractions with every step explained and drawn: common denominators for adding, an area model for multiplying and number-line jumps for dividing. The Worksheet mode prints practice sheets with an answer key. It is free and runs in your browser.
How to use the Fraction Visualizer
- Choose a mode: One fraction, Compare, Calculate or Worksheet.
- Enter the numerator and denominator; add a whole number for a mixed number such as 1 ½. Put a minus sign on the numerator (or on the whole part) for a negative fraction.
- Tick the models you want to see: pie, bar and number line.
- In Calculate mode pick +, −, × or ÷ and read the numbered steps under the pictures.
- In Worksheet mode choose a problem type, the number of problems and the largest denominator, then print or download the PDF and its answer key.
Fraction Visualizer features
Three fraction models
Pies for “parts of a whole”, bars for comparing lengths, and a number line that shows fractions as numbers between whole numbers.
Improper fractions and mixed numbers
7/4 is drawn as two pies (one full, one three-quarters) and written as 1 ¾.
Equivalent fractions
Bars for 3/4, 6/8, 9/12 and more line up so you can see the shaded length stay the same.
Visual steps for all four operations
Common-denominator bars for + and −, an area model for ×, and “how many fit” jumps for ÷.
Exact answers
Results are simplified using the greatest common factor and shown as fractions, mixed numbers, decimals and percentages.
Printable worksheets
Shade-the-fraction, add/subtract, multiply/divide or compare problems with a separate answer key.
Adding fractions with different denominators — a worked example
To add 1/2 + 1/3, the pieces must be the same size. The least common multiple of 2 and 3 is 6, so cut both bars into sixths: 1/2 = 3/6 and 1/3 = 2/6. Now add the numerators: 3/6 + 2/6 = 5/6. The result pie has six sectors with five shaded. Subtraction works the same way: 1/3 − 1/2 = 2/6 − 3/6 = −1/6.
Multiplying needs no common denominator: multiply straight across. In the area model for 2/3 × 3/4, two of three columns and three of four rows are shaded; they overlap in 6 of the 12 small squares, so the product is 6/12 = 1/2. Dividing is multiplying by the reciprocal (“keep, change, flip”): 3/4 ÷ 1/8 = 3/4 × 8/1 = 6, and the number line shows six jumps of 1/8 filling 3/4.
Common fractions, decimals and percentages
| Fraction | Decimal | Percentage | Equivalent fractions |
|---|---|---|---|
| 1/2 | 0.5 | 50% | 2/4, 3/6, 4/8 |
| 1/3 | 0.333… | 33.3% | 2/6, 3/9, 4/12 |
| 1/4 | 0.25 | 25% | 2/8, 3/12, 4/16 |
| 3/4 | 0.75 | 75% | 6/8, 9/12, 12/16 |
| 1/5 | 0.2 | 20% | 2/10, 3/15, 20/100 |
| 1/8 | 0.125 | 12.5% | 2/16, 3/24 |
| 2/3 | 0.666… | 66.7% | 4/6, 6/9, 8/12 |
Tips for teaching fractions with models
- Start with pies for unit fractions (1/2, 1/3, 1/4), then move to bars when comparing — lengths are easier to compare than angles.
- Use the number line early: it shows that fractions are numbers, that 5/4 lies between 1 and 2, and that 2/4 and 1/2 are the same point.
- Ask learners to predict the answer before revealing the steps, then check with the picture.
- For decimal and percentage practice, pair this page with the percentage calculator; to see long division of the numerator by the denominator, use the long division calculator.
Fraction Visualizer FAQ
How do I visualize a fraction?
Enter the numerator and denominator in the fraction visualizer. It draws the fraction as a pie split into equal sectors, a bar split into equal parts and a point on a number line, with the numerator’s number of parts shaded.
How do you add fractions with different denominators?
Find the least common denominator, rewrite both fractions with it, add the numerators and simplify. For 1/2 + 1/3: 3/6 + 2/6 = 5/6.
How can I tell which fraction is bigger?
Rewrite both with a common denominator and compare the numerators, or cross-multiply: 2/3 vs 3/4 gives 8 vs 9, so 2/3 < 3/4. Compare mode shows both bars cut into the same number of parts.
How are improper fractions shown?
As several pies or bars: every whole one is fully shaded and the last shows the remainder. The answer is also written as a mixed number.
Can I make fraction worksheets?
Yes. Worksheet mode creates shade-the-fraction, add and subtract, multiply and divide, or compare problems with denominators up to 6, 8, 10 or 12, plus an answer key, as a printable page or PDF.
Does it work with negative fractions?
Yes, in Calculate and Compare modes. Put the minus sign on the numerator or the whole part. Pies and bars show the size; the number line shows the sign.