Public
Edited
Aug 7, 2023
Importers
//grid_two_dataframes = await html`<div style="
// background: #fff;
// margin: 0;
// border: none ;
// display: grid;
// width: ${screen.width};
// grid-template-areas:
// 'a b'
// 'c c'
// ;
// grid-gap: 10px;
// ">
// <div name="a" style="grid-area: a; position: relative;">${viewof nom_commune}</div>
// <div name="b" style="grid-area: b; position: relative;">${update}</div>
// <div name="c" style="grid-area: c; position: relative;">${list_selected}</div>
// </div>`
viewof nom_commune = Inputs.text({
label: "Choix de la commune",
placeholder: "Entrer le nom d'une commune",
datalist: codes_communes.map(d => d.LIBELLE),
submit: true
//value: "Toulouse"
})
//borrowed from https://observablehq.com/@danyx/lists-of-items-with-add-delete-buttons#
// Here we show a message that the list is empty or otherwise
// return a ul tag with one nested li tag for each item
// Each item gets an a tag with an onclick handler that
// triggers setting items to a copy of items with the item at its index
// filtered out.
list_selected = { if (items.length === 0) {
return html`<p>There are no items in the list</p>`
}
else {
return html`<ul>${items.map(
(gain, index) => html`
<li>
<a class="buttons-cities button" href="#" onclick=${(d) =>
(mutable items = items.filter(
(item, filterindex) => filterindex != index
))}>
${gain} <span class="button-icon">🗑</span>
</a>
</li>
`
)}</ul>
`
}
}
html`
<style type="text/css">
.button {
display: inline-block;
padding: 8px 16px;
text-align: center;
text-decoration: none;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-icon {
margin-left: 5px;
}
</style>
`
{
mutable items = unique([...mutable items, nom_commune])
return items
}
// The button has an onclick handler that mutates the target. Since
// in this case the target is an array we make a copy, add the current newItemInput
// value and set the items array to the new value
update = {
const button = html`<button class="blueButton">Add item to list</button>`;
button.onclick = () => {
let newItems = [...mutable items, nom_commune];
mutable items = unique(newItems);
};
return button;
}
// The mutable items array. This is what you would use for further calculations
mutable items = [""]
//viewof liste_villes_select = Inputs.checkbox(
// x.filter(d => d != ""), {label: "Villes sélectionnées"}
//)
function removeElement(arr, value) {
const index = arr.indexOf(value);
if (index !== -1) {
arr.splice(index, 1);
}
}
function unique(data, accessor) {
return Array.from(new Set(accessor ? data.map(accessor) : data));
}
x = unique(
push_mutable(d)
)
d = []
function push_mutable(d){
d.push(nom_commune);
return d ;
}
codes_communes
Type Table, then Shift-Enter. Ctrl-space for more options.
codes_communes = await db.query(`SELECT COM, LIBELLE from cog`)
Inputs.table(
db.query(`SELECT * FROM cog`)
)
url_cog = "s3://projet-cartiflette/diffusion/shapefiles-test1/year=2022/administrative_level=COMMUNE/crs=None/france_entiere=raw/vectorfile_format=parquet/provider=INSEE/source=COG/raw.parquet"
configuredClient = {
const client = await DuckDBClient.of();
await client.sql`
SET s3_endpoint='minio.lab.sspcloud.fr'
`;
return client;
}
db = {
await configuredClient.query(`
CREATE VIEW cog AS
SELECT * FROM read_parquet('${url_cog}') ;
`);
return configuredClient
}
import {html} from "@observablehq/htl"
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.
