partie_2 = md`
----
## Se restreindre à une zone d'intérêt
L'intérêt principal du projet \`cartiflette\` est la mise à disposition facilitée de fonds de carte adaptés aux besoins du _data scientist_ ou du géomaticien. En premier lieu, il est aisé de récupérer directement un niveau géographique donné (ici toutes les communes du département ${departement})
`
// Source: https://observablehq.com/@mbostock/dashboard
grid_departement = width > 500
? html`<div style="
background: #fff;
margin: 0;
border: none ;
display: grid;
width: ${screen.width};
grid-template-areas:
'a d'
'e e'
'c c'
'b b';
grid-gap: 10px;
">
<div name="a" style="grid-area: a; position: relative;">${viewof departement}</div>
<div name="d" style="grid-area: d; position: relative;">${viewof arrondissement}</div>
<div name="e" style="grid-area: e; position: relative;">${viewof simplification_percent_departement}</div>
<div name="b" style="grid-area: b; position: relative;">${button_departement}</div>
<div name="c" style="grid-area: c; position: relative;">${map_departement}</div>
</div>`
: html`<div style="
background: #fff;
margin: 0;
border: none ;
display: grid;
width: ${screen.width};
grid-template-areas:
'a a'
'd d'
'c c'
'b b';
grid-gap: 10px;
">
<div name="a" style="grid-area: a; position: relative;">${viewof departement}</div>
<div name="d" style="grid-area: d; position: relative;">${viewof arrondissement}</div>
<div name="c" style="grid-area: c; position: relative;">${map_departement}</div>
<div name="b" style="grid-area: b; position: relative;">${button_departement}</div>
</div>`
viewof arrondissement = Inputs.toggle({label: "Arrondissement dans les grandes villes ?"})
md`${hint_title}`
import {download_from_cartiflette} from "@linogaliana/cartiflette-js"
download_from_cartiflette({
"value": "31",
"borders": "COMMUNE",
"vectorfileFormat": "topojson",
"year": 2022,
crs: 4326,
filter_by: "DEPARTEMENT",
source: "EXPRESS-COG-CARTO-TERRITOIRE"
})
md`
${print_program_departement_single(langage, departement, level_arrondissement, format, year)}
`
partie_3 = md`
## Récupérer plusieurs valeurs
La récupération de fonds de carte est flexible, il est tout à fait possible de récupérer plusieurs unités d'intérêt à la fois
`
// Source: https://observablehq.com/@mbostock/dashboard
grid_multiple_departement = width > 500
? html`<div style="
background: #fff;
margin: 0;
border: none ;
display: grid;
width: ${screen.width};
grid-template-areas:
'a d'
'c c'
'b b';
grid-gap: 10px;
">
<div name="a" style="grid-area: a; position: relative;">${viewof multiple_departements}</div>
<div name="d" style="grid-area: d; position: relative;">${viewof arrondissement}</div>
<div name="b" style="grid-area: b; position: relative;">${map_multiple_departement}</div>
</div>`
: html`<div style="
background: #fff;
margin: 0;
border: none ;
display: grid;
width: ${screen.width};
grid-template-areas:
'a a'
'd d'
'c c'
'b b';
grid-gap: 10px;
">
<div name="a" style="grid-area: a; position: relative;">${viewof multiple_departements}</div>
<div name="d" style="grid-area: d; position: relative;">${viewof arrondissement}</div>
<div name="c" style="grid-area: c; position: relative;">${map_multiple_departement}</div>
</div>`
viewof multiple_departements = Inputs.select(liste_departements, {label: "Sélectionner plusieurs départements", multiple: true, value: '01'})
//map_multiple_departement = map_multiple_4326(data_multiple_departement)
multiple_departements
md`${hint_title}`
python
import cartiflette.s3 as s3
shp_communes = s3.download_vectorfile_url_all(
crs = 4326,
values = [${multiple_departements.map(department => `"${department}"`).join(", ")}],
borders="COMMUNE",
vectorfile_format="${format}",
filter_by="DEPARTEMENT",
source="EXPRESS-COG-CARTO-TERRITOIRE",
year=2022)
level_arrondissement = arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE"
Quels sont les niveaux disponibles ?
La production des fonds mis à disposition de manière flexible est encore artisanale. Voici la liste des formats disponibles dans la dernière version de cartiflette
//jsonData = (await fetch(url_file_available)).json()
//viewof tt=Inputs.table(jsonData)
Annexes
Inputs
logo = ({
"python": `${fab`python`}`,
"javascript": `${fab`js`}`,
"r": `${fab`r-project`}`
})
langage = langage_requete == null ? "Python" : langage_requete
hint_title = md` Comment faire en \`${langage}\` ${logo[langage.toLowerCase()]} ?`
viewof drom_rapproches = Inputs.toggle({label: "Rapprocher les DROM ?", value: true})
viewof selectedlevel = Inputs.select(['DEPARTEMENT', 'REGION', 'BASSIN_VIE'], {label: "Zonage désiré:"})
viewof year = Inputs.select(["2022"], {label: "Année de la géographie de référence (plus d'années prochainement)"})
viewof format = Inputs.select(
["topojson", "geojson"],
{label: "Format désiré:"})
viewof simplification_percent = Inputs.range([0, 50], {step: 50, value: 50, label: "Degré de simplification (%)"})
viewof simplification_percent_departement = Inputs.bind(
Inputs.range([0, 50], {step: 50, value: 50, label: "Degré de simplification (%)"}),
viewof simplification_percent
)
Récupération des données
data_departement = get_france(selectedlevel, "topojson", year, drom_rapproches, simplification_percent)
map_france = topohelper
.from(
await data_departement
)
.project({ proj: l93 })
.view({ tooltip: true, zoom: true })
create_url_france(selectedlevel, format, year, drom_rapproches, simplification_percent)
button_france = html`
${download_button(
create_url_france(selectedlevel, format, year, drom_rapproches, simplification_percent)
)}
`
map_departement = topohelper
// direct call inside from() to avoid a deep copy
.from(
await departement_shape
)
.project({ proj: l93 })
.view({ tooltip: true, zoom: true })
departement_shape = get_departement(
departement,
arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE",
"topojson",
year,
simplification_percent_departement
)
button_departement = html`
${download_button(
create_url_departement(departement, arrondissement ? "COMMUNE_ARRONDISSEMENT" : "COMMUNE", format, year, simplification_percent_departement)
)}
`
map_multiple_departement = topohelper
// direct call inside from() to avoid a deep copy
.from(
await data_multiple_departement_combine
)
.project({ proj: l93 })
.view({ tooltip: true, zoom: true })
viewof departement = Inputs.select(liste_departements, {label: "Département à représenter"})
topojson.topology(data_multiple_departement)
import {create_projection2154, map_multiple_2154, map_multiple_4326, make_map, print_program_france, print_program_departement_single} from "@linogaliana/cartiflette-doc-utils"
data_multiple_departement_combine = to_single_geojson(data_multiple_departement)
import {
button, url_file_available,
get_france, get_departement, liste_departements,
get_multiple_departement, create_url_departement, create_url_france,
to_single_geojson} from "@linogaliana/cartiflette-js"
Styles
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>`
import {reset, view} from "@saneef/is-observable-inputs-style-able"
function download_button(url) {
return `<form method="get" action=${url}>
<button class="btn" type="submit"><i class="fa fa-download"></i> Download !</button>
</form>`
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
// Projection Lambert 93 (EPSG: 2154)
l93 = "+proj=lcc +lat_0=46.5 +lon_0=3 +lat_1=49 +lat_2=44 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs"
topohelper = import("https://cdn.jsdelivr.net/npm/topohelper@0.4.3/+esm")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.