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'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.