2b:null 2c:["$","title",null,{"children":"SECTION 1 : Assos avec Immi dans titre et objet | fred | Observable"}] 31:T420,Quand nous avons rencontré l'équipe de Causimmi, nous avons évoqué l'idée de pouvoir sélectionner les associations créées dans une fenêtre temporelle précise. C'est ce que permet la fonction de "Slider". Dans cette section, une succession de filtres permet d'explorer les données associatives. D'abord, comme dans la section précédente, il est possible d'effectuer une recherche lexicale en tapant des mots à l'intérieur de la barre de recherche. Ensuite, les résultats de cette recherche lexiale sont présentés sous la forme d'un graphique en barre qui représente la répartition des associations en fonction de leur date de création. Ce graphique est interactif et il est possible de sélectionner une partie des barres seulement. Enfin, la carte qui suit n'affiche que les associations filtrées par la recherche lexicale et par la sélection graphique. La sélection apparaît également sous la forme d'un tableau, qu'il est possible de télécharger au format csv en cliquant sur les "..." en haut à gauche du tableau. 32:T585,function* createMap() { const container = html`

`; yield container; const map = L.map(container).setView([40.7299, -73.9923], 13); L.tileLayer( "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", { attribution: '© OpenStreetMap contributors © CARTO', subdomains: "abcd", ext: "png" } ).addTo(map); // case de recherche dans la carte (geocoder) geocoder, L.Control.geocoder({ defaultMarkGeocode: false }) .on("markgeocode", function (e) { var bbox = e.geocode.bbox; var poly = L.polygon([ bbox.getSouthEast(), bbox.getNorthEast(), bbox.getNorthWest(), bbox.getSouthWest() ]); map.fitBounds(poly.getBounds()); }) .addTo(map); const markers = (map.markers = markerCluster({}).addTo(map)); let layer; container.update = (geojson) => { const first = !layer; if (!first) markers.removeLayer(layer); layer = L.geoJson(geojson, { weight: 1, color: "#432", onEachFeature: (feature, layer) => layer.bindPopup(popup(feature), { maxHeight: 300 }) }); markers.addLayer(layer); if (first) map.fitBounds(layer.getBounds()); }; yield container; }33:[{"id":"cf9fdbfcfab185227788bf52c9e5648455f8f9d70a69787b8f6fec482ece8235a647cc52440b67c5cb9c7d1cc83fabeb4c0c77093a370e893846c3423925a9c1","href":"https://static.observableusercontent.com/files/cf9fdbfcfab185227788bf52c9e5648455f8f9d70a69787b8f6fec482ece8235a647cc52440b67c5cb9c7d1cc83fabeb4c0c77093a370e893846c3423925a9c1","name":"iw_voyageur_virgule_5.csv","type":"text/csv","lastModified":1707766951299.117,"size":699203}] 2f:{"id":"a1f69cc40c84ec72","slug":null,"title":"SECTION 1 : Assos avec Immi dans titre et objet","thumbnail":"c31d34e14a3db0269b70ae17ab77689d6d29bda66532be11e9acce3664825337","access_level":"public","create_time":"$D2024-02-12T19:16:47.517Z","update_time":"$D2024-02-12T20:12:04.613Z","view_time":null,"first_public_time":"$D2024-02-12T19:16:47.517Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c9ea91b9ce9dc236","login":"freds","name":"fred","avatar_url":"https://avatars-next.observableusercontent.com/df19b857f28685ea519185beda30f427c768128f97277305081843ba5c9ec700","tier":"starter_2024"},"version":402,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d62687f00d8e8511","login":"freds","name":"fred","avatar_url":"https://avatars-next.observableusercontent.com/df19b857f28685ea519185beda30f427c768128f97277305081843ba5c9ec700","tier":null}],"members":[{"type":"individual","id":"d62687f00d8e8511","login":"freds","name":"fred","avatar_url":"https://avatars-next.observableusercontent.com/df19b857f28685ea519185beda30f427c768128f97277305081843ba5c9ec700","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SECTION 1 : Assos avec Immi dans titre et objet","cells":[{"id":0,"value":"# SECTION 1 : Assos avec Immi dans titre et objet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"texte1","database":"$undefined"},{"id":9,"value":"## Représentation sur une carte \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"texteintro","database":"$undefined"},{"id":41,"value":"carte_asso_testGeocoded = FileAttachment(\"iw_voyageur_virgule_5.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"Dans la carte qui suit figurent environ 4300 associations extraites du Répertoire National des Associations (RNA, voir les sections \"Origine des données\" et \"Création de la base de données\" pour le détail de la méthodologie), qui contiennent leur objet social ou leur titre la chaîne de caractère \"immi\".\n\nDans la barre de recherche suivante, vous pouvez taper des mots-clés, et cela filtrera les résultats obtenus sur la carte pour ne garder que les observations qui contiennent le mot-clé recherché. \n\nLe résultat de la requête apparaît aussi sous forme de tableau au-dessous de la carte.\n\nEn cliquant sur le bouton en forme de loupe en haut à droite de la carte, vous pouvez rechercher le nom d'une ville et la carte zoomera sur cette ville","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"viewof selection = Search(carte_asso_testGeocoded, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"map1 = createMap()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"updateMap = {\n map1.update({\n type: \"FeatureCollection\",\n features: selection.map((d) => ({\n type: \"Point\",\n coordinates: [d.longitude, d.latitude],\n properties: d\n }))\n });\n\n return md`—`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"tableau = Inputs.table(selection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"Dans le graphique ci-dessous je représente chaque association par un point. En survolant les points on voit la date de création de ces associations et une partie de leur nom. L'idée était ensuite de superposer sur ces points un moyen de les sélectionner (un slider), mais finalement j'ai trouvéu un autre moyen, qui passe par un graphique en barre et non pas en point. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"Plot.plot({\n x : {type : \"utc\"}, // cela enlève les points pour lesquels on a pas de date\n width,\n height : 900,\n marks: [\n Plot.dot(\n selection,\n Plot.dodgeY({ x: \"annee_creation\",\n tip: {format : {x: null, Nom : true, date_création : true}}, \n channels: {Nom : \"titre\", date_création : \"date_creat\"} , \n r : 2 , \n fill :\"black\"})\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"# SECTION 2 : Sélectionner les associations avec des mots-clés, des bornes chronologiques, et une carte ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"viewof selection2 = Search(carte_asso_testGeocoded, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"Le graphique ci-dessous représente le nombre d'associations dans le jeu de données par date de création\nCliquez sur le graphique avec les dates pour sélectionner les dates qui vous intéressent, cela met à jour la carte en dessous","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"Borne inférieure de la sélection : ${d.range[0].toFixed(1)}\n\nBorne supérieure de la sélection : ${d.range[1].toFixed(1)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"viewof d = rangeSlider(selection2.filter( (d) => d.annee_creation > 1),d=>d.annee_creation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"donnees_slider = d.data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"map2 = createMap()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"Inputs.table(donnees_slider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"updateMap2 = {\n map2.update({\n type: \"FeatureCollection\",\n features: donnees_slider.map((d) => ({\n type: \"Point\",\n coordinates: [d.longitude, d.latitude],\n properties: d\n }))\n });\n\n return md`—`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"## Retours, améliorations et contact\n\nNous sommes intéressé·es de savoir comment vous utilisez cette carte, s'il y a des explications ou des options qui manquent pour vous aider à mieux l'utiliser.\n\nSi donc vous voulez nous écrire, vous pouvez le faire à contact@datasile.org ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"texte10","database":"$undefined"},{"id":49,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function popup(feature) {\n const {\n titre,\n objet,\n description, // sursaut\n adresse_recodee,\n adrs_codepostal,\n libcom,\n annee_creation,\n position,\n contact,\n site\n } = feature.properties;\n return `${titre}\n

${objet ? `Objet social : ${objet}` : `Description : ${description}`}

\n
${adresse_recodee ??\"\"} \n
${\n adrs_codepostal < 10000 ? `0${adrs_codepostal}` : (adrs_codepostal ?? \"\")\n } ${libcom ?? \"\"}\n
${annee_creation ? `Création: ${annee_creation}`: \"\"}\n
${contact ? `Contact: ${contact}`: \"\"}\n
${site ? `Site: ${site}`: \"\"}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"geocoder = (L, require(\"leaflet-control-geocoder/dist/Control.Geocoder.js\").catch(() => L.Control.Geocoder))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"geocoderCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"markerCluster = L, require('leaflet.markercluster@1.4.1').then(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"markerClusterCSS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"import {Search} from \"@fil/search-normalize\" // pour la recherche avec accents, cf. https://observablehq.com/@fil/search-normalize","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"import {rangeSlider} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"