28:null 29:["$","title",null,{"children":"Migrations internes FR (24020) | Marc Thevenin | Observable"}] 2e:Td6c,plot1 = Plot.plot({ marks: [ Plot.text(["Avant migration"], {x:40, y:-20, textAnchor: "end", className: "lab"}), //730 Plot.text(["Après migration"], {x: width -40, y:-20, textAnchor: "start", className: "lab"}), filterLink.map((link) => Plot.areaY(link, { x: "x", y1: "y0", y2: "y1", curve: "bump-x", fill: d=> d.name==="Urbain" ? pal100[0] : d.name==="Petites\npolarités" ? pal100[2] : d.name==="Ruralités\nproductives" ? pal100[3] : d.name==="Ruralités\nrésidentielles" ? pal100[4] : d.name==="Ruralités\ntouristiques" ? pal100[5] : "white" , fillOpacity: .5, order: "value", className: "hover", stroke: "black", strokeWidth:.5, tip: false }) ), Plot.rect(sankeyData.nodes, { x1: "x0", x2: "x1", y1: "y0", y2: "y1", fill: "name", className: "hover", stroke: "black", strokeWidth:.5, channels : { target: {value: "name", label: ""}, n: {value: "value", label: ""}, }, tip: false }), Plot.dot(sankeyData.nodes, { filter: d=> d.filt===1, x: "x0", dx: 0, y: (d) => (d.y1 + d.y0) / 2, z: "name", textAnchor: "start", stroke: "transparent", channels : { //zone: {value: d=> d.zone0, label: ""}, n: {value: d=> d.n, label: ""}, n0: {value: d=> d.n0, label: "Urbain :"}, n1: {value: d=> d.n1, label: "Petites polarités :"}, n2: {value: d=> d.n2, label: "Ruralités productives :"}, n3: {value: d=> d.n3, label: "Ruralités résidentielles :"}, n4: {value: d=> d.n4, label: "Ruralités touristiques :"}, }, tip: {format:{y: false, x: false, zone: true}, anchor:"bottom-left"} }), Plot.dot(sankeyData.nodes, { filter: d=> d.filt===2, x: "x1", dx: 0, y: (d) => (d.y1 + d.y0) / 2, z: "name", textAnchor: "start", stroke:"transparent", channels : { n: {value: d=> d.n, label: ""}, n0: {value: d=> d.n0, label: "Urbain :"}, n1: {value: d=> d.n1, label: "Petites polarités :"}, n2: {value: d=> d.n2, label: "Ruralités productives :"}, n3: {value: d=> d.n3, label: "Ruralités résidentielles :"}, n4: {value: d=> d.n4, label: "Ruralités touristiques :"}, }, tip: {format:{x: false, y: false}, anchor:"bottom-right"} }), Plot.text(sankeyData.nodes, { filter: d=> d.filt===1, x: d=> d.x0 -20, dx: 5, y: (d) => (d.y1 + d.y0) / 2, text: "name", textAnchor: "end", }), Plot.text(sankeyData.nodes, { filter: d=> d.filt===2, x: "x1", dx: 5, y: (d) => (d.y1 + d.y0) / 2, text: "name", textAnchor: "start", }), ], x: { axis: false, grid: false }, y: { axis: false, reverse: true, domain: [0,700], grid: false }, width, height: width>1000 ? .65*width : width>500 ? 500 : 450, marginTop: width> 900 ? 60 : 30, marginRight: width>900 ? 250 : width>700 ? 200 : 85, marginBottom: 10, marginLeft: width>1000 ? 250 : width>700 ? 200 : width>500 ? 150 : 75, color: {domain: domain, range: range}, }) 2f:T107b,boxPlotGraph1 = htl.html `

${viewof select} ${viewof checkbox}

${plot1}

💡La répartion des flux migratoires s'affiche au passage de la souris au niveau du type de territoire.

Champ: France hexagonale et Corse.

Source: Insee, recensement de la population 2022, exploitation complémentaire.

`30:T11bd,sankeyData = ({ // Data nodes: [ // allant vers : { node: 0, name: "Urbain", filt:1, zone0: "Urbain", n:"2 783 279 individus partant vers:", n0: "75%", n1: "8%", n2: "3%", n3:"11%", n4:"3%"}, { node: 1, name: "Petites\npolarités", filt:1, zone0: "Petites polarités", n: "435 782 individus partant vers:", n0: "42%", n1: "23%", n2: "14%", n3:"17%", n4: "4%" }, { node: 2, name: "Ruralités\nproductives", filt:1, zone0: "Ruralités productives", n: "230 383 individus partant vers:", n0: "35%", n1: "27%", n2:"20%",n3:"13%",n4:"5%"}, { node: 3, name: "Ruralités\nrésidentielles", filt:1, zone0: "Ruralités résidentielles", n:"474 409 individus partant vers:", n0: "48%", n1:"17%", n2: "8%", n3:"24%", n4:"3%"}, { node: 4, name: "Ruralités\ntouristiques", filt:1, zone0: "Ruralités touristiques" , n:"127 983 individus partant vers:", n0:"44%", n1:"15%", n2:"10%", n3:"11%", n4:"20%"}, //arrivés de: { node: 5, name: "Urbain", filt:2, n: "2 639 522 individus arrivés de: ", n0:"79%", n1:"7%", n2:"3%", n3: "9%", n4: "2%" }, { node: 6, name: "Petites\npolarités", filt:2, n:"486 905 individus arrivés de:", n0:"46%", n1:"21%",n2:"13%",n3:"16%",n4:"4%"}, { node: 7, name: "Ruralités\nproductives", filt:2, n: "250 524 individus arrivés de:", n0:"38%",n1:"24%",n2:"19%",n3:"14%",n4:"5%" }, { node: 8, name: "Ruralités\nrésidentielles", filt:2, n:"526 903 individus arrivés de:", n0:"56%",n1:"14%",n2:"6%",n3:"22%",n4:"3%" }, { node: 9, name: "Ruralités\ntouristiques", filt:2, n: "147 981 individus arrivés de:", n0: "51%", n1:"12%", n2:"8%",n3:"11%", n4:"17%" }, ], links: [ { source: 0, target: 5, value: 2090518, name:"Urbain", name2: "Urbain", col1: 0, col2:0, }, { source: 0, target: 6, value: 224617, name:"Urbain", name2: "Petites\npolarités", col1: 0, col2: 2, }, { source: 0, target: 7, value: 95273, name:"Urbain", name2: "Ruralités\nproductives", col1: 0, col2: 4, }, { source: 0, target: 8, value: 297093, name:"Urbain", name2: "Ruralités\nrésidentielles", col1: 0, col2: 3, }, { source: 0, target: 9, value: 75779, name:"Urbain", name2: "Ruralités\ntouristiques", col1: 0, col2: 5, }, { source: 1, target: 5, value: 183722, name:"Petites\npolarités", name2: "Urbain" }, { source: 1, target: 6, value: 102014, name:"Petites\npolarités", name2: "Petites\npolarités" }, { source: 1, target: 7, value: 59596, name:"Petites\npolarités", name2: "Ruralités\nproductives"}, { source: 1, target: 8, value: 72006, name:"Petites\npolarités", name2: "Ruralités\nrésidentielles" }, { source: 1, target: 9, value: 18444, name:"Petites\npolarités", name2: "Ruralités\ntouristiques"}, { source: 2, target: 5, value: 79523, name:"Ruralités\nproductives", name2: "Urbain", }, { source: 2, target: 6, value: 62348, name:"Ruralités\nproductives", name2: "Petites\npolarités", }, { source: 2, target: 7, value: 46422, name:"Ruralités\nproductives", name2: "Ruralités\nproductives", }, { source: 2, target: 8, value: 30067, name:"Ruralités\nproductives", name2: "Ruralités\nrésidentielles", }, { source: 2, target: 9, value: 12023, name:"Ruralités\nproductives", name2: "Ruralités\ntouristiques", }, { source: 3, target: 5, value: 229209, name: "Ruralités\nrésidentielles", name2: "Urbain", }, { source: 3, target: 6, value: 79291, name: "Ruralités\nrésidentielles", name2: "Petites\npolarités", }, { source: 3, target: 7, value: 35931, name: "Ruralités\nrésidentielles", name2: "Ruralités\nproductives", }, { source: 3, target: 8, value: 113585, name: "Ruralités\nrésidentielles", name2: "Ruralités\nrésidentielles", }, { source: 3, target: 9, value: 16393, name: "Ruralités\nrésidentielles", name2: "Ruralités\ntouristiques", }, { source: 4, target: 5, value: 56551, name: "Ruralités\ntouristiques", name2: "Urbain", }, { source: 4, target: 6, value: 18635, name: "Ruralités\ntouristiques", name2: "Petites\npolarités"}, { source: 4, target: 7, value: 13302, name: "Ruralités\ntouristiques", name2: "Ruralités\nproductives"}, { source: 4, target: 8, value: 14153, name: "Ruralités\ntouristiques", name2: "Ruralités\nrésidentielles" }, { source: 4, target: 9, value: 25342, name: "Ruralités\ntouristiques", name2: "Ruralités\ntouristiques"}, ] })31:T6ba,filterLegend = ( domain, range, subdomain = null ) => { const defaultChecked = subdomain === null ? domain : subdomain; const value = new Map( domain.map(d => [d, defaultChecked.includes(d)]) ); const _set = () => set( node, [...value].filter(d => d[1]).map(d => d[0]) ); const oninput = e => { value.set(e.target.id, e.target.checked); _set(); }; const selectAll = () => { domain.forEach(d => value.set(d, true)); node.querySelectorAll("input[type=checkbox]") .forEach(cb => cb.checked = true); _set(); }; const selectNone = () => { domain.forEach(d => value.set(d, false)); node.querySelectorAll("input[type=checkbox]") .forEach(cb => cb.checked = false); _set(); }; const node = htl.html`

${domain.map((d, i) => htl.html`

${d}

`)}

`; _set(); return node; }; 32:Tf82,33:T12fe,// sankeyData = ({ // // Data // nodes: [ // // allant vers : // { node: 0, name: "Urbain", filt:1, zone0: "Urbain", n:"2 783 279 individus partant vers:", n0: "2 090 518 (75%)", n1: "224 617 (8%)", n2: "95 273 (3%)", n3:"297 093 (11%)", n4:"75 779 (3%)"}, // { node: 1, name: "Petites\npolarités", filt:1, zone0: "Petites polarités", n: "435 782 individus partant vers:", n0: "183 722 (42%)", n1: "102 014 (23%)", n2: "59596 (14%)", n3:"72 006 (17%)", n4: "18 444 (4%)" }, // { node: 2, name: "Ruralités\nproductives", filt:1, zone0: "Ruralités productives", n: "230 383 individus partant vers:", n0: "35%", n1: "27%", n2:"20%",n3:"13%",n4:"5%"}, // { node: 3, name: "Ruralités\nrésidentielles", filt:1, zone0: "Ruralités résidentielles", n:"474 409 individus partant vers:", n0: "229 209 (48%)", n1:"79 209 (17%)", n2: "35 931 (8%)", n3:"113 585 (24%)", n4:"16 393 (3%)"}, // { node: 4, name: "Ruralités\ntouristiques", filt:1, zone0: "Ruralités touristiques" , n:"127 983 individus partant vers:", n0:"44%", n1:"15%",n2:"10%",n3:"11%",n4:"20%"}, // //arrivés de: // { node: 5, name: "Urbain", filt:2, n: "2 639 522 individus arrivés de: ", n0:"2 090 518 (79%)", n1:"183 721 (7%)", n2:"79 523 (3%)", n3: "229 209 (9%)", n4: "75 779 (2%)" }, // { node: 6, name: "Petites\npolarités", filt:2, n:"486 905 individus arrivés de:", n0:"46%", n1:"21%",n2:"13%",n3:"16%",n4:"4%"}, // { node: 7, name: "Ruralités\nproductives", filt:2, n: "250 524 individus arrivés de:", n0:"38%",n1:"24%",n2:"19%",n3:"14%",n4:"5%" }, // { node: 8, name: "Ruralités\nrésidentielles", filt:2, n:"526 903 individus arrivés de:", n0:"56%",n1:"14%",n2:"6%",n3:"22%",n4:"3%" }, // { node: 9, name: "Ruralités\ntouristiques", filt:2, n: "147 981 individus arrivés de:", n0: "51%", n1:"12%", n2:"8%",n3:"11%", n4:"17%" }, // ], // links: [ // { source: 0, target: 5, value: 2090518, name:"Urbain", name2: "Urbain", col1: 0, col2:0, }, // { source: 0, target: 6, value: 224617, name:"Urbain", name2: "Petites\npolarités", col1: 0, col2: 2, }, // { source: 0, target: 7, value: 95273, name:"Urbain", name2: "Ruralités\nproductives", col1: 0, col2: 4, }, // { source: 0, target: 8, value: 297093, name:"Urbain", name2: "Ruralités\nrésidentielles", col1: 0, col2: 3, }, // { source: 0, target: 9, value: 75779, name:"Urbain", name2: "Ruralités\ntouristiques", col1: 0, col2: 5, }, // { source: 1, target: 5, value: 183722, name:"Petites\npolarités", name2: "Urbain" }, // { source: 1, target: 6, value: 102014, name:"Petites\npolarités", name2: "Petites\npolarités" }, // { source: 1, target: 7, value: 59596, name:"Petites\npolarités", name2: "Ruralités\nproductives"}, // { source: 1, target: 8, value: 72006, name:"Petites\npolarités", name2: "Ruralités\nrésidentielles" }, // { source: 1, target: 9, value: 18444, name:"Petites\npolarités", name2: "Ruralités\ntouristiques"}, // { source: 2, target: 5, value: 79523, name:"Ruralités\nproductives", name2: "Urbain", }, // { source: 2, target: 6, value: 62348, name:"Ruralités\nproductives", name2: "Petites\npolarités", }, // { source: 2, target: 7, value: 46422, name:"Ruralités\nproductives", name2: "Ruralités\nproductives", }, // { source: 2, target: 8, value: 30067, name:"Ruralités\nproductives", name2: "Ruralités\nrésidentielles", }, // { source: 2, target: 9, value: 12023, name:"Ruralités\nproductives", name2: "Ruralités\ntouristiques", }, // { source: 3, target: 5, value: 229209, name: "Ruralités\nrésidentielles", name2: "Urbain", }, // { source: 3, target: 6, value: 79291, name: "Ruralités\nrésidentielles", name2: "Petites\npolarités", }, // { source: 3, target: 7, value: 35931, name: "Ruralités\nrésidentielles", name2: "Ruralités\nproductives", }, // { source: 3, target: 8, value: 113585, name: "Ruralités\nrésidentielles", name2: "Ruralités\nrésidentielles", }, // { source: 3, target: 9, value: 16393, name: "Ruralités\nrésidentielles", name2: "Ruralités\ntouristiques", }, // { source: 4, target: 5, value: 56551, name: "Ruralités\ntouristiques", name2: "Urbain", }, // { source: 4, target: 6, value: 18635, name: "Ruralités\ntouristiques", name2: "Petites\npolarités"}, // { source: 4, target: 7, value: 13302, name: "Ruralités\ntouristiques", name2: "Ruralités\nproductives"}, // { source: 4, target: 8, value: 14153, name: "Ruralités\ntouristiques", name2: "Ruralités\nrésidentielles" }, // { source: 4, target: 9, value: 25342, name: "Ruralités\ntouristiques", name2: "Ruralités\ntouristiques"}, // ] // })34:[] 2c:{"id":"e2228f09da681485","slug":null,"title":"Migrations internes FR (24020)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-01-12T09:00:07.999Z","update_time":"$D2026-08-01T19:00:32.452Z","view_time":null,"first_public_time":"$D2026-01-12T10:24:40.526Z","has_unpublished_edits":null,"fork":{"id":"f8c3026ca4610f8d","slug":"making-a-treemap-and-sankey-diagram-with-observable-plot","title":"Making a Treemap and Sankey diagram with Observable Plot","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026"},"version":1308,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026","role":"editor"},{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c6cf7959ce539901","slug":"2025","title":"2025","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"Migrations internes FR (24020)","cells":[{"id":0,"value":"# Migrations internes FR (24020)\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#4f4f4f\", //gray\n \"#ff362d\", //red dark\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"#### Titre du graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"title","database":"$undefined"},{"id":826,"value":"viewof checkbox = filterLegend( [\"Urbain\",\"Petites\\npolarités\",\"Ruralités\\nproductives\",\"Ruralités\\nrésidentielles\",\"Ruralités\\ntouristiques\" ], range, [\"Urbain\",\"Ruralités\\ntouristiques\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"//viewof select = Inputs.select([\"Flux vers\", \"Flux depuis\"], {label: \"Sens du flux :\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"viewof select = Inputs.radio([\"Flux vers\", \"Flux depuis\"], {label: \"\", value: \"Flux vers\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"links = {\n sankeyModule\n .sankey()\n .nodeWidth(20)\n .nodePadding(100 / sankeyData.nodes.length)\n .size([width, height])(sankeyData);\n\n return sankeyData.links.map((l) => [\n { x: l.source.x1, y0: l.y0 + l.width / 2, y1: l.y0 - l.width / 2, name: l.name, name2: l.name2, col1: l.col1, col2: l.col2},\n { x: l.target.x0, y0: l.y1 + l.width / 2, y1: l.y1 - l.width / 2, name: l.name, name2: l.name2, col1: l.col1, col2: l.col2},\n\n ]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"filterLink = links.filter(a=> a.some(d=> checkbox.includes(select===\"Flux vers\" ? d.name : d.name2)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"sankeyModule = require(\"d3-sankey@0.12.3/dist/d3-sankey.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"domain = [\"Urbain\",\"Petites\\npolarités\",\"Ruralités\\nproductives\",\"Ruralités\\nrésidentielles\",\"Ruralités\\ntouristiques\" ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"range = [pal100[0],pal100[2],pal100[3], pal100[4],pal100[5]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"$32","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"css1","database":"$undefined"},{"id":1118,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 2d:"$2c:body"