Visualizer: Quick Reference 🌶️
Some problems ask your method to accept a Visualizer parameter — usually named viz. Whatever you draw with it shows up next to your test results after you submit. This page covers all 5 methods; you'll only ever need whichever ones fit the problem in front of you.
You never create a
The canvas is always 0 to 100 on both axes, no matter what the actual numbers in your problem look like. If your data goes above 100, or your shapes look squished together, that usually means you need to scale your values down first — it's not a bug in Visualizer.
One bar per element, automatically sized to fit whatever array you pass in — you don't pick a width or height for anything. Each bar gets its exact value labeled above it, so you never have to guess a height by eye.
Visualizer yourself — it just shows up as a parameter whenever a problem needs one, already set up and ready to draw on.| Method | What it does |
|---|---|
viz.plot(x, y, color) | Draws a single point |
viz.line(x1, y1, x2, y2, color) | Draws a line segment |
viz.barChart(values) | Draws a bar for every value in an int[] |
viz.drawGrid(values) | Draws a grid for a 2D array, one cell per value |
viz.highlight(row, col, color) | Recolors one cell of a grid you already drew |
The canvas is always 0 to 100 on both axes, no matter what the actual numbers in your problem look like. If your data goes above 100, or your shapes look squished together, that usually means you need to scale your values down first — it's not a bug in Visualizer.
plot and lineviz.plot(25, 75, "blue");viz.line(0, 0, 100, 100, "red");
x and y are doubles from 0 to 100. Just like the coordinate plane from math class, (0, 0) is the bottom-left corner and y goes up — not down, like a lot of computer graphics. color is a plain word in quotes — stick to common ones like "red", "blue", "green", "orange", "purple", "black". Made-up words won't cause an error, but they won't reliably show up as any particular color either.barChartint[] counts = {3, 7, 2, 9, 5};viz.barChart(counts);
One bar per element, automatically sized to fit whatever array you pass in — you don't pick a width or height for anything. Each bar gets its exact value labeled above it, so you never have to guess a height by eye.
drawGrid and highlightint[][] grid = {{1, 2}, {3, 9}};viz.drawGrid(grid);viz.highlight(1, 1, "orange");
drawGrid draws one cell per element of a 2D array, with row 0 at the top — same as how the array reads when you write it out, and how a nested loop over rows/columns normally counts. highlight(row, col, color) recolors a single cell of a grid you've already drawn — call it more than once (say, once per step of a loop) to build up a trail showing everywhere your code visited.highlightonly works afterdrawGridhas already been called — there's no grid to highlight a cell of yet otherwise, and your code will stop with an error telling you exactly that if you get the order backwards.