About Venz
Venz makes it easy to create a chart from numbers.
Venz visualizes numeric data using SVG charts. You feed it numbers and it tries to detect the data structure automatically. The chart can then be downloaded in SVG, PNG, webP or AVIF format. Or create a link that contains all details to share.
There are multiple ways to create a chart:
- By pasting text
- By dropping a file onto the chart
- By creating a URL
The numbers can be in plain text or JSON format.
Contents
- Unlabeled numbers
- Labeled numbers in rows
- Labeled numbers in columns
- JSON with numbers
- JSON with labels and numbers
- Hyperfine
- Mitata
- Create URL
Unlabeled numbers
Numbers separated by space, comma, semicolon, or newline:
81, 99, 95, 66, 8, 14, 63, 58, 10, 98
77 25 23 64 88 26 55 71 9 9
Copy-paste the numbers onto the chart, or try this example link:
https://try.venz.dev?type=line&data=81,99,95,66,8,14,63,58,10,98
Paste numbers repeatedly to add series, or try this example link:
https://try.venz.dev?type=line&data=81,99,95,66,8,14,63,58,10,98&data=77,25,23,64,88,26,55,71,9,9
Labeled numbers in rows
2025-01 150 2025-02 120 2025-03 180 2025-04 170
2025-01 150 150 160 2025-02 120 110 120 2025-03 180 180 210 2025-04 170 190 180
1.0.0 3 1.0.1 3.05 1.1.0 2.88 1.2.0 2.9 1.2.1 2.8
If the labels are recognized as date or semver, they're sorted accordingly.
Copy-paste the labeled numbers onto the chart, or try this example link:
Pasting additional data results onto the chart results in merged data with additional series.
Labeled numbers in columns
col-A col-B col-C ----- ----- ----- 1.2 2 2.5 1.1 1.9 2.4 1.15 1.8 2.4 0.98 2.2 2.6
col-A,col-B,col-C 1.2,2,2.5 1.1,1.9,2.4 1.15,1.8,2.4 0.98,2.2,2.6
Copy-paste the labeled numbers onto the chart, or try this example link:
Instead of separate parameters, the data can be the full text:
JSON with numbers
[5, 4, 5]
[ [5, 4, 6], [4, 5, 3], [3, 6, 4] ]
Copy-paste the labeled numbers onto the chart, or try an example link:
https://try.venz.dev?type=line&data=[5,3,4]
https://try.venz.dev?type=line&data=[[5,4,6],[4,5,3],[3,6,4]]
JSON with labels and numbers
[ ["Bananas", 5], ["Apples", 4], ["Oranges", 3] ]
Copy-paste the labeled numbers onto the chart, or try this example link:
https://try.venz.dev?type=bar&labelY=Units&data=[["Bananas",5],["Apples",4],["Oranges",3]]
JSON with labels and numbers series
[ ["Bananas", [5, 4, 5]], ["Apples", [4, 5, 4]], ["Oranges", [3, 6, 3]] ]
Copy-paste the labeled numbers onto the chart, or try this example link:
https://try.venz.dev?type=line&data=[["Bananas",[5,4,6]],["Apples",[4,5,3]],["Oranges",[3,6,4]]]
Hyperfine
Venz was originally created to visualize hyperfine output. The name Venz is derived from bENchmark VisualiZer.
Drop the file or paste its contents generated by hyperfine --export-json. See the examples and use configurations to create and manage hyperfine commands.
Example command:
hyperfine --warmup 3 'sleep 0.35' 'sleep 0.31' 'sleep 0.33' --export-json results.json
Example output:
{
"results": [
{
"command": "sleep 0.35",
"mean": 0.35,
"stddev": 0,
"median": 0.35,
"user": 0.0001,
"system": 0.0001,
"min": 0.35,
"max": 0.35,
"times": [0.35, 0.35, 0.35],
"exit_codes": [0, 0, 0]
},
{
"command": "sleep 0.31",
"mean": 0.31,
"stddev": 0,
"median": 0.31,
"user": 0.0001,
"system": 0.0001,
"min": 0.31,
"max": 0.31,
"times": [0.31, 0.31, 0.31],
"exit_codes": [0, 0, 0]
}
]
}
Drop the file results.json or copy-paste its contents onto the chart, or try this example link:
Mitata
Drop the file or paste its contents generated by run({ format: 'json' }). Series data is truncated to 100k samples each (a notification will show if there is any data loss).
Example script:
import { run, bench } from 'mitata';
bench('sleep 2.1s', () => new Promise(resolve => setTimeout(resolve, 2100)));
bench('sleep 2.2s', () => new Promise(resolve => setTimeout(resolve, 2200)));
bench('sleep 2.3s', () => new Promise(resolve => setTimeout(resolve, 2300)));
await run({ format: 'json' });
node sleep.ts > results.json
Example output:
{
"layout": [{ "name": null, "types": [] }],
"benchmarks": [
{
"alias": "sleep 2.1s",
"runs": [
{
"stats": {
"samples": [
2100617875, 2101011375, 2101379667, 2101386334, 2101409917,
2101517584, 2101943916, 2102111417, 2102819000, 2102983959,
2103255958, 2107508833
],
"min": 2100617875,
"max": 2107508833,
"p25": 2101379667,
"p50": 2101517584,
"p75": 2102819000,
"p99": 2103255958,
"p999": 2103255958,
"avg": 2102328819.5833333,
"ticks": 12
},
"args": {},
"name": "sleep 2.1s"
}
],
}
]
}
Drop the file results.json or copy-paste its contents onto the chart, or try this example link:
Create URL
Create links to share visualizations of your data.
Example: https://try.venz.dev?type=line&data=3;2;3;4;2;5&data=4;3;2;5;6;4
URL parameters
data- numbers for the data series
- separated by comma or semicolon
- can be repeated
label- label for the data series
- separated by comma or semicolon
- can be repeated
- first
labelbelongs to firstdataseries, etc.
type- chart type
- default:
median - values
medianboxscatterlinepivotbar
labelY- label for y-axis
- default:
median (s)
labelX- label for x-axis
- default:
Run # - only visible with scatter and line chart type
color- color for the data series
- can be repeated
- first
colorbelongs to firstdataseries, etc.
lp- legend position
- default:
tr - values
trtlbrbln
br- break y-axis scale
- default:
0 - values
01
Example code snippets to create URL
const url = new URL('/', 'https://try.venz.dev');
url.searchParams.set('type', 'line');
url.searchParams.append('data', '1;2;3');
url.searchParams.append('data', '4;5;6');
console.log(url.toString());
const url = new URL('/', 'https://try.venz.dev');
url.searchParams.set('type', 'line');
const series = [[1, 2, 3], [4, 5, 6]];
for (const values of series) {
url.searchParams.append('data', values.join(','));
}
console.log(url.toString());