frontend + d3
// the target url can be changed for a better comparison
getUrl = i => `https://jsonplaceholder.typicode.com/posts/${i}`
tooltip = d3
.select("body")
.append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
chart.update(result)
config = ({
height: 300,
marginX: 50,
marginY: 50
})
formatMs = x => `${x.toFixed(0)}ms`
mutable result = ({ normalEntries: [], workerEntries: [] })
sortResult = () => {
const normalEntries = d3.sort(result.normalEntries);
const workerEntries = d3.sort(result.workerEntries);
mutable result = { normalEntries, workerEntries };
}
makeBatchUrl = () => {
return d3
.range(sampling)
.map((_, i) => d3.range(sampleTry).map((_, i) => getUrl(i + 1)));
}
async function startWork() {
mutable jobFinished = false;
mutable jobStarted = true;
let normalEntries = [];
let workerEntries = [];
mutable result = { normalEntries, workerEntries };
console.log('started downloading!');
const batchUrls = makeBatchUrl();
normalEntries = [
...result.normalEntries,
...(await Promise.all(batchUrls.map(fetchNormal)))
];
mutable result = { normalEntries, workerEntries };
const _batchUrls = makeBatchUrl();
const worker = new Worker(workerScript);
workerEntries = [
...result.workerEntries,
...(await Promise.all(_batchUrls.map(urls => fetchWorker(worker, urls))))
];
worker.terminate();
console.log('started worker downloading!');
mutable result = { normalEntries, workerEntries };
mutable jobFinished = true;
}
function asleep(_time = 300) {
return new Promise((resolve, reject) => {
setTimeout(resolve, _time);
});
}
async function fetchNormal(urls) {
const startTime = performance.now();
const normalFetches = urls.map(normalFetcher);
await Promise.all(normalFetches);
const endTime = performance.now();
await asleep(500);
return endTime - startTime;
}
async function fetchWorker(worker, urls) {
const startTime = performance.now();
const workerFetches = urls.map(url => workerFetcher(worker, url));
await Promise.all(workerFetches);
const endTime = performance.now();
await asleep(500);
return endTime - startTime;
}
mutable jobStarted = false
mutable jobFinished = false
normalFetcher = async url => {
const req = await fetch(url);
const json = await req.json();
return json;
}
workerFetcher = (worker, url) => {
return new Promise((resolve, reject) => {
worker.addEventListener('message', ({ data }) => {
resolve(data);
});
worker.postMessage(url);
});
}
workerScript = makeWorkerScript(`
onmessage = async function({data}) {
const req = await fetch(data);
const json = await req.json();
postMessage(json);
}
`)
makeWorkerScript = _script => {
const blob = new Blob([_script], { type: 'text/javascript' });
const script = URL.createObjectURL(blob);
invalidation.then(() => URL.revokeObjectURL(script));
return script;
}
d3 = require('d3@v6.5.0')
import { setCoords, setSize, trans2d } from '@rabelais/tree-utils'
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.
