Skip to content

Instantly share code, notes, and snippets.

@ChillFish8

ChillFish8/upack-visualisation.html

Created February 27, 2026 01:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ChillFish8/3dd27d002d347d0b36a72c0f13417d45 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ChillFish8/3dd27d002d347d0b36a72c0f13417d45 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
upack-visualisation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compressed Size: μpack vs StreamVByte</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f0f1a; }
</style>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/recharts@2.12.7/umd/Recharts.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-type="module">
const { useState, useMemo } = React;
const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart, ReferenceLine } = Recharts;
const DATA = {"upack":{"1":[2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,8,8,8,8,8,8,8,8,9,9,9,9,9,9,9,9,10,10,10,10,10,10,10,10,11,11,11,11,11,11,11,11,12,12,12,12,12,12,12,12,13,13,13,13,13,13,13,13,14,14,14,14,14,14,14,14,15,15,15,15,15,15,15,15,16,16,16,16,16,16,16,16,17,17,17,17,17,17,17],"2":[3,3,3,3,3,3,3,3,5,5,5,5,5,5,5,5,7,7,7,7,7,7,7,7,9,9,9,9,9,9,9,9,11,11,11,11,11,11,11,11,13,13,13,13,13,13,13,13,15,15,15,15,15,15,15,15,17,17,17,17,17,17,17,17,19,19,19,19,19,19,19,19,21,21,21,21,21,21,21,21,23,23,23,23,23,23,23,23,25,25,25,25,25,25,25,25,27,27,27,27,27,27,27,27,29,29,29,29,29,29,29,29,31,31,31,31,31,31,31,31,33,33,33,33,33,33,33],"3":[4,4,4,4,4,4,4,4,7,7,7,7,7,7,7,7,10,10,10,10,10,10,10,10,13,13,13,13,13,13,13,13,16,16,16,16,16,16,16,16,19,19,19,19,19,19,19,19,22,22,22,22,22,22,22,22,25,25,25,25,25,25,25,25,28,28,28,28,28,28,28,28,31,31,31,31,31,31,31,31,34,34,34,34,34,34,34,34,37,37,37,37,37,37,37,37,40,40,40,40,40,40,40,40,43,43,43,43,43,43,43,43,46,46,46,46,46,46,46,46,49,49,49,49,49,49,49],"4":[2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18,19,19,20,20,21,21,22,22,23,23,24,24,25,25,26,26,27,27,28,28,29,29,30,30,31,31,32,32,33,33,34,34,35,35,36,36,37,37,38,38,39,39,40,40,41,41,42,42,43,43,44,44,45,45,46,46,47,47,48,48,49,49,50,50,51,51,52,52,53,53,54,54,55,55,56,56,57,57,58,58,59,59,60,60,61,61,62,62,63,63,64,64,65],"5":[3,3,4,4,5,5,6,6,8,8,9,9,10,10,11,11,13,13,14,14,15,15,16,16,18,18,19,19,20,20,21,21,23,23,24,24,25,25,26,26,28,28,29,29,30,30,31,31,33,33,34,34,35,35,36,36,38,38,39,39,40,40,41,41,43,43,44,44,45,45,46,46,48,48,49,49,50,50,51,51,53,53,54,54,55,55,56,56,58,58,59,59,60,60,61,61,63,63,64,64,65,65,66,66,68,68,69,69,70,70,71,71,73,73,74,74,75,75,76,76,78,78,79,79,80,80,81],"6":[4,4,5,5,6,6,7,7,10,10,11,11,12,12,13,13,16,16,17,17,18,18,19,19,22,22,23,23,24,24,25,25,28,28,29,29,30,30,31,31,34,34,35,35,36,36,37,37,40,40,41,41,42,42,43,43,46,46,47,47,48,48,49,49,52,52,53,53,54,54,55,55,58,58,59,59,60,60,61,61,64,64,65,65,66,66,67,67,70,70,71,71,72,72,73,73,76,76,77,77,78,78,79,79,82,82,83,83,84,84,85,85,88,88,89,89,90,90,91,91,94,94,95,95,96,96,97],"7":[5,5,6,6,7,7,8,8,12,12,13,13,14,14,15,15,19,19,20,20,21,21,22,22,26,26,27,27,28,28,29,29,33,33,34,34,35,35,36,36,40,40,41,41,42,42,43,43,47,47,48,48,49,49,50,50,54,54,55,55,56,56,57,57,61,61,62,62,63,63,64,64,68,68,69,69,70,70,71,71,75,75,76,76,77,77,78,78,82,82,83,83,84,84,85,85,89,89,90,90,91,91,92,92,96,96,97,97,98,98,99,99,103,103,104,104,105,105,106,106,110,110,111,111,112,112,113],"8":[2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128],"9":[3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,30,31,32,33,34,35,36,37,39,40,41,42,43,44,45,46,48,49,50,51,52,53,54,55,57,58,59,60,61,62,63,64,66,67,68,69,70,71,72,73,75,76,77,78,79,80,81,82,84,85,86,87,88,89,90,91,93,94,95,96,97,98,99,100,102,103,104,105,106,107,108,109,111,112,113,114,115,116,117,118,120,121,122,123,124,125,126,127,129,130,131,132,133,134,135,136,138,139,140,141,142,143,144],"10":[4,5,6,7,8,9,10,11,14,15,16,17,18,19,20,21,24,25,26,27,28,29,30,31,34,35,36,37,38,39,40,41,44,45,46,47,48,49,50,51,54,55,56,57,58,59,60,61,64,65,66,67,68,69,70,71,74,75,76,77,78,79,80,81,84,85,86,87,88,89,90,91,94,95,96,97,98,99,100,101,104,105,106,107,108,109,110,111,114,115,116,117,118,119,120,121,124,125,126,127,128,129,130,131,134,135,136,137,138,139,140,141,144,145,146,147,148,149,150,151,154,155,156,157,158,159,160],"11":[5,6,7,8,9,10,11,12,16,17,18,19,20,21,22,23,27,28,29,30,31,32,33,34,38,39,40,41,42,43,44,45,49,50,51,52,53,54,55,56,60,61,62,63,64,65,66,67,71,72,73,74,75,76,77,78,82,83,84,85,86,87,88,89,93,94,95,96,97,98,99,100,104,105,106,107,108,109,110,111,115,116,117,118,119,120,121,122,126,127,128,129,130,131,132,133,137,138,139,140,141,142,143,144,148,149,150,151,152,153,154,155,159,160,161,162,163,164,165,166,170,171,172,173,174,175,176],"12":[3,4,6,7,9,10,12,13,15,16,18,19,21,22,24,25,27,28,30,31,33,34,36,37,39,40,42,43,45,46,48,49,51,52,54,55,57,58,60,61,63,64,66,67,69,70,72,73,75,76,78,79,81,82,84,85,87,88,90,91,93,94,96,97,99,100,102,103,105,106,108,109,111,112,114,115,117,118,120,121,123,124,126,127,129,130,132,133,135,136,138,139,141,142,144,145,147,148,150,151,153,154,156,157,159,160,162,163,165,166,168,169,171,172,174,175,177,178,180,181,183,184,186,187,189,190,192],"13":[4,5,7,8,10,11,13,14,17,18,20,21,23,24,26,27,30,31,33,34,36,37,39,40,43,44,46,47,49,50,52,53,56,57,59,60,62,63,65,66,69,70,72,73,75,76,78,79,82,83,85,86,88,89,91,92,95,96,98,99,101,102,104,105,108,109,111,112,114,115,117,118,121,122,124,125,127,128,130,131,134,135,137,138,140,141,143,144,147,148,150,151,153,154,156,157,160,161,163,164,166,167,169,170,173,174,176,177,179,180,182,183,186,187,189,190,192,193,195,196,199,200,202,203,205,206,208],"14":[5,6,8,9,11,12,14,15,19,20,22,23,25,26,28,29,33,34,36,37,39,40,42,43,47,48,50,51,53,54,56,57,61,62,64,65,67,68,70,71,75,76,78,79,81,82,84,85,89,90,92,93,95,96,98,99,103,104,106,107,109,110,112,113,117,118,120,121,123,124,126,127,131,132,134,135,137,138,140,141,145,146,148,149,151,152,154,155,159,160,162,163,165,166,168,169,173,174,176,177,179,180,182,183,187,188,190,191,193,194,196,197,201,202,204,205,207,208,210,211,215,216,218,219,221,222,224],"15":[6,7,9,10,12,13,15,16,21,22,24,25,27,28,30,31,36,37,39,40,42,43,45,46,51,52,54,55,57,58,60,61,66,67,69,70,72,73,75,76,81,82,84,85,87,88,90,91,96,97,99,100,102,103,105,106,111,112,114,115,117,118,120,121,126,127,129,130,132,133,135,136,141,142,144,145,147,148,150,151,156,157,159,160,162,163,165,166,171,172,174,175,177,178,180,181,186,187,189,190,192,193,195,196,201,202,204,205,207,208,210,211,216,217,219,220,222,223,225,226,231,232,234,235,237,238,240],"16":[3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99,101,103,105,107,109,111,113,115,117,119,121,123,125,127,129,131,133,135,137,139,141,143,145,147,149,151,153,155,157,159,161,163,165,167,169,171,173,175,177,179,181,183,185,187,189,191,193,195,197,199,201,203,205,207,209,211,213,215,217,219,221,223,225,227,229,231,233,235,237,239,241,243,245,247,249,251,253,255],"17":[4,6,8,10,12,14,16,18,21,23,25,27,29,31,33,35,38,40,42,44,46,48,50,52,55,57,59,61,63,65,67,69,72,74,76,78,80,82,84,86,89,91,93,95,97,99,101,103,106,108,110,112,114,116,118,120,123,125,127,129,131,133,135,137,140,142,144,146,148,150,152,154,157,159,161,163,165,167,169,171,174,176,178,180,182,184,186,188,191,193,195,197,199,201,203,205,208,210,212,214,216,218,220,222,225,227,229,231,233,235,237,239,242,244,246,248,250,252,254,256,259,261,263,265,267,269,271],"18":[5,7,9,11,13,15,17,19,23,25,27,29,31,33,35,37,41,43,45,47,49,51,53,55,59,61,63,65,67,69,71,73,77,79,81,83,85,87,89,91,95,97,99,101,103,105,107,109,113,115,117,119,121,123,125,127,131,133,135,137,139,141,143,145,149,151,153,155,157,159,161,163,167,169,171,173,175,177,179,181,185,187,189,191,193,195,197,199,203,205,207,209,211,213,215,217,221,223,225,227,229,231,233,235,239,241,243,245,247,249,251,253,257,259,261,263,265,267,269,271,275,277,279,281,283,285,287],"19":[6,8,10,12,14,16,18,20,25,27,29,31,33,35,37,39,44,46,48,50,52,54,56,58,63,65,67,69,71,73,75,77,82,84,86,88,90,92,94,96,101,103,105,107,109,111,113,115,120,122,124,126,128,130,132,134,139,141,143,145,147,149,151,153,158,160,162,164,166,168,170,172,177,179,181,183,185,187,189,191,196,198,200,202,204,206,208,210,215,217,219,221,223,225,227,229,234,236,238,240,242,244,246,248,253,255,257,259,261,263,265,267,272,274,276,278,280,282,284,286,291,293,295,297,299,301,303],"20":[4,6,9,11,14,16,19,21,24,26,29,31,34,36,39,41,44,46,49,51,54,56,59,61,64,66,69,71,74,76,79,81,84,86,89,91,94,96,99,101,104,106,109,111,114,116,119,121,124,126,129,131,134,136,139,141,144,146,149,151,154,156,159,161,164,166,169,171,174,176,179,181,184,186,189,191,194,196,199,201,204,206,209,211,214,216,219,221,224,226,229,231,234,236,239,241,244,246,249,251,254,256,259,261,264,266,269,271,274,276,279,281,284,286,289,291,294,296,299,301,304,306,309,311,314,316,319],"21":[5,7,10,12,15,17,20,22,26,28,31,33,36,38,41,43,47,49,52,54,57,59,62,64,68,70,73,75,78,80,83,85,89,91,94,96,99,101,104,106,110,112,115,117,120,122,125,127,131,133,136,138,141,143,146,148,152,154,157,159,162,164,167,169,173,175,178,180,183,185,188,190,194,196,199,201,204,206,209,211,215,217,220,222,225,227,230,232,236,238,241,243,246,248,251,253,257,259,262,264,267,269,272,274,278,280,283,285,288,290,293,295,299,301,304,306,309,311,314,316,320,322,325,327,330,332,335],"22":[6,8,11,13,16,18,21,23,28,30,33,35,38,40,43,45,50,52,55,57,60,62,65,67,72,74,77,79,82,84,87,89,94,96,99,101,104,106,109,111,116,118,121,123,126,128,131,133,138,140,143,145,148,150,153,155,160,162,165,167,170,172,175,177,182,184,187,189,192,194,197,199,204,206,209,211,214,216,219,221,226,228,231,233,236,238,241,243,248,250,253,255,258,260,263,265,270,272,275,277,280,282,285,287,292,294,297,299,302,304,307,309,314,316,319,321,324,326,329,331,336,338,341,343,346,348,351],"23":[7,9,12,14,17,19,22,24,30,32,35,37,40,42,45,47,53,55,58,60,63,65,68,70,76,78,81,83,86,88,91,93,99,101,104,106,109,111,114,116,122,124,127,129,132,134,137,139,145,147,150,152,155,157,160,162,168,170,173,175,178,180,183,185,191,193,196,198,201,203,206,208,214,216,219,221,224,226,229,231,237,239,242,244,247,249,252,254,260,262,265,267,270,272,275,277,283,285,288,290,293,295,298,300,306,308,311,313,316,318,321,323,329,331,334,336,339,341,344,346,352,354,357,359,362,364,367],"24":[4,7,10,13,16,19,22,25,28,31,34,37,40,43,46,49,52,55,58,61,64,67,70,73,76,79,82,85,88,91,94,97,100,103,106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382],"25":[5,8,11,14,17,20,23,26,30,33,36,39,42,45,48,51,55,58,61,64,67,70,73,76,80,83,86,89,92,95,98,101,105,108,111,114,117,120,123,126,130,133,136,139,142,145,148,151,155,158,161,164,167,170,173,176,180,183,186,189,192,195,198,201,205,208,211,214,217,220,223,226,230,233,236,239,242,245,248,251,255,258,261,264,267,270,273,276,280,283,286,289,292,295,298,301,305,308,311,314,317,320,323,326,330,333,336,339,342,345,348,351,355,358,361,364,367,370,373,376,380,383,386,389,392,395,398],"26":[6,9,12,15,18,21,24,27,32,35,38,41,44,47,50,53,58,61,64,67,70,73,76,79,84,87,90,93,96,99,102,105,110,113,116,119,122,125,128,131,136,139,142,145,148,151,154,157,162,165,168,171,174,177,180,183,188,191,194,197,200,203,206,209,214,217,220,223,226,229,232,235,240,243,246,249,252,255,258,261,266,269,272,275,278,281,284,287,292,295,298,301,304,307,310,313,318,321,324,327,330,333,336,339,344,347,350,353,356,359,362,365,370,373,376,379,382,385,388,391,396,399,402,405,408,411,414],"27":[7,10,13,16,19,22,25,28,34,37,40,43,46,49,52,55,61,64,67,70,73,76,79,82,88,91,94,97,100,103,106,109,115,118,121,124,127,130,133,136,142,145,148,151,154,157,160,163,169,172,175,178,181,184,187,190,196,199,202,205,208,211,214,217,223,226,229,232,235,238,241,244,250,253,256,259,262,265,268,271,277,280,283,286,289,292,295,298,304,307,310,313,316,319,322,325,331,334,337,340,343,346,349,352,358,361,364,367,370,373,376,379,385,388,391,394,397,400,403,406,412,415,418,421,424,427,430],"28":[5,8,12,15,19,22,26,29,33,36,40,43,47,50,54,57,61,64,68,71,75,78,82,85,89,92,96,99,103,106,110,113,117,120,124,127,131,134,138,141,145,148,152,155,159,162,166,169,173,176,180,183,187,190,194,197,201,204,208,211,215,218,222,225,229,232,236,239,243,246,250,253,257,260,264,267,271,274,278,281,285,288,292,295,299,302,306,309,313,316,320,323,327,330,334,337,341,344,348,351,355,358,362,365,369,372,376,379,383,386,390,393,397,400,404,407,411,414,418,421,425,428,432,435,439,442,446],"29":[6,9,13,16,20,23,27,30,35,38,42,45,49,52,56,59,64,67,71,74,78,81,85,88,93,96,100,103,107,110,114,117,122,125,129,132,136,139,143,146,151,154,158,161,165,168,172,175,180,183,187,190,194,197,201,204,209,212,216,219,223,226,230,233,238,241,245,248,252,255,259,262,267,270,274,277,281,284,288,291,296,299,303,306,310,313,317,320,325,328,332,335,339,342,346,349,354,357,361,364,368,371,375,378,383,386,390,393,397,400,404,407,412,415,419,422,426,429,433,436,441,444,448,451,455,458,462],"30":[7,10,14,17,21,24,28,31,37,40,44,47,51,54,58,61,67,70,74,77,81,84,88,91,97,100,104,107,111,114,118,121,127,130,134,137,141,144,148,151,157,160,164,167,171,174,178,181,187,190,194,197,201,204,208,211,217,220,224,227,231,234,238,241,247,250,254,257,261,264,268,271,277,280,284,287,291,294,298,301,307,310,314,317,321,324,328,331,337,340,344,347,351,354,358,361,367,370,374,377,381,384,388,391,397,400,404,407,411,414,418,421,427,430,434,437,441,444,448,451,457,460,464,467,471,474,478],"31":[8,11,15,18,22,25,29,32,39,42,46,49,53,56,60,63,70,73,77,80,84,87,91,94,101,104,108,111,115,118,122,125,132,135,139,142,146,149,153,156,163,166,170,173,177,180,184,187,194,197,201,204,208,211,215,218,225,228,232,235,239,242,246,249,256,259,263,266,270,273,277,280,287,290,294,297,301,304,308,311,318,321,325,328,332,335,339,342,349,352,356,359,363,366,370,373,380,383,387,390,394,397,401,404,411,414,418,421,425,428,432,435,442,445,449,452,456,459,463,466,473,476,480,483,487,490,494],"32":[5,9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349,353,357,361,365,369,373,377,381,385,389,393,397,401,405,409,413,417,421,425,429,433,437,441,445,449,453,457,461,465,469,473,477,481,485,489,493,497,501,505,509]},"svb":{"1":[2,3,4,5,7,8,9,10,12,13,14,15,17,18,19,20,22,23,24,25,27,28,29,30,32,33,34,35,37,38,39,40,42,43,44,45,47,48,49,50,52,53,54,55,57,58,59,60,62,63,64,65,67,68,69,70,72,73,74,75,77,78,79,80,82,83,84,85,87,88,89,90,92,93,94,95,97,98,99,100,102,103,104,105,107,108,109,110,112,113,114,115,117,118,119,120,122,123,124,125,127,128,129,130,132,133,134,135,137,138,139,140,142,143,144,145,147,148,149,150,152,153,154,155,157,158,159],"2":[2,3,4,5,7,8,9,10,12,13,14,15,17,18,19,20,22,23,24,25,27,28,29,30,32,33,34,35,37,38,39,40,42,43,44,45,47,48,49,50,52,53,54,55,57,58,59,60,62,63,64,65,67,68,69,70,72,73,74,75,77,78,79,80,82,83,84,85,87,88,89,90,92,93,94,95,97,98,99,100,102,103,104,105,107,108,109,110,112,113,114,115,117,118,119,120,122,123,124,125,127,128,129,130,132,133,134,135,137,138,139,140,142,143,144,145,147,148,149,150,152,153,154,155,157,158,159],"3":[2,3,4,5,7,8,9,10,12,13,14,15,17,18,19,20,22,23,24,25,27,28,29,30,32,33,34,35,37,38,39,40,42,43,44,45,47,48,49,50,52,53,54,55,57,58,59,60,62,63,64,65,67,68,69,70,72,73,74,75,77,78,79,80,82,83,84,85,87,88,89,90,92,93,94,95,97,98,99,100,102,103,104,105,107,108,109,110,112,113,114,115,117,118,119,120,122,123,124,125,127,128,129,130,132,133,134,135,137,138,139,140,142,143,144,145,147,148,149,150,152,153,154,155,157,158,159],"4":[2,3,4,5,7,8,9,10,12,13,14,15,17,18,19,20,22,23,24,25,27,28,29,30,32,33,34,35,37,38,39,40,42,43,44,45,47,48,49,50,52,53,54,55,57,58,59,60,62,63,64,65,67,68,69,70,72,73,74,75,77,78,79,80,82,83,84,85,87,88,89,90,92,93,94,95,97,98,99,100,102,103,104,105,107,108,109,110,112,113,114,115,117,118,119,120,122,123,124,125,127,128,129,130,132,133,134,135,137,138,139,140,142,143,144,145,147,148,149,150,152,153,154,155,157,158,159],"5":[2,3,4,5,7,8,9,10,12,13,14,15,17,18,19,20,22,23,24,25,27,28,29,30,32,33,34,35,37,38,39,40,42,43,44,45,47,48,49,50,52,53,54,55,57,58,59,60,62,63,64,65,67,68,69,70,72,73,74,75,77,78,79,80,82,83,84,85,87,88,89,90,92,93,94,95,97,98,99,100,102,103,104,105,107,108,109,110,112,113,114,115,117,118,119,120,122,123,124,125,127,128,129,130,132,133,134,135,137,138,139,140,142,143,144,145,147,148,149,150,152,153,154,155,157,158,159],"6":[2,3,4,5,7,8,9,10,12,13,14,15,17,18,19,20,22,23,24,25,27,28,29,30,32,33,34,35,37,38,39,40,42,43,44,45,47,48,49,50,52,53,54,55,57,58,59,60,62,63,64,65,67,68,69,70,72,73,74,75,77,78,79,80,82,83,84,85,87,88,89,90,92,93,94,95,97,98,99,100,102,103,104,105,107,108,109,110,112,113,114,115,117,118,119,120,122,123,124,125,127,128,129,130,132,133,134,135,137,138,139,140,142,143,144,145,147,148,149,150,152,153,154,155,157,158,159],"7":[2,3,4,5,7,8,9,10,12,13,14,15,17,18,19,20,22,23,24,25,27,28,29,30,32,33,34,35,37,38,39,40,42,43,44,45,47,48,49,50,52,53,54,55,57,58,59,60,62,63,64,65,67,68,69,70,72,73,74,75,77,78,79,80,82,83,84,85,87,88,89,90,92,93,94,95,97,98,99,100,102,103,104,105,107,108,109,110,112,113,114,115,117,118,119,120,122,123,124,125,127,128,129,130,132,133,134,135,137,138,139,140,142,143,144,145,147,148,149,150,152,153,154,155,157,158,159],"8":[2,3,4,5,7,8,9,10,12,13,14,15,17,18,19,20,22,23,24,25,27,28,29,30,32,33,34,35,37,38,39,40,42,43,44,45,47,48,49,50,52,53,54,55,57,58,59,60,62,63,64,65,67,68,69,70,72,73,74,75,77,78,79,80,82,83,84,85,87,88,89,90,92,93,94,95,97,98,99,100,102,103,104,105,107,108,109,110,112,113,114,115,117,118,119,120,122,123,124,125,127,128,129,130,132,133,134,135,137,138,139,140,142,143,144,145,147,148,149,150,152,153,154,155,157,158,159],"9":[3,5,7,9,12,14,16,18,21,23,25,27,30,32,34,36,39,41,43,45,48,50,52,54,57,59,61,63,66,68,70,72,75,77,79,81,84,86,88,90,93,95,97,99,102,104,106,108,111,113,115,117,120,122,124,126,129,131,133,135,138,140,142,144,147,149,151,153,156,158,160,162,165,167,169,171,174,176,178,180,183,185,187,189,192,194,196,198,201,203,205,207,210,212,214,216,219,221,223,225,228,230,232,234,237,239,241,243,246,248,250,252,255,257,259,261,264,266,268,270,273,275,277,279,282,284,286],"10":[3,5,7,9,12,14,16,18,21,23,25,27,30,32,34,36,39,41,43,45,48,50,52,54,57,59,61,63,66,68,70,72,75,77,79,81,84,86,88,90,93,95,97,99,102,104,106,108,111,113,115,117,120,122,124,126,129,131,133,135,138,140,142,144,147,149,151,153,156,158,160,162,165,167,169,171,174,176,178,180,183,185,187,189,192,194,196,198,201,203,205,207,210,212,214,216,219,221,223,225,228,230,232,234,237,239,241,243,246,248,250,252,255,257,259,261,264,266,268,270,273,275,277,279,282,284,286],"11":[3,5,7,9,12,14,16,18,21,23,25,27,30,32,34,36,39,41,43,45,48,50,52,54,57,59,61,63,66,68,70,72,75,77,79,81,84,86,88,90,93,95,97,99,102,104,106,108,111,113,115,117,120,122,124,126,129,131,133,135,138,140,142,144,147,149,151,153,156,158,160,162,165,167,169,171,174,176,178,180,183,185,187,189,192,194,196,198,201,203,205,207,210,212,214,216,219,221,223,225,228,230,232,234,237,239,241,243,246,248,250,252,255,257,259,261,264,266,268,270,273,275,277,279,282,284,286],"12":[3,5,7,9,12,14,16,18,21,23,25,27,30,32,34,36,39,41,43,45,48,50,52,54,57,59,61,63,66,68,70,72,75,77,79,81,84,86,88,90,93,95,97,99,102,104,106,108,111,113,115,117,120,122,124,126,129,131,133,135,138,140,142,144,147,149,151,153,156,158,160,162,165,167,169,171,174,176,178,180,183,185,187,189,192,194,196,198,201,203,205,207,210,212,214,216,219,221,223,225,228,230,232,234,237,239,241,243,246,248,250,252,255,257,259,261,264,266,268,270,273,275,277,279,282,284,286],"13":[3,5,7,9,12,14,16,18,21,23,25,27,30,32,34,36,39,41,43,45,48,50,52,54,57,59,61,63,66,68,70,72,75,77,79,81,84,86,88,90,93,95,97,99,102,104,106,108,111,113,115,117,120,122,124,126,129,131,133,135,138,140,142,144,147,149,151,153,156,158,160,162,165,167,169,171,174,176,178,180,183,185,187,189,192,194,196,198,201,203,205,207,210,212,214,216,219,221,223,225,228,230,232,234,237,239,241,243,246,248,250,252,255,257,259,261,264,266,268,270,273,275,277,279,282,284,286],"14":[3,5,7,9,12,14,16,18,21,23,25,27,30,32,34,36,39,41,43,45,48,50,52,54,57,59,61,63,66,68,70,72,75,77,79,81,84,86,88,90,93,95,97,99,102,104,106,108,111,113,115,117,120,122,124,126,129,131,133,135,138,140,142,144,147,149,151,153,156,158,160,162,165,167,169,171,174,176,178,180,183,185,187,189,192,194,196,198,201,203,205,207,210,212,214,216,219,221,223,225,228,230,232,234,237,239,241,243,246,248,250,252,255,257,259,261,264,266,268,270,273,275,277,279,282,284,286],"15":[3,5,7,9,12,14,16,18,21,23,25,27,30,32,34,36,39,41,43,45,48,50,52,54,57,59,61,63,66,68,70,72,75,77,79,81,84,86,88,90,93,95,97,99,102,104,106,108,111,113,115,117,120,122,124,126,129,131,133,135,138,140,142,144,147,149,151,153,156,158,160,162,165,167,169,171,174,176,178,180,183,185,187,189,192,194,196,198,201,203,205,207,210,212,214,216,219,221,223,225,228,230,232,234,237,239,241,243,246,248,250,252,255,257,259,261,264,266,268,270,273,275,277,279,282,284,286],"16":[3,5,7,9,12,14,16,18,21,23,25,27,30,32,34,36,39,41,43,45,48,50,52,54,57,59,61,63,66,68,70,72,75,77,79,81,84,86,88,90,93,95,97,99,102,104,106,108,111,113,115,117,120,122,124,126,129,131,133,135,138,140,142,144,147,149,151,153,156,158,160,162,165,167,169,171,174,176,178,180,183,185,187,189,192,194,196,198,201,203,205,207,210,212,214,216,219,221,223,225,228,230,232,234,237,239,241,243,246,248,250,252,255,257,259,261,264,266,268,270,273,275,277,279,282,284,286],"17":[4,7,10,13,17,20,23,26,30,33,36,39,43,46,49,52,56,59,62,65,69,72,75,78,82,85,88,91,95,98,101,104,108,111,114,117,121,124,127,130,134,137,140,143,147,150,153,156,160,163,166,169,173,176,179,182,186,189,192,195,199,202,205,208,212,215,218,221,225,228,231,234,238,241,244,247,251,254,257,260,264,267,270,273,277,280,283,286,290,293,296,299,303,306,309,312,316,319,322,325,329,332,335,338,342,345,348,351,355,358,361,364,368,371,374,377,381,384,387,390,394,397,400,403,407,410,413],"18":[4,7,10,13,17,20,23,26,30,33,36,39,43,46,49,52,56,59,62,65,69,72,75,78,82,85,88,91,95,98,101,104,108,111,114,117,121,124,127,130,134,137,140,143,147,150,153,156,160,163,166,169,173,176,179,182,186,189,192,195,199,202,205,208,212,215,218,221,225,228,231,234,238,241,244,247,251,254,257,260,264,267,270,273,277,280,283,286,290,293,296,299,303,306,309,312,316,319,322,325,329,332,335,338,342,345,348,351,355,358,361,364,368,371,374,377,381,384,387,390,394,397,400,403,407,410,413],"19":[4,7,10,13,17,20,23,26,30,33,36,39,43,46,49,52,56,59,62,65,69,72,75,78,82,85,88,91,95,98,101,104,108,111,114,117,121,124,127,130,134,137,140,143,147,150,153,156,160,163,166,169,173,176,179,182,186,189,192,195,199,202,205,208,212,215,218,221,225,228,231,234,238,241,244,247,251,254,257,260,264,267,270,273,277,280,283,286,290,293,296,299,303,306,309,312,316,319,322,325,329,332,335,338,342,345,348,351,355,358,361,364,368,371,374,377,381,384,387,390,394,397,400,403,407,410,413],"20":[4,7,10,13,17,20,23,26,30,33,36,39,43,46,49,52,56,59,62,65,69,72,75,78,82,85,88,91,95,98,101,104,108,111,114,117,121,124,127,130,134,137,140,143,147,150,153,156,160,163,166,169,173,176,179,182,186,189,192,195,199,202,205,208,212,215,218,221,225,228,231,234,238,241,244,247,251,254,257,260,264,267,270,273,277,280,283,286,290,293,296,299,303,306,309,312,316,319,322,325,329,332,335,338,342,345,348,351,355,358,361,364,368,371,374,377,381,384,387,390,394,397,400,403,407,410,413],"21":[4,7,10,13,17,20,23,26,30,33,36,39,43,46,49,52,56,59,62,65,69,72,75,78,82,85,88,91,95,98,101,104,108,111,114,117,121,124,127,130,134,137,140,143,147,150,153,156,160,163,166,169,173,176,179,182,186,189,192,195,199,202,205,208,212,215,218,221,225,228,231,234,238,241,244,247,251,254,257,260,264,267,270,273,277,280,283,286,290,293,296,299,303,306,309,312,316,319,322,325,329,332,335,338,342,345,348,351,355,358,361,364,368,371,374,377,381,384,387,390,394,397,400,403,407,410,413],"22":[4,7,10,13,17,20,23,26,30,33,36,39,43,46,49,52,56,59,62,65,69,72,75,78,82,85,88,91,95,98,101,104,108,111,114,117,121,124,127,130,134,137,140,143,147,150,153,156,160,163,166,169,173,176,179,182,186,189,192,195,199,202,205,208,212,215,218,221,225,228,231,234,238,241,244,247,251,254,257,260,264,267,270,273,277,280,283,286,290,293,296,299,303,306,309,312,316,319,322,325,329,332,335,338,342,345,348,351,355,358,361,364,368,371,374,377,381,384,387,390,394,397,400,403,407,410,413],"23":[4,7,10,13,17,20,23,26,30,33,36,39,43,46,49,52,56,59,62,65,69,72,75,78,82,85,88,91,95,98,101,104,108,111,114,117,121,124,127,130,134,137,140,143,147,150,153,156,160,163,166,169,173,176,179,182,186,189,192,195,199,202,205,208,212,215,218,221,225,228,231,234,238,241,244,247,251,254,257,260,264,267,270,273,277,280,283,286,290,293,296,299,303,306,309,312,316,319,322,325,329,332,335,338,342,345,348,351,355,358,361,364,368,371,374,377,381,384,387,390,394,397,400,403,407,410,413],"24":[4,7,10,13,17,20,23,26,30,33,36,39,43,46,49,52,56,59,62,65,69,72,75,78,82,85,88,91,95,98,101,104,108,111,114,117,121,124,127,130,134,137,140,143,147,150,153,156,160,163,166,169,173,176,179,182,186,189,192,195,199,202,205,208,212,215,218,221,225,228,231,234,238,241,244,247,251,254,257,260,264,267,270,273,277,280,283,286,290,293,296,299,303,306,309,312,316,319,322,325,329,332,335,338,342,345,348,351,355,358,361,364,368,371,374,377,381,384,387,390,394,397,400,403,407,410,413],"25":[5,9,13,17,22,26,30,34,39,43,47,51,56,60,64,68,73,77,81,85,90,94,98,102,107,111,115,119,124,128,132,136,141,145,149,153,158,162,166,170,175,179,183,187,192,196,200,204,209,213,217,221,226,230,234,238,243,247,251,255,260,264,268,272,277,281,285,289,294,298,302,306,311,315,319,323,328,332,336,340,345,349,353,357,362,366,370,374,379,383,387,391,396,400,404,408,413,417,421,425,430,434,438,442,447,451,455,459,464,468,472,476,481,485,489,493,498,502,506,510,515,519,523,527,532,536,540],"26":[5,9,13,17,22,26,30,34,39,43,47,51,56,60,64,68,73,77,81,85,90,94,98,102,107,111,115,119,124,128,132,136,141,145,149,153,158,162,166,170,175,179,183,187,192,196,200,204,209,213,217,221,226,230,234,238,243,247,251,255,260,264,268,272,277,281,285,289,294,298,302,306,311,315,319,323,328,332,336,340,345,349,353,357,362,366,370,374,379,383,387,391,396,400,404,408,413,417,421,425,430,434,438,442,447,451,455,459,464,468,472,476,481,485,489,493,498,502,506,510,515,519,523,527,532,536,540],"27":[5,9,13,17,22,26,30,34,39,43,47,51,56,60,64,68,73,77,81,85,90,94,98,102,107,111,115,119,124,128,132,136,141,145,149,153,158,162,166,170,175,179,183,187,192,196,200,204,209,213,217,221,226,230,234,238,243,247,251,255,260,264,268,272,277,281,285,289,294,298,302,306,311,315,319,323,328,332,336,340,345,349,353,357,362,366,370,374,379,383,387,391,396,400,404,408,413,417,421,425,430,434,438,442,447,451,455,459,464,468,472,476,481,485,489,493,498,502,506,510,515,519,523,527,532,536,540],"28":[5,9,13,17,22,26,30,34,39,43,47,51,56,60,64,68,73,77,81,85,90,94,98,102,107,111,115,119,124,128,132,136,141,145,149,153,158,162,166,170,175,179,183,187,192,196,200,204,209,213,217,221,226,230,234,238,243,247,251,255,260,264,268,272,277,281,285,289,294,298,302,306,311,315,319,323,328,332,336,340,345,349,353,357,362,366,370,374,379,383,387,391,396,400,404,408,413,417,421,425,430,434,438,442,447,451,455,459,464,468,472,476,481,485,489,493,498,502,506,510,515,519,523,527,532,536,540],"29":[5,9,13,17,22,26,30,34,39,43,47,51,56,60,64,68,73,77,81,85,90,94,98,102,107,111,115,119,124,128,132,136,141,145,149,153,158,162,166,170,175,179,183,187,192,196,200,204,209,213,217,221,226,230,234,238,243,247,251,255,260,264,268,272,277,281,285,289,294,298,302,306,311,315,319,323,328,332,336,340,345,349,353,357,362,366,370,374,379,383,387,391,396,400,404,408,413,417,421,425,430,434,438,442,447,451,455,459,464,468,472,476,481,485,489,493,498,502,506,510,515,519,523,527,532,536,540],"30":[5,9,13,17,22,26,30,34,39,43,47,51,56,60,64,68,73,77,81,85,90,94,98,102,107,111,115,119,124,128,132,136,141,145,149,153,158,162,166,170,175,179,183,187,192,196,200,204,209,213,217,221,226,230,234,238,243,247,251,255,260,264,268,272,277,281,285,289,294,298,302,306,311,315,319,323,328,332,336,340,345,349,353,357,362,366,370,374,379,383,387,391,396,400,404,408,413,417,421,425,430,434,438,442,447,451,455,459,464,468,472,476,481,485,489,493,498,502,506,510,515,519,523,527,532,536,540],"31":[5,9,13,17,22,26,30,34,39,43,47,51,56,60,64,68,73,77,81,85,90,94,98,102,107,111,115,119,124,128,132,136,141,145,149,153,158,162,166,170,175,179,183,187,192,196,200,204,209,213,217,221,226,230,234,238,243,247,251,255,260,264,268,272,277,281,285,289,294,298,302,306,311,315,319,323,328,332,336,340,345,349,353,357,362,366,370,374,379,383,387,391,396,400,404,408,413,417,421,425,430,434,438,442,447,451,455,459,464,468,472,476,481,485,489,493,498,502,506,510,515,519,523,527,532,536,540],"32":[5,9,13,17,22,26,30,34,39,43,47,51,56,60,64,68,73,77,81,85,90,94,98,102,107,111,115,119,124,128,132,136,141,145,149,153,158,162,166,170,175,179,183,187,192,196,200,204,209,213,217,221,226,230,234,238,243,247,251,255,260,264,268,272,277,281,285,289,294,298,302,306,311,315,319,323,328,332,336,340,345,349,353,357,362,366,370,374,379,383,387,391,396,400,404,408,413,417,421,425,430,434,438,442,447,451,455,459,464,468,472,476,481,485,489,493,498,502,506,510,515,519,523,527,532,536,540]}};
const BITS = Array.from({ length: 32 }, (_, i) => i + 1);
const CustomTooltip = ({ active, payload, label }) => {
if (!active || !payload?.length) return null;
const upack = payload.find(p => p.dataKey === "upack");
const svb = payload.find(p => p.dataKey === "svb");
const uVal = upack?.value ?? 0;
const sVal = svb?.value ?? 0;
const diff = sVal - uVal;
const pct = sVal > 0 ? ((diff / sVal) * 100).toFixed(1) : 0;
return (
<div style={{
background: "#1a1a2e",
border: "1px solid rgba(255,255,255,0.1)",
borderRadius: 8,
padding: "12px 16px",
boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
}}>
<p style={{ color: "#aaa", fontSize: 12, margin: "0 0 8px", fontFamily: "'JetBrains Mono', monospace" }}>
{label} elements
</p>
{payload.map((p, i) => (
<div key={i} style={{ display: "flex", alignItems: "center", gap: 8, margin: "4px 0" }}>
<div style={{ width: 10, height: 10, borderRadius: 2, background: p.color }} />
<span style={{ color: "#ccc", fontSize: 13, fontFamily: "'JetBrains Mono', monospace" }}>
{p.dataKey === "upack" ? "μpack" : "StreamVByte"}: <strong style={{ color: "#fff" }}>{p.value} B</strong>
</span>
</div>
))}
{diff !== 0 && (
<div style={{ marginTop: 6, paddingTop: 6, borderTop: "1px solid rgba(255,255,255,0.08)" }}>
<span style={{
fontSize: 11,
fontFamily: "'JetBrains Mono', monospace",
color: diff > 0 ? "#4ecb71" : "#e8553d",
}}>
{diff > 0 ? `μpack saves ${diff} B (${pct}%)` : `StreamVByte saves ${-diff} B`}
</span>
</div>
)}
</div>
);
};
function CompressionSizeViz() {
const [bitLength, setBitLength] = useState(8);
const [view, setView] = useState("size");
const chartData = useMemo(() => {
const uArr = DATA.upack[String(bitLength)] || [];
const sArr = DATA.svb[String(bitLength)] || [];
return Array.from({ length: 127 }, (_, i) => {
const u = uArr[i] ?? 0;
const s = sArr[i] ?? 0;
return {
n: i + 1,
upack: u,
svb: s,
savings: s > 0 ? Math.round(((s - u) / s) * 100) : 0,
};
});
}, [bitLength]);
const maxSavings = useMemo(() => {
const s = chartData.map(d => d.savings);
return Math.max(...s);
}, [chartData]);
const minSavings = useMemo(() => {
const s = chartData.map(d => d.savings);
return Math.min(...s);
}, [chartData]);
const avgSavings = useMemo(() => {
const s = chartData.map(d => d.savings);
return Math.round(s.reduce((a, b) => a + b, 0) / s.length);
}, [chartData]);
return (
<div style={{
minHeight: "100vh",
background: "#0f0f1a",
color: "#e0e0e0",
fontFamily: "'Inter', system-ui, sans-serif",
padding: "40px 24px",
}}>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet" />
<div style={{ maxWidth: 960, margin: "0 auto" }}>
{/* Header */}
<div style={{ marginBottom: 32 }}>
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
<div style={{ width: 4, height: 28, background: "#e8553d", borderRadius: 2 }} />
<h1 style={{
fontFamily: "'Space Grotesk', sans-serif",
fontSize: 26,
fontWeight: 700,
color: "#fff",
margin: 0,
letterSpacing: "-0.02em",
}}>
Compressed Size: μpack vs StreamVByte
</h1>
</div>
<p style={{
color: "#666",
fontSize: 14,
margin: "8px 0 0 14px",
fontFamily: "'JetBrains Mono', monospace",
}}>
Compressed output bytes by element count
</p>
</div>
{/* Controls row */}
<div style={{ display: "flex", gap: 20, marginBottom: 28, flexWrap: "wrap", alignItems: "flex-end" }}>
{/* Bit length slider */}
<div style={{ flex: 1, minWidth: 260 }}>
<label style={{
display: "block",
fontSize: 11,
color: "#888",
fontFamily: "'JetBrains Mono', monospace",
textTransform: "uppercase",
letterSpacing: "0.05em",
marginBottom: 8,
}}>
Bit Length: <span style={{ color: "#fff", fontSize: 16, fontWeight: 700 }}>{bitLength}</span>
</label>
<input
type="range"
min={1}
max={32}
value={bitLength}
onChange={e => setBitLength(Number(e.target.value))}
style={{
width: "100%",
accentColor: "#e8553d",
height: 6,
}}
/>
<div style={{
display: "flex",
justifyContent: "space-between",
fontSize: 10,
color: "#555",
fontFamily: "'JetBrains Mono', monospace",
marginTop: 4,
}}>
<span>1</span><span>8</span><span>16</span><span>24</span><span>32</span>
</div>
</div>
{/* View toggle */}
<div style={{ display: "flex", gap: 4, background: "#1a1a2e", borderRadius: 8, padding: 4 }}>
{[
{ key: "size", label: "Absolute Size" },
{ key: "savings", label: "% Savings" },
].map(({ key, label }) => (
<button
key={key}
onClick={() => setView(key)}
style={{
padding: "8px 18px",
borderRadius: 6,
border: "none",
cursor: "pointer",
fontSize: 13,
fontFamily: "'JetBrains Mono', monospace",
fontWeight: view === key ? 600 : 400,
background: view === key ? "#e8553d" : "transparent",
color: view === key ? "#fff" : "#777",
transition: "all 0.2s",
}}
>
{label}
</button>
))}
</div>
</div>
{/* Stats row */}
<div style={{ display: "flex", gap: 12, marginBottom: 20 }}>
{[
{ label: "Avg savings", value: `${avgSavings}%`, color: avgSavings > 0 ? "#4ecb71" : "#e8553d" },
{ label: "Max savings", value: `${maxSavings}%`, color: "#4ecb71" },
{ label: "@ 127 elements", value: `${chartData[126]?.upack}B vs ${chartData[126]?.svb}B`, color: "#aaa" },
].map(({ label, value, color }) => (
<div key={label} style={{
background: "#111122",
border: "1px solid #1e1e36",
borderRadius: 8,
padding: "12px 16px",
flex: 1,
}}>
<div style={{ fontSize: 10, color: "#666", fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 4 }}>{label}</div>
<div style={{ fontSize: 18, color, fontFamily: "'JetBrains Mono', monospace", fontWeight: 700 }}>{value}</div>
</div>
))}
</div>
{/* Chart */}
<div style={{
background: "#111122",
borderRadius: 12,
padding: "24px 16px 16px",
border: "1px solid #1e1e36",
}}>
{view === "size" ? (
<ResponsiveContainer width="100%" height={400}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" stroke="#1e1e36" vertical={false} />
<XAxis
dataKey="n"
tick={{ fill: "#888", fontSize: 11, fontFamily: "'JetBrains Mono', monospace" }}
axisLine={{ stroke: "rgba(255,255,255,0.08)" }}
tickLine={false}
label={{ value: "Number of elements", position: "insideBottom", offset: -5, style: { fill: "#555", fontSize: 11, fontFamily: "'JetBrains Mono', monospace" } }}
/>
<YAxis
tick={{ fill: "#666", fontSize: 11, fontFamily: "'JetBrains Mono', monospace" }}
axisLine={false}
tickLine={false}
label={{ value: "Bytes", angle: -90, position: "insideLeft", style: { fill: "#555", fontSize: 11, fontFamily: "'JetBrains Mono', monospace" }, offset: 10 }}
/>
<Tooltip content={<CustomTooltip />} />
<Line type="monotone" dataKey="svb" stroke="#f5a623" strokeWidth={2.5} dot={false} name="StreamVByte" />
<Line type="monotone" dataKey="upack" stroke="#e8553d" strokeWidth={2.5} dot={false} name="μpack" />
</LineChart>
</ResponsiveContainer>
) : (
<ResponsiveContainer width="100%" height={400}>
<AreaChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" stroke="#1e1e36" vertical={false} />
<XAxis
dataKey="n"
tick={{ fill: "#888", fontSize: 11, fontFamily: "'JetBrains Mono', monospace" }}
axisLine={{ stroke: "rgba(255,255,255,0.08)" }}
tickLine={false}
label={{ value: "Number of elements", position: "insideBottom", offset: -5, style: { fill: "#555", fontSize: 11, fontFamily: "'JetBrains Mono', monospace" } }}
/>
<YAxis
tick={{ fill: "#666", fontSize: 11, fontFamily: "'JetBrains Mono', monospace" }}
axisLine={false}
tickLine={false}
domain={[Math.min(minSavings - 5, -10), Math.max(maxSavings + 5, 10)]}
label={{ value: "% savings (μpack vs SVB)", angle: -90, position: "insideLeft", style: { fill: "#555", fontSize: 11, fontFamily: "'JetBrains Mono', monospace" }, offset: 10 }}
/>
<Tooltip
content={({ active, payload, label }) => {
if (!active || !payload?.length) return null;
const v = payload[0]?.value;
return (
<div style={{
background: "#1a1a2e",
border: "1px solid rgba(255,255,255,0.1)",
borderRadius: 8,
padding: "10px 14px",
boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
}}>
<p style={{ color: "#aaa", fontSize: 12, margin: "0 0 4px", fontFamily: "'JetBrains Mono', monospace" }}>{label} elements</p>
<p style={{ color: v >= 0 ? "#4ecb71" : "#e8553d", fontSize: 14, fontWeight: 700, margin: 0, fontFamily: "'JetBrains Mono', monospace" }}>
{v >= 0 ? `μpack ${v}% smaller` : `SVB ${-v}% smaller`}
</p>
</div>
);
}}
/>
<ReferenceLine y={0} stroke="rgba(255,255,255,0.15)" strokeDasharray="4 4" />
<defs>
<linearGradient id="savingsGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#4ecb71" stopOpacity={0.3} />
<stop offset="50%" stopColor="#4ecb71" stopOpacity={0.05} />
<stop offset="100%" stopColor="#e8553d" stopOpacity={0.2} />
</linearGradient>
</defs>
<Area type="monotone" dataKey="savings" stroke="#4ecb71" strokeWidth={2} fill="url(#savingsGrad)" />
</AreaChart>
</ResponsiveContainer>
)}
{/* Legend */}
{view === "size" && (
<div style={{ display: "flex", justifyContent: "center", gap: 24, marginTop: 8 }}>
{[
{ color: "#e8553d", label: "μpack" },
{ color: "#f5a623", label: "StreamVByte" },
].map(({ color, label }) => (
<div key={label} style={{ display: "flex", alignItems: "center", gap: 6 }}>
<div style={{ width: 16, height: 3, borderRadius: 2, background: color }} />
<span style={{ fontSize: 12, color: "#999", fontFamily: "'JetBrains Mono', monospace" }}>{label}</span>
</div>
))}
</div>
)}
</div>
{/* Bit length quick-select */}
<div style={{ marginTop: 20 }}>
<div style={{ fontSize: 11, color: "#555", fontFamily: "'JetBrains Mono', monospace", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.05em" }}>
Quick select bit length
</div>
<div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
{BITS.map(b => (
<button
key={b}
onClick={() => setBitLength(b)}
style={{
width: 36,
height: 32,
borderRadius: 6,
border: bitLength === b ? "1px solid #e8553d" : "1px solid #1e1e36",
background: bitLength === b ? "rgba(232,85,61,0.15)" : "#111122",
color: bitLength === b ? "#e8553d" : "#777",
fontSize: 12,
fontFamily: "'JetBrains Mono', monospace",
fontWeight: bitLength === b ? 700 : 400,
cursor: "pointer",
transition: "all 0.15s",
}}
>
{b}
</button>
))}
</div>
</div>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(CompressionSizeViz));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment