Create Image from Integers
Visualize integer lists as barcode, pixel grid, heatmap (5 palettes), or line chart. Custom canvas size, PNG/WebP/JPEG. Free, client-side.
Visualize a list of integers as a barcode, pixel grid, heatmap (5 palettes), or line chart. Custom canvas size, PNG/WebP/JPEG output. Up to 100,000 integers.
How to Use Create Image from Integers
- Paste your integer list - separators can be newlines, commas, semicolons, or any whitespace. Non-integer tokens are silently dropped (the live counter shows the drop count).
- Pick a mode. Barcode for variable-width sequences (good for <500 values). Pixel grid for large datasets (good 100-10,000 values). Heatmap for value-magnitude focus. Line chart for time-series-like sequences.
- For heatmap, pick a palette. Blue→Red is the default. Hot matches MATLAB's classic "hot" colormap. Viridis-like is perceptually uniform (best for accessibility).
- Set canvas dimensions (50-2000 px per side, non-square OK).
- Pick output: PNG (lossless, recommended), WebP (smaller, modern browsers), or JPEG (smallest but lossy - bad for the sharp edges of barcodes and grids).
- Click Create image (or Ctrl+Enter). Copy the data URI or download.
Frequently Asked Questions
How are negative integers handled?
Honestly: they’re normalized into the [0, 1] range alongside all other values – they’re NOT converted to absolute values. So if your list is [-10, 0, 10], the -10 becomes the lowest value (mapped to 0 → shortest bar / darkest pixel / start of color ramp), 0 maps to the middle (0.5), and 10 maps to the high end (1.0).
What happens if all integers are the same?
The range is zero, so normalisation can’t proceed. All values get mapped to 0.5 (middle of the range). Visually: flat bars at half-height, uniform mid-gray pixels, or a horizontal line across the middle. The stats line still shows the actual value.
Which mode for very large datasets?
Pixel grid or heatmap. Both arrange values into a 2D grid, so 10,000 points fit in a 100×100 grid easily. Barcode mode becomes 1-pixel-wide bars past ~2000 values on a 2000px canvas; line chart becomes visually noisy. The cap is 100,000 integers – past that the page locks up.
Why is the pixel-grid cell minimum 1 px?
An earlier version used Math.floor(canvasSize / gridSize) for cell size, which returns 0 when there are more values than pixels (e.g., 10,000 values on a 100×100 canvas). The result was an invisible blank canvas. Now the cell size is clamped to at least 1 px, and when cells < 1 px per side, multiple values share a pixel (only the last one drawn wins – a known limitation of the medium).
Which heatmap palette is “best”?
Viridis-like is the perceptually uniform choice (originally designed for Matplotlib to be readable in grayscale and by colorblind viewers). Hot is the MATLAB classic and works well for thermal/intensity data. Blue→Red (the default) is the most-recognized “low-vs-high” gradient but is not perceptually uniform (the perceptual jump from blue to purple to red is uneven).
Why might JPEG output look fuzzy?
JPEG compression uses DCT, which introduces ringing artefacts at sharp edges. Pixel grids, barcodes, and line charts all have sharp edges. PNG or WebP-lossless preserves them cleanly. If your canvas has 100,000 colorful pixels, JPEG saves significant disk space; for typical visualizations, stick with PNG.
What separators does the parser accept?
Newline, comma, semicolon, or any whitespace. The parser splits on any of these, trims each token, and tries to parse as a signed integer. Tokens like “1.5”, “1e3”, or “+5” are dropped (the count includes a “dropped” notice when this happens).
Will WebP actually be WebP?
On Chrome / Firefox / Edge / Safari 14+ yes. If the browser silently downgrades to PNG (the data URI doesn’t start with data:image/webp), the toast tells you and the filename uses .png.
Is anything uploaded?
No. All parsing and Canvas rendering is local.
Can I change the bar / line color?
Currently no – barcode and line-chart modes use brand indigo (or a lighter indigo on black background for contrast). If you need a specific colour, download the PNG and recolour in your editor, or use heatmap mode with the grayscale palette and post-process.