Public
Edited
Nov 27, 2023
1 star
Insert cell
Insert cell
reportdb = DuckDBClient.of({
report: FileAttachment("report.parquet")
})
Insert cell
Inputs.table(query, {
format: {
"lorem ipsum": sparkbar(d3.max(query, (d) => d["lorem ipsum"]))
}
})
Insert cell
query = reportdb.sql`
SELECT
nome_provincia Provincia,
COUNT(*) AS "Numero Progetti",
ROUND(SUM(finanziamento_pnrr_loc)) AS "lorem ipsum"
FROM
report
WHERE
nome_provincia IS NOT NULL
GROUP BY
ALL
ORDER BY Provincia;
`
Insert cell
function sparkbar(max) {
return (x) => htl.html`<div style="
background: lightblue;
width: ${(100 * x) / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
overflow: visible;
display: flex;
justify-content: end;">${x.toLocaleString("en")}`;
}
Insert cell
Inputs.table(
reportdb.sql`
SELECT DISTINCT cup AS CUP,
finanziamento_pnrr AS "Valore PNRR (€)",
sintesi_progetto AS "Descrizione",
cup_codice_natura
FROM report
ORDER BY finanziamento_pnrr DESC
LIMIT 5;
`,
{
locale: "it-IT",
height: "100%",
width: {
CUP: "15%",
"Valore PNRR (€)": "15%",
Descrizione: "50%",
cup_codice_natura: "20%"
},
format: {
CUP: (CUP, i, data) => {
return data[i].cup_codice_natura === "03"
? htl.html`<a href="http://miosito.it/${CUP}" target="_blank">${CUP}</a>`
: CUP;
},
Descrizione: (d) => htl.html`<span style="white-space:normal">${d}`
}
}
)
Insert cell

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.
Learn more