Software Engineer, Functional Programming enthusiast!
Public
Edited
Aug 23, 2023
1 star
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
// Bytes or compressed data from `cat ./lit-html/template-heavy/template-heavy_compiled.js | gzip -9 | wc -c`
rawData = [
{benchmark: "render", templates: 1037, key: "compiled", minAvg: 24.06, maxAvg: 26.26},
{benchmark: "update", templates: 1037, key: "compiled", minAvg: 66.66, maxAvg: 75.02},
{benchmark: "render", templates: 1037, key: "uncompiled", minAvg: 42.94, maxAvg: 44.39},
{benchmark: "update", templates: 1037, key: "uncompiled", minAvg: 81.76, maxAvg: 85.97},
{benchmark: "render", templates: 691, key: "compiled", minAvg: 20.64, maxAvg: 22.22, bytes: 213994},
{benchmark: "update", templates: 691, key: "compiled", minAvg: 54.31, maxAvg: 59.42, bytes: 213994},
{benchmark: "render", templates: 691, key: "uncompiled", minAvg: 35.30, maxAvg: 37.47, bytes: 202505},
{benchmark: "update", templates: 691, key: "uncompiled", minAvg: 69.14, maxAvg: 73.83, bytes: 202505},
{benchmark: "render", templates: 345, key: "compiled", minAvg: 12.41, maxAvg: 12.7, bytes: 69643},
{benchmark: "update", templates: 345, key: "compiled", minAvg: 35.42, maxAvg: 36.52, bytes: 69643},
{benchmark: "render", templates: 345, key: "uncompiled", minAvg: 24.69, maxAvg: 25.20, bytes: 67007},
{benchmark: "update", templates: 345, key: "uncompiled", minAvg: 40.76, maxAvg: 42.52, bytes: 67007},
{benchmark: "render", templates: 209, key: "compiled", minAvg: 8.51, maxAvg: 8.82, bytes: 43153},
{benchmark: "update", templates: 209, key: "compiled", minAvg: 25.19, maxAvg: 27.37, bytes: 43153},
{benchmark: "render", templates: 209, key: "uncompiled", minAvg: 17.44, maxAvg: 19.03, bytes: 41595},
{benchmark: "update", templates: 209, key: "uncompiled", minAvg: 28.53, maxAvg: 29.78, bytes: 41595},
{benchmark: "render", templates: 147, key: "compiled", minAvg: 6.3, maxAvg: 6.93, bytes: 31806},
{benchmark: "update", templates: 147, key: "compiled", minAvg: 18.1, maxAvg: 19.32, bytes: 31806},
{benchmark: "render", templates: 147, key: "uncompiled", minAvg: 12.94, maxAvg: 13.83, bytes: 30422},
{benchmark: "update", templates: 147, key: "uncompiled", minAvg: 20.68, maxAvg: 22.00, bytes: 30422},
{benchmark: "render", templates: 89, key: "compiled", minAvg: 4.83, maxAvg: 5.00, bytes: 19936},
{benchmark: "update", templates: 89, key: "compiled", minAvg: 12.7, maxAvg: 13.24, bytes: 19936},
{benchmark: "render", templates: 89, key: "uncompiled", minAvg: 9.28, maxAvg: 9.63, bytes: 19055},
{benchmark: "update", templates: 89, key: "uncompiled", minAvg: 15.81, maxAvg: 16.44, bytes: 19055},
{benchmark: "render", templates: 25, key: "compiled", minAvg: 2.86, maxAvg: 2.94, bytes: 6357},
{benchmark: "update", templates: 25, key: "compiled", minAvg: 5.22, maxAvg: 5.37, bytes: 6357},
{benchmark: "render", templates: 25, key: "uncompiled", minAvg: 5.25, maxAvg: 5.40, bytes: 5983},
{benchmark: "update", templates: 25, key: "uncompiled", minAvg: 6.18, maxAvg: 6.41, bytes: 5983},
{benchmark: "render", templates: 11, key: "compiled", minAvg: 2.29, maxAvg: 2.37, bytes: 3819},
{benchmark: "update", templates: 11, key: "compiled", minAvg: 2.94, maxAvg: 3.03, bytes: 3819},
{benchmark: "render", templates: 11, key: "uncompiled", minAvg: 4.15, maxAvg: 4.26, bytes: 3500},
{benchmark: "update", templates: 11, key: "uncompiled", minAvg: 3.36, maxAvg: 3.45, bytes: 3500},
{benchmark: "render", templates: 3, key: "compiled", minAvg: 1.98, maxAvg: 2.09, bytes: 2198},
{benchmark: "update", templates: 3, key: "compiled", minAvg: 1.76, maxAvg: 1.84, bytes: 2198},
{benchmark: "render", templates: 3, key: "uncompiled", minAvg: 3.53, maxAvg: 3.81, bytes: 1947},
{benchmark: "update", templates: 3, key: "uncompiled", minAvg: 1.88, maxAvg: 2.0, bytes: 1947},
{benchmark: "render", templates: 1, key: "compiled", minAvg: 1.6, maxAvg: 1.66, bytes: 1469},
{benchmark: "update", templates: 1, key: "compiled", minAvg: 0.81, maxAvg: 0.85, bytes: 1469},
{benchmark: "render", templates: 1, key: "uncompiled", minAvg: 2.92, maxAvg: 3.00, bytes: 1272},
{benchmark: "update", templates: 1, key: "uncompiled", minAvg: 0.85, maxAvg: 0.89, bytes: 1272},
];
onlyCompiled = rawData.filter(e => e.key === "compiled");
unCompiled = rawData.filter(e => e.key === "uncompiled");
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
y: { label: "minAvg (ms)", grid: true },
title: "template-heavy benchmark, compiled (black) vs uncompiled (red) against # of templates in benchmark",
x: { label: "# of unique html templates", grid: true },
marks: [
Plot.lineY(onlyCompiled, {
fx: "benchmark",
x: "templates",
y: "minAvg",
tip: true,
}),
Plot.lineY(unCompiled, {
fx: "benchmark",
x: "templates",
y: "minAvg",
tip: true,
stroke: "red"
})
]
})
Plot.plot({
title: "Compressed file size, compiled (black) and uncompiled (red)",
x: { label: "# of templates" },
y: { label: "File size (bytes)" },
marks: [
Plot.lineY(onlyCompiled, { x: "templates", y: "bytes", tip: true }),
Plot.lineY(unCompiled, { x: "templates", y: "bytes", tip: true, stroke: "red" })
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
