Public
Edited
Apr 19, 2023
Plot.plot({
color: {
legend: true
},
grid: {
y: true
},
marks: [
Plot.axisY({ label: "↑ Milliseconds" }),
Plot.axisX({ label: "Repeat times →" })
].concat(
["flatMap1", "forLoop1", "flatMap2", "forLoop2"].map((y) =>
Plot.dot(data.table, { x: "i", y: y, stroke: (d) => y })
)
)
})
data1 = data.table
data1
Type Table, then Shift-Enter. Ctrl-space for more options.
data = {
const { counties } = Geography;
function compute0() {
var tic, toc, res;
tic = new Date();
res = counties.features.flatMap(
({
geometry: { coordinates, type: geometryType },
id,
properties: { name }
}) => {
return coordinates.map((coordinates) => {
return { coordinates, name, id, geometryType };
});
}
);
toc = new Date();
return { res, t: toc - tic };
}
function compute1() {
var tic,
toc,
res = [],
coordinates,
name,
id,
geometryType;
tic = new Date();
for (let i = 0; i < counties.features.length; ++i) {
id = counties.features[i].id;
name = counties.features[i].properties.name;
geometryType = counties.features[i].geometry.type;
for (
let j = 0;
j < counties.features[i].geometry.coordinates.length;
++j
) {
coordinates = counties.features[i].geometry.coordinates[j];
res.push(Object.assign({}, { id, name, geometryType, coordinates }));
}
}
toc = new Date();
return { res, t: toc - tic };
}
// -------------------------------------------------------------
var div = document.getElementById("loop-messager");
// -------------------------------------------------------------
var i,
cost0 = 0,
cost1 = 0,
cost2 = 0,
cost3 = 0,
count = 1e3,
table = [];
console.log("-----------------------");
for (i = 1; i < count; ++i) {
div.innerHTML = `
Loop is working ${i} | ${count.toFixed(0)}
`;
var { t: t0 } = compute0(),
{ t: t1 } = compute1(),
{ t: t2 } = compute1(),
{ t: t3 } = compute0();
cost0 += t0;
cost1 += t1;
cost2 += t2;
cost3 += t3;
table.push(
Object.assign(
{},
{
i,
flatMap1: cost0 / i,
forLoop1: cost1 / i,
flatMap2: cost3 / i,
forLoop2: cost2 / i
}
)
);
if (i % 100 === 0) {
console.log(table[table.length - 1]);
}
}
console.log(table[table.length - 1]);
var { res: res0 } = compute0(),
{ res: res1 } = compute1();
return { res0, res1, table };
}
{
const { counties } = Geography;
var lst = [],
coordinates,
name,
id,
geometryType;
for (let i = 0; i < counties.features.length; ++i) {
id = counties.features[i].id;
name = counties.features[i].properties.name;
geometryType = counties.features[i].geometry.type;
for (let j = 0; j < counties.features[i].geometry.coordinates.length; ++j) {
coordinates = counties.features[i].geometry.coordinates[j];
lst.push(Object.assign({}, { id, name, geometryType, coordinates }));
}
}
return lst;
}
Geography = {
const us = await FileAttachment("us-counties-10m.json").json();
const nation = topojson.feature(us, us.objects.nation),
states = topojson.feature(us, us.objects.states),
counties = topojson.feature(us, us.objects.counties),
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b),
countrymesh = topojson.mesh(us, us.objects.counties, (a, b) => a !== b);
return { us, nation, states, counties, statemesh, countrymesh };
}
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.
