Public
Edited
Oct 20, 2023
agregation_rapide = db.query(
`SELECT MEDIAN("energy-kcal_100g") AS energy, COUNT(*) AS n, coicop FROM off WHERE "energy-kcal_100g" IS NOT NULL GROUP BY coicop`
)
Plot.plot({
marks: [
Plot.barX(agregation_rapide.filter(d => d.n > 50000), { x: "energy", y: "coicop", tip: true }),
Plot.ruleX([0])
]
})
Inputs.table(
agregation_rapide.filter(d => d.n > 50000)
)
Finding a product with barcode
ean = "5000112602999"
`SELECT product_name from off WHERE code = ${ean}`
Inputs.table(
db.query(`SELECT product_name from off WHERE code = ${ean}`)
)
Finding a product from name
url = "https://minio.lab.sspcloud.fr/projet-funathon/2023/sujet4/diffusion/openfood.parquet"
product_name = "Cristaline bouteille"
//db.query(`SELECT product_name from off WHERE jaro_winkler_similarity('${product_name}',product_name) > 0.9 AND "energy-kcal_100g" IS NOT NULL`)
db = {
const configuredClient = await DuckDBClient.of({}) ;
await configuredClient.query(
`
CREATE OR REPLACE VIEW off AS
SELECT * FROM read_parquet('${url}')
`
)
return configuredClient ;
}
Inputs.table(
db.query(`SELECT * FROM off LIMIT 10`)
)
import { style as faStyle, fa, fab, fas } from "@airbornemint/fontawesome"
faStyle({regular: true, solid: true, brands: true})
tachyons = {
const src = "https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css";
const n = html`<link rel=stylesheet href="${src}">`;
const api = {
attach: () => document.querySelector("head").prepend(n),
detach: () => n.parentNode && n.parentNode.removeChild(n)
};
api.attach();
invalidation.then(api.detach);
return api;
}
ns = Inputs.text().classList[0]
html`<style>
:root {
/* 1️⃣ CSS properties used in @observablehq/Inputs
* This only support the CSS proporties used in each Inputs
*/
--sans-serif: "Roboto Mono", sans-serif;
}
/* 2️⃣ Style using custom namespaced classname */
.theme-adb input {
accent-color: rebeccapurple;
}
.theme-adb form {
width: auto;
}
.theme-adb form > label {
font-weight: bold;
}
/* 3️⃣ Style using Inputs' namespaced classname
* This approach you can pretty much override anything.
*/
.${ns}{
margin-bottom: 1em;
}
.${ns} div label {
background-color: #f4f4f4;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
}
.${ns} div label:hover,
.${ns} div label:active,
.${ns} div label:focus {
background-color: #cdecff;
}
</style>`
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.
