I love building things that make people's life easier
Public
Edited
Oct 18, 2023
viewof table = Inputs.table(cars)
{
const columns = ["comb", "result"];
let data = {
comb1: [
{ queryId: 1, duckDBTime: 20, arqueroTime: 15 },
{ queryId: 2, duckDBTime: 26, arqueroTime: 15 },
{ queryId: 3, duckDBTime: 30, arqueroTime: 15 }
],
comb2: [
{ queryId: 4, duckDBTime: 20, arqueroTime: 15 },
{ queryId: 5, duckDBTime: 26, arqueroTime: 15 },
{ queryId: 6, duckDBTime: 30, arqueroTime: 15 }
]
};
let table = `<table>
<th>
<td>
${columns.join("</td><td>")}
</td>
</th>`;
const drawPlot = async (arr) => {
let plot = await vl
.markLine()
.data(arr)
.encode(vl.x().fieldO("queryId"), vl.y().average("cylinders"))
.render({ renderer: "svg" });
return plot.innerHTML;
};
for (let [comb, results] of Object.entries(data)) {
const values = {
comb,
result: await drawPlot(comb, results)
};
table += `<tr>
<td>
${columns.map((d) => values[d]).join("</td><td>")}
</td>
</tr>`;
}
table += "</table>";
return html`${table}`;
}
{
let queries = [
];
function displayChart(comb) {
let chart1 = vl
.markLine()
.encode(
vl.x().fieldO("queryId"),
vl.y().fieldQ("time"),
vl.color().fieldN("library"),
vl.row().fieldN("comb")
);
// .data(data.filter((d) => d["comb"] == comb));
}
return;
}
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.
