2c:null 2d:["$","title",null,{"children":"Analyse de l'impact du Télétravail sur les déplacements | MattClou's Workspace | Observable"}] 32:T913,Plot.plot({ title: "Différence du nombre de trajets Télétravail vs Présentiel par individus", width: 1000, height: 500, marginLeft: 50, marginRight: 150, marginBottom: 60, x: { label: "Individu", tickRotate: -45, tickSize: 6, domain: differenceData .map(d => d.ID_T) .sort((a, b) => { const numA = parseInt(a.replace('T', '')); const numB = parseInt(b.replace('T', '')); return numA - numB; }) }, y: { label: "Différence Nombre de Trajet : (Télétravail - Présentiel)", labelAnchor: "center", labelOffset: 50, grid: true }, style: { fontSize: "14px", fontFamily: "sans-serif" }, marks: [ // Zone de fond BLEUE (télétravail - partie positive) Plot.rect(differenceData.filter(d => d.difference >= 0), { x: "ID_T", y1: 0, y2: "difference", fill: "#ff9933", opacity: 0.4, inset: -20 }), // Zone de fond ORANGE (présentiel - partie négative) Plot.rect(differenceData.filter(d => d.difference < 0), { x: "ID_T", y1: "difference", y2: 0, fill: "#b3d9ff", opacity: 0.4, inset: -20 }), // Ligne horizontale épaisse à zéro Plot.ruleY([0], { stroke: "black", strokeWidth: 2.5 }), // Points NOIRS Plot.dot(differenceData, { x: "ID_T", y: "difference", fill: "black", r: 5, stroke: "white", strokeWidth: 1 }), // TEXTE FLOTTANT - en haut à DROITE du graphique Plot.text([["+ de trajets\nTélétravail"]], { x: [differenceData[differenceData.length - 1].ID_T], y: [6], // Position fixe en haut text: d => d, fontSize: 13, fontWeight: "bold", fill: "#cc6600", textAnchor: "start", dx: 450, dy: 0, frameAnchor: "right" // Ancre à droite du graphique }), // TEXTE FLOTTANT - en bas à DROITE du graphique Plot.text([["+ de trajets\nen Présentiel"]], { x: [differenceData[differenceData.length - 1].ID_T], y: [-5], // Position fixe en bas text: d => d, fontSize: 13, fontWeight: "bold", fill: "#0066cc", textAnchor: "start", dx: 450, dy: 0, frameAnchor: "right" }) ] })33:T51e,{ // 1. On définit la configuration commune const colorConfig = { type: "categorical", scheme: "Category10", domain: [0, 1], tickFormat: d => d === 0 ? "Présentiel" : "Télétravail" }; // 2. On crée la légende séparée const myLegend = Plot.legend({ color: colorConfig, swatchSize: 25, // Taille des carrés augmentée style: { fontSize: "16px", // Police augmentée marginTop: "50px", // Ajustement vertical cursor: "default" } }); // 3. On crée le graphique (Légende interne désactivée) const myChart = Plot.plot({ style: { fontSize: "14px", }, marginBottom: 100, fx: {padding: 0, label: null, tickRotate: 0, tickSize: 6}, x: {axis: null, paddingOuter: 0.2}, y: {grid: true}, color: { ...colorConfig, legend: false // Important : on cache la légende par défaut }, marks: [ Plot.barY(filteredDTPlus, Plot.groupX({y2: "count"}, { x: "Teletravail", fx: "Mode", fill: "Teletravail" })), Plot.ruleY([0]) ] }); // 4. On retourne le montage HTML (Flexbox) return html`

${myChart}

${myLegend}

`; }34:T4ff,{ // 1. On définit la configuration commune const colorConfig = { type: "categorical", scheme: "Category10", domain: [0, 1], tickFormat: d => d === 0 ? "Présentiel" : "Télétravail" }; // 2. On crée la légende séparée const myLegend = Plot.legend({ color: colorConfig, swatchSize: 25, // Taille des carrés augmentée style: { fontSize: "16px", // Police augmentée marginTop: "50px", // Ajustement vertical cursor: "default" } }); // 3. On crée le graphique const myChart = Plot.plot({ style: { fontSize: "14px", }, marginBottom: 100, fx: {padding: 0, label: null, tickRotate: 0, tickSize: 6}, x: {axis: null, paddingOuter: 0.2}, y: {grid: true}, color: { ...colorConfig, legend: false // Important : on cache la légende par défaut }, marks: [ Plot.barY(filteredDTMoins, Plot.groupX({y2: "count"}, { x: "Teletravail", fx: "Mode", fill: "Teletravail" })), Plot.ruleY([0]) ] }); // 4. On retourne le montage HTML (Flexbox) return html`

${myChart}

${myLegend}

`; }35:T4f5,{ // 1. On définit la configuration commune const colorConfig = { type: "categorical", scheme: "Category10", domain: [0, 1], tickFormat: d => d === 0 ? "Présentiel" : "Télétravail" }; // 2. On crée la légende séparée const myLegend = Plot.legend({ color: colorConfig, swatchSize: 25, // Taille des carrés augmentée style: { fontSize: "16px", // Police augmentée marginTop: "50px", // Ajustement vertical cursor: "default" } }); // 3. On crée le graphique const myChart = Plot.plot({ style: { fontSize: "14px", }, marginBottom: 100, fx: {padding: 0, label: null, tickRotate: 0, tickSize: 6}, x: {axis: null, paddingOuter: 0.2}, y: {grid: true}, color: { ...colorConfig, legend: false // Important : on cache la légende par défaut }, marks: [ Plot.barY(DT, Plot.groupX({y2: "count"}, { x: "Teletravail", fx: "Echelle", fill: "Teletravail" })), Plot.ruleY([0]) ] }); // 4. On retourne le montage HTML (Flexbox) return html`

${myChart}

${myLegend}

`; }36:Te8c,chart = { const svg = d3.select(DOM.svg(width, height + 200 +(margin*2))); const containerWidth = width-(margin*2); const containerHeight = height-(margin*2); const container = svg.append('g') .attr("width", containerWidth) .attr("height", containerHeight + 400) .attr('transform', `translate(${(width/2)+margin}, ${(height/2)+margin})`); var axisGrid = container.append("g") .attr("class", "axisWrapper"); axisGrid.selectAll(".levels") .data(d3.range(1,(axisCircles+1)).reverse()) .enter() .append("circle") .attr("class", "gridCircle") .attr("r", (d, i) => radius/axisCircles*d) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", 0.1); const axis = axisGrid.selectAll(".axis") .data(axesDomain) .enter() .append("g") .attr("class", "axis"); axis.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", (d, i) => rScale(maxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y2", (d, i) => rScale(maxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2)) .attr("class", "line") .style("stroke", "white") .style("stroke-width", "2px"); axis.append("text") .attr("class", "legend") .style("font-size", "14px") .attr("text-anchor", "middle") .attr("font-family", "Arial") .attr("dy", "0.35em") .attr("x", (d, i) => rScale(maxValue * axisLabelFactor) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y", (d, i) => rScale(maxValue * axisLabelFactor) * Math.sin(angleSlice*i - Math.PI/2)) .text(d => d); const plots = container.append('g') .selectAll('g') .data(Fulldata) .join('g') .attr("data-name", (d, i) => device(i)) .attr("fill", "none") .attr("stroke", "steelblue"); plots.append('path') .attr("d", d => radarLine(d.map(v => v.value))) .attr("fill", (d, i) => color(i)) .attr("fill-opacity", 0.1) .attr("stroke", (d, i) => color(i)) .attr("stroke-width", 2); plots.selectAll("circle") .data(d => d) .join("circle") .attr("r", dotRadius) .attr("cx", (d,i) => rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2)) .attr("cy", (d,i) => rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2)) .style("fill-opacity", 0.8); // Ajout des valeurs à côté des points plots.selectAll("text") .data(d => d) .enter() .append("text") .text(d => Math.round(d.value)) .attr("x", (d, i) => { const xPosition = rScale(d.value) * Math.cos(angleSlice * i - Math.PI/2); return xPosition === 0 ? 5 : xPosition; }) .attr("y", (d, i) => { const yPosition = rScale(d.value) * Math.sin(angleSlice * i - Math.PI/2); return yPosition === 0 ? -10 : yPosition - 5; }) .style("fill", "black") .style("font-size", "14px") .style("text-anchor", "start") .style("dominant-baseline", "middle"); // Add one dot in the legend for each name. svg.selectAll('dots') .data(Fulldata) .enter() .append('circle') .attr('cx', 480) .attr('cy', function(d,i){ return containerHeight + 150 + i*25}) // 100 is where the first dot appears. 25 is the distance between dots .attr("r", 7) .style("fill", function(d, i){ return color(i)}); svg.selectAll("labels") .data(Fulldata) .enter() .append("text") .attr("x", 500) .attr("y", function(d,i){ return containerHeight + 152 + i*25}) // 100 is where the first dot appears. 25 is the distance between dots .style("fill", function(d, i){ return color(i)}) .text(function(d, i){ return device(i) + " (%)" }) // Ajoutez " (%)" après le label .attr("text-anchor", "left") .attr("font-family", "Arial") .style("alignment-baseline", "middle"); return svg.node(); }37:Tf39, Echellechart = { const svg = d3.select(DOM.svg(width, height + 200 +(margin*2))); const containerWidth = width-(margin*2); const containerHeight = height-(margin*2); const container = svg.append('g') .attr("width", containerWidth) .attr("height", containerHeight + 400) .attr('transform', `translate(${(width/2)+margin}, ${(height/2)+margin})`); var axisGrid = container.append("g") .attr("class", "axisWrapper"); axisGrid.selectAll(".levels") .data(d3.range(1,(axisCircles+1)).reverse()) .enter() .append("circle") .attr("class", "gridCircle") .attr("r", (d, i) => radius/axisCircles*d) .style("fill", "#CDCDCD") .style("stroke", "#CDCDCD") .style("fill-opacity", 0.1); const axis = axisGrid.selectAll(".axis") .data(axesDomain) .enter() .append("g") .attr("class", "axis"); axis.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", (d, i) => EchellerScale(EchellemaxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y2", (d, i) => EchellerScale(EchellemaxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2)) .attr("class", "line") .style("stroke", "white") .style("stroke-width", "2px"); axis.append("text") .attr("class", "legend") .style("font-size", "14px") .attr("text-anchor", "middle") .attr("font-family", "Arial") .attr("dy", "0.35em") .attr("x", (d, i) => EchellerScale(EchellemaxValue * axisLabelFactor) * Math.cos(angleSlice*i - Math.PI/2)) .attr("y", (d, i) => EchellerScale(EchellemaxValue * axisLabelFactor) * Math.sin(angleSlice*i - Math.PI/2)) .text(d => d); const plots = container.append('g') .selectAll('g') .data(EchelleData) .join('g') .attr("data-name", (d, i) => device(i)) .attr("fill", "none") .attr("stroke", "steelblue"); plots.append('path') .attr("d", d => EchelleradarLine(d.map(v => v.value))) .attr("fill", (d, i) => color(i)) .attr("fill-opacity", 0.1) .attr("stroke", (d, i) => color(i)) .attr("stroke-width", 2); plots.selectAll("circle") .data(d => d) .join("circle") .attr("r", dotRadius) .attr("cx", (d,i) => EchellerScale(d.value) * Math.cos(angleSlice*i - Math.PI/2)) .attr("cy", (d,i) => EchellerScale(d.value) * Math.sin(angleSlice*i - Math.PI/2)) .style("fill-opacity", 0.8); // Ajout des valeurs à côté des points plots.selectAll("text") .data(d => d) .enter() .append("text") .text(d => Math.round(d.value)) .attr("x", (d, i) => { const xPosition = EchellerScale(d.value) * Math.cos(angleSlice * i - Math.PI/2); return xPosition === 0 ? 5 : xPosition; }) .attr("y", (d, i) => { const yPosition = EchellerScale(d.value) * Math.sin(angleSlice * i - Math.PI/2); return yPosition === 0 ? -10 : yPosition - 5; // Ajustez la position du texte pour éviter la superposition }) .style("fill", "black") .style("font-size", "14px") .style("text-anchor", "start") .style("dominant-baseline", "middle"); // Add one dot in the legend for each name. svg.selectAll('dots') .data(EchelleData) .enter() .append('circle') .attr('cx', 480) .attr('cy', function(d,i){ return containerHeight + 150 + i*25}) // 100 is where the first dot appears. 25 is the distance between dots .attr("r", 7) .style("fill", function(d, i){ return color(i)}); svg.selectAll("labels") .data(EchelleData) .enter() .append("text") .attr("x", 500) .attr("y", function(d,i){ return containerHeight + 152 + i*25}) // 100 is where the first dot appears. 25 is the distance between dots .style("fill", function(d, i){ return color(i)}) .text(function(d, i){ return device(i) + " (%)" }) // Ajoutez " (%)" après le label .attr("text-anchor", "left") .attr("font-family", "Arial") .style("alignment-baseline", "middle"); return svg.node(); }38:T451,Fulldata = [ [//Travail {axis:"Velo",value: 100*(DT.filter(entry => entry.Teletravail === 0 && entry["Mode"] === "Velo").length)/Travail0.length}, {axis:"Metro",value: 100*(DT.filter(entry => entry.Teletravail === 0 && entry["Mode"] === "Metro").length)/Travail0.length}, {axis:"Pedestre",value: 100*(DT.filter(entry => entry.Teletravail === 0 && entry["Mode"] === "Pedestre").length)/Travail0.length}, {axis:"Voiture",value: 100*(DT.filter(entry => entry.Teletravail === 0 && entry["Mode"] === "Voiture").length)/Travail0.length}, ],[//Teletravail {axis:"Velo",value: 100*(DT.filter(entry => entry.Teletravail === 1 && entry["Mode"] === "Velo").length)/Travail1.length}, {axis:"Metro",value: 100*(DT.filter(entry => entry.Teletravail === 1 && entry["Mode"] === "Metro").length)/Travail1.length}, {axis:"Pedestre",value: 100*(DT.filter(entry => entry.Teletravail === 1 && entry["Mode"] === "Pedestre").length)/Travail1.length}, {axis:"Voiture",value: 100*(DT.filter(entry => entry.Teletravail === 1 && entry["Mode"] === "Voiture").length)/Travail1.length}, ] ]; 39:T1039,T_Sunburst = { // Specify the chart’s dimensions. const width = 928; const height = width; const radius = width / 6; // Create the color scale. const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, T_dataSun.children.length + 1)); // Compute the layout. const hierarchy = d3.hierarchy(T_dataSun) .sum(d => d.value) .sort((a, b) => b.value - a.value); const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); root.each(d => d.current = d); // Create the arc generator. const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) .style("font", "10px sans-serif"); // Append the arcs. const path = svg.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)); // Make them clickable if they have children. path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); const format = d3.format(",d"); path.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); const label = svg.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => +labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) .text(d => d.data.name) .style("font-size", "18px"); const parent = svg.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = svg.transition().duration(750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }3a:T1035,TT_Sunburst = { // Specify the chart’s dimensions. const width = 928; const height = width; const radius = width / 6; // Create the color scale. const color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, TT_dataSun.children.length + 1)); // Compute the layout. const hierarchy = d3.hierarchy(TT_dataSun) .sum(d => d.value) .sort((a, b) => b.value - a.value); const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); root.each(d => d.current = d); // Create the arc generator. const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, width]) .style("font", "10px sans-serif"); // Append the arcs. const path = svg.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)); // Make them clickable if they have children. path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); const format = d3.format(",d"); path.append("title") .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`); const label = svg.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => +labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) .text(d => d.data.name) .style("font-size", "18px"); const parent = svg.append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); // Handle zoom on click. function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = svg.transition().duration(750); // Transition the data on all arcs, even the ones that aren’t visible, // so that if this transition is interrupted, entering arcs will start // the next transition from the desired position. path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return +this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.6 : 0.4) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); label.filter(function(d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }3b:T4fa,{ // 1. On définit la configuration commune const colorConfig = { type: "categorical", scheme: "Category10", domain: [0, 1], tickFormat: d => d === 0 ? "Présentiel" : "Télétravail" }; // 2. On crée la légende séparée const myLegend = Plot.legend({ color: colorConfig, swatchSize: 25, // Taille des carrés augmentée style: { fontSize: "16px", // Police augmentée marginTop: "50px", // Ajustement vertical cursor: "default" } }); // 3. On crée le graphique const myChart = Plot.plot({ style: { fontSize: "12px", }, marginBottom: 100, fx: {padding: 0, label: null, tickRotate: 40, tickSize: 6}, x: {axis: null, paddingOuter: 0.2}, y: {grid: true}, color: { ...colorConfig, legend: false // Important : on cache la légende par défaut }, marks: [ Plot.barY(DT, Plot.groupX({y2: "count"}, { x: "Teletravail", fx: "Destination", fill: "Teletravail" })), Plot.ruleY([0]) ] }); // 4. On retourne le montage HTML (Flexbox) return html`

${myChart}

${myLegend}

`; }3c:T6fa,map = { // Création du

conteneur de la carte let container = DOM.element('div', { style: `width:800px;height:600px` }); // Rendu du conteneur pour qu'il se dimensionne avant que Leaflet ne dessine la carte yield container; // Création de la carte centrée sur Toulouse avec un niveau de zoom approprié let map = L.map(container).setView([43.6045, 1.444], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); // Charger les données GeoJSON pour les quartiers de Toulouse let toulouseQuartiers = await FileAttachment("quartiers-de-democratie-locale.geojson").json(); // Ajouter une couche d'entités GeoJSON à la carte let tm = L.geoJSON(toulouseQuartiers, {style: choroplethe, onEachFeature: onEachFeature}).addTo(map); map.fitBounds(tm.getBounds()); // Définissez les fonctions pour les interactions avec les entités GeoJSON function highlightFeature(e) { var layer = e.target; layer.setStyle({ weight: 1, color: '#222', dashArray: '', fillOpacity: 0.8 }); layer.bringToFront(); // Mettez à jour un panneau d'information ou une légende ici si nécessaire } function zoomToFeature(e) { // map.fitBounds(e.target.getBounds()); } function resetHighlight(e) { tm.resetStyle(e.target); // Réinitialisez les informations ou la légende ici si nécessaire } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } // Ajoutez ici des contrôles supplémentaires tels que les informations ou la légende si nécessaire return map; }3d:T582,mapTelework = { // Création du

conteneur de la carte let container = DOM.element('div', { style: `width:800px;height:600px` }); yield container; let map = L.map(container).setView([43.6045, 1.444], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); L.geoJSON(toulouseQuartiers, {style: styleTelework}).addTo(map); const legend = L.control({ position: 'bottomright' }); legend.onAdd = function (map) { const div = L.DomUtil.create('div', 'info legend'); // Encadrement fond blanc div.style.backgroundColor = 'white'; div.style.padding = '10px'; div.style.border = '2px solid black'; div.style.borderRadius = '5px'; const grades = [0, 5, 10, 15]; // Titre souligné div.innerHTML = 'Légende

'; // Lignes de la légende avec unité grades.forEach((grade, index) => { const color = colorScaleTT(grade); div.innerHTML += '

' + '' + '' + grade + (grades[index + 1] ? '–' + grades[index + 1] : '+') + ' trajets' + '

'; }); return div; }; legend.addTo(map); }3e:T5e3,mapNonTelework = { // Création du

conteneur de la carte let container = DOM.element('div', { style: `width:800px;height:600px` }); yield container; let map = L.map(container).setView([43.6045, 1.444], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); L.geoJSON(toulouseQuartiers, {style: styleNonTelework}).addTo(map); const legend = L.control({ position: 'bottomright' }); legend.onAdd = function (map) { const div = L.DomUtil.create('div', 'info legend'); const grades = [0, 5, 10, 15]; // Exemple de seuils pour les couleurs let labels = ['Légende']; // Encadrement fond blanc div.style.backgroundColor = 'white'; div.style.padding = '10px'; div.style.border = '2px solid black'; div.style.borderRadius = '5px'; // Titre souligné div.innerHTML = 'Légende

'; // Lignes de la légende avec unité grades.forEach((grade, index) => { const color = colorScaleP(grade); div.innerHTML += '

' + '' + '' + grade + (grades[index + 1] ? '–' + grades[index + 1] : '+') + ' trajets' + '

'; }); return div; }; legend.addTo(map); return map; }3f:Ta8e,mapDifference = { let container = DOM.element('div', { style: `width:800px;height:600px` }); yield container; let map = L.map(container).setView([43.6045, 1.444], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); L.geoJSON(toulouseQuartiers, {style: styleByDifference}).addTo(map); // ===== LÉGENDE DE DROITE (Télétravail) ===== const legendTelework = L.control({ position: 'bottomright' }); legendTelework.onAdd = function (map) { const div = L.DomUtil.create('div', 'info legend'); // Encadrement fond blanc div.style.backgroundColor = 'white'; div.style.padding = '10px'; div.style.border = '2px solid black'; div.style.borderRadius = '5px'; const grades = [1, 2, 3, 4]; // Titre souligné div.innerHTML = 'Plus de trajets en télétravail

'; // Lignes de la légende avec unité grades.forEach((grade, index) => { const color = colorScaleTeleworkMore(grade); div.innerHTML += '

' + '' + '' + grade + (grades[index + 1] ? '–' + grades[index + 1] : '+') + ' trajets' + '

'; }); return div; }; legendTelework.addTo(map); // ===== LÉGENDE DE GAUCHE (Non télétravail) ===== const legendNonTelework = L.control({ position: 'bottomleft' }); legendNonTelework.onAdd = function (map) { const div = L.DomUtil.create('div', 'info legend'); // Encadrement fond blanc div.style.backgroundColor = 'white'; div.style.padding = '10px'; div.style.border = '2px solid black'; div.style.borderRadius = '5px'; const grades = [0, 3, 6, 9]; // Titre souligné div.innerHTML = 'Plus de trajets en présentiel

'; // Lignes de la légende avec unité grades.forEach((grade, index) => { const color = colorScaleNonTeleworkMore(Math.abs(grade)); div.innerHTML += '

' + '' + '' + grade + (grades[index + 1] ? '–' + grades[index + 1] : '+') + ' trajets' + '

'; }); return div; }; legendNonTelework.addTo(map); return map; };40:[{"id":"d57b0fd0c18945a26e17f6a038f415f28203ef8c6afd1e55f60d9dcecb69673a726c8b70ad3abe61f428f88d9423ad0c6bb0802672aae73f0561bc6ea02bc92c","href":"https://static.observableusercontent.com/files/d57b0fd0c18945a26e17f6a038f415f28203ef8c6afd1e55f60d9dcecb69673a726c8b70ad3abe61f428f88d9423ad0c6bb0802672aae73f0561bc6ea02bc92c","name":"BD_Simplifie.csv","type":"text/csv","lastModified":1704969644786.443,"size":17150},{"id":"a4f44d0fd4a29ff60c3627ec7f7ad279124a272fca6643a57bb68accf0170c5dd884eb963c19b05ab1a13396d6f50b9f62442b7c3e40e7a99685c0487e941229","href":"https://static.observableusercontent.com/files/a4f44d0fd4a29ff60c3627ec7f7ad279124a272fca6643a57bb68accf0170c5dd884eb963c19b05ab1a13396d6f50b9f62442b7c3e40e7a99685c0487e941229","name":"quartiers-de-democratie-locale.geojson","type":"application/geo+json","lastModified":1704980625419.389,"size":158153}] 30:{"id":"0f1684f4277f9260","slug":null,"title":"Analyse de l'impact du Télétravail sur les déplacements","thumbnail":"c0975b01539cc9ac90e3fd7af1e02edbb9fb09ea3578b918a917479a6af02100","access_level":"public","create_time":"$D2023-12-14T13:20:36.923Z","update_time":"$D2026-01-14T11:47:22.832Z","view_time":null,"first_public_time":"$D2023-12-19T09:33:13.153Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0e6ee57c5263b97a","login":"mattclou-ws","name":"MattClou's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a6bfc3bef1d230370c8de31c7e876929a66c430baeec7e79241d24d9864b0776","tier":"starter_2024"},"version":1844,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c1c2bbd663f3ff0","login":"mattclou","name":"MattClou","avatar_url":"https://avatars-next.observableusercontent.com/581bcfb270506fe8ac84c24c5e14e9957e60c2c5da211bedff71dbfd126dcd71","tier":null},{"type":"individual","id":"f1dd3253c55ab5fd","login":"jeremscript","name":"jeremscript","avatar_url":"https://avatars-next.observableusercontent.com/221ff16f3706f3ce445fa6c497bf46a3db5535f3c3f6fa8bf9fa51c6ae80319e","tier":null}],"members":[{"type":"individual","id":"2c1c2bbd663f3ff0","login":"mattclou","name":"MattClou","avatar_url":"https://avatars-next.observableusercontent.com/581bcfb270506fe8ac84c24c5e14e9957e60c2c5da211bedff71dbfd126dcd71","tier":null,"role":"editor"},{"type":"team","id":"0e6ee57c5263b97a","login":"mattclou-ws","name":"MattClou's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a6bfc3bef1d230370c8de31c7e876929a66c430baeec7e79241d24d9864b0776","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Analyse de l'impact du Télétravail sur les déplacements","cells":[{"id":0,"value":"# Analyse de l'impact du Télétravail sur les déplacements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"DT = d3.dsv(\";\", await FileAttachment(\"BD_Simplifie.csv\").url(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"DT","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":726,"value":"## A) Comparaison du nombre de trajets en télétravail vs Présentiel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1167,"value":"Plot.plot({\n title: \"Nombre de Trajets - Présentiel vs Télétravail\",\n marginLeft: 40,\n x: {\n label: \"Statut de l'employé\"\n },\n y: {\n label: \"Nombre de Trajets\"\n },\n marks: [\n Plot.barY(data, { \n x: \"Teletravail\", \n y: \"nombre\", \n fill: \"Teletravail\" \n })\n ],\n color: {\n legend: false,\n domain: [\"Présentiel\", \"Télétravail\"], // Les catégories\n range: [\"#3399ff\", \"#ff9933\"] // Orange, puis Bleu\n }\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"data = Object.entries(teleworkData).map(([key, value]) => ({ \n Teletravail: key === '1' ? 'Télétravail' : 'Présentiel', \n nombre: value \n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"teleworkData = DT.reduce((acc, val) => {\n acc[val.Teletravail] = (acc[val.Teletravail] || 0) + 1;\n return acc;\n}, {});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"differenceData = Object.entries(teleworkDifference).map(([id, counts]) => ({\n ID_T: id,\n difference: counts.Teletravail - counts.nonTeletravail\n}));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"teleworkDifference = DT.reduce((acc, row) => {\n if (!acc[row.ID_T]) acc[row.ID_T] = { Teletravail: 0, nonTeletravail: 0 };\n if (row.Teletravail === 1) {\n acc[row.ID_T].Teletravail += 1;\n } else {\n acc[row.ID_T].nonTeletravail += 1;\n }\n return acc;\n}, {});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"differenceData.sort((a, b) => a.difference - b.difference);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"## B) Impact du télétravail sur les modes de déplacements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1202,"value":"### Analyse des valeurs extrêmes : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1209,"value":"#### Extrême plus :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1205,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"#### Extrême moins :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1207,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"filteredDTPlus = DT.filter(d => extremeIDsPlus.has(d.ID_T));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"extremeIDsPlus = new Set(filteredDifferenceDataPlus.map(d => d.ID_T));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"filteredDifferenceDataPlus = differenceData.filter(d => d.difference >= 3);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"filteredDTMoins = DT.filter(d => extremeIDsMoins.has(d.ID_T));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"extremeIDsMoins=new Set(filteredDifferenceDataMoins.map(d => d.ID_T));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"filteredDifferenceDataMoins = differenceData.filter(d => d.difference <= -3);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"### Impact du Télétravail sur la distance de déplacements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"### Graphique Radar :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1252,"value":"#### Donnée complète","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"#### Graphique Radar interactif en fonction de l'Echelle de déplacement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1121,"value":"viewof selectEchelle = Inputs.select(Echelle, {label: \"Echelle\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"Source = \"https://observablehq.com/@palewire/radar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"Echelle = [... new Set (DT.map(d => d[\"Echelle\"]))] // unique state values from the full data.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"## Sunburst Travail","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":809,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"Source : \"https://observablehq.com/@d3/zoomable-sunburst\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":553,"value":"T_dataSun = ({\n name: \"Travail\",\n children: [\n {\n name: \"Intra-Quartier\",\n children: [\n { name: \"Metro\", value: MetroA0 },\n { name: \"Velo\", value: VeloA0 },\n { name: \"Voiture\", value: VoitureA0 },\n { name: \"Pedestre\", value: PedestreA0 },\n ],\n },\n {\n name: \"Extra-Communal\",\n children: [\n { name: \"Metro\", value: MetroB0 },\n { name: \"Velo\", value: VeloB0 },\n { name: \"Voiture\", value: VoitureB0 },\n { name: \"Pedestre\", value: PedestreB0 },\n ],\n },\n {\n name: \"Intra-Communal\",\n children: [\n { name: \"Metro\", value: MetroC0 },\n { name: \"Velo\", value: VeloC0 },\n { name: \"Voiture\", value: VoitureC0 },\n { name: \"Pedestre\", value: PedestreC0 },\n ],\n }\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"## Sunburst Télétravail","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":892,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"Source : \"https://observablehq.com/@d3/zoomable-sunburst\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":873,"value":"TT_dataSun = ({\n name: \"Télétravail\",\n children: [\n {\n name: \"Intra-Quartier\",\n children: [\n { name: \"Metro\", value: MetroA1 },\n { name: \"Vélo\", value: VeloA1 },\n { name: \"Voiture\", value: VoitureA1 },\n { name: \"Pedestre\", value: PedestreA1 },\n ],\n },\n {\n name: \"Extra-Communal\",\n children: [\n { name: \"Metro\", value: MetroB1 },\n { name: \"Vélo\", value: VeloB1 },\n { name: \"Voiture\", value: VoitureB1 },\n { name: \"Pedestre\", value: PedestreB1 },\n ],\n },\n {\n name: \"Intra-Communal\",\n children: [\n { name: \"Metro\", value: MetroC1 },\n { name: \"Vélo\", value: VeloC1 },\n { name: \"Voiture\", value: VoitureC1 },\n { name: \"Pedestre\", value: PedestreC1 },\n ],\n }\n ]\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"### C) Impact du Télétravail sur les destinations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":635,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"### D) Cartographie des différences de déplacements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1276,"value":"##### Cartes des différents quartiers toulousain (pour tester le fichier shape des quartiers) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1278,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"function choroplethe(feature) {\n return {\n fillColor: 'blue', // La couleur de remplissage des quartiers\n weight: 1, // L'épaisseur des lignes de contour\n opacity: 1, // La transparence des lignes de contour\n color: 'white', // La couleur des lignes de contour\n fillOpacity: 0.7 // La transparence de la couleur de remplissage\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"toulouseQuartiers = await FileAttachment(\"quartiers-de-democratie-locale.geojson\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"#### Cartographie des destinations en Télétravail :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1294,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"function styleTelework(feature) {\n const quartierName = feature.properties.quartier_secteur.toUpperCase();\n const countEntry = teleworkCounts.find(d => d[0] === quartierName);\n\n let fillColor = 'grey'; // Couleur par défaut pour les quartiers sans correspondance\n if (countEntry) {\n fillColor = colorScaleTT(countEntry[1]);\n }\n console.log(fillColor)\n return {\n fillColor: fillColor,\n weight: 2,\n opacity: 1,\n color: 'black',\n fillOpacity: 0.7\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"teleworkCounts = d3.rollups(\n DT.filter(d => d['Teletravail'] === 1),\n v => v.length,\n d => d['quartier_d']\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"colorScaleTT= d3.scaleSequential(d3.interpolateOranges)\n .domain([0,15]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"#### Cartographie des destinations en Présentiel :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1315,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"function styleNonTelework(feature) {\n const quartierName = feature.properties.quartier_secteur.toUpperCase();\n const countEntry = nonTeleworkCounts.find(d => d[0] === quartierName);\n\n let fillColor = 'grey'; // Couleur par défaut pour les quartiers sans correspondance\n if (countEntry) {\n fillColor = colorScaleP(countEntry[1]);\n }\n console.log(fillColor)\n return {\n fillColor: fillColor,\n weight: 2,\n opacity: 1,\n color: 'black',\n fillOpacity: 0.7\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"nonTeleworkCounts = d3.rollups(\n DT.filter(d => d['Teletravail'] === 0),\n v => v.length,\n d => d['quartier_d']\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"colorScaleP= d3.scaleSequential(d3.interpolateBlues)\n .domain([0,15]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"#### Cartographie de la différence :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1323,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"function styleByDifference(feature) {\n const quartierName = feature.properties.quartier_secteur.toUpperCase();\n const difference = frequencyDifference.find(d => d.quartier === quartierName)?.difference || 0;\n\n let fillColor;\n if (difference > 0) {\n fillColor = colorScaleTeleworkMore(difference);\n } else if (difference < 0) {\n fillColor = colorScaleNonTeleworkMore(Math.abs(difference));\n } else {\n fillColor = 'gray'; // or another neutral color for no difference\n }\n\n return {\n fillColor: fillColor,\n weight: 2,\n opacity: 2,\n color: 'black',\n fillOpacity: 0.7\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"colorScaleTeleworkMore = d3.scaleSequential(d3.interpolateOranges)\n .domain([0, 5]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"colorScaleNonTeleworkMore = d3.scaleSequential(d3.interpolateBlues)\n .domain([-3, 9]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"frequencyDifference = toulouseQuartiers.features.map(feature => {\n const quartierName = feature.properties.quartier_secteur.toUpperCase();\n const teleworkCount = teleworkCounts.find(d => d[0] === quartierName)?.[1] || 0;\n const nonTeleworkCount = nonTeleworkCounts.find(d => d[0] === quartierName)?.[1] || 0;\n return {\n quartier: quartierName,\n difference: teleworkCount - nonTeleworkCount\n };\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"## E) Constantes utilisées pour la création de certains graphiques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"### Constante utilisé pour la création des Graphiques Radars","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1443,"value":"viewof curveSelect = select({\n title: \"Curve type\",\n options: curveTypes,\n value: \"curveCardinalClosed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"T_select = DT.filter(entry => entry.Teletravail === 0 && entry[\"Echelle\"] === selectEchelle)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"TT_select = DT.filter(entry => entry.Teletravail === 1 && entry[\"Echelle\"] === selectEchelle)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"EchelleData = [\n [//Travail\n {axis: \"Velo\", value: (T_select.filter(entry => entry[\"Mode\"] === \"Velo\").length / T_select.length) * 100},\n {axis: \"Metro\", value: (T_select.filter(entry => entry[\"Mode\"] === \"Metro\").length / T_select.length) * 100},\n {axis: \"Pedestre\", value: (T_select.filter(entry => entry[\"Mode\"] === \"Pedestre\").length / T_select.length) * 100},\n {axis: \"Voiture\", value: (T_select.filter(entry => entry[\"Mode\"] === \"Voiture\").length / T_select.length) * 100},\t\t\n ],\n [//Teletravail\n {axis: \"Velo\", value: (TT_select.filter(entry => entry[\"Mode\"] === \"Velo\").length / TT_select.length) * 100},\n {axis: \"Metro\", value: (TT_select.filter(entry => entry[\"Mode\"] === \"Metro\").length / TT_select.length) * 100},\n {axis: \"Pedestre\", value: (TT_select.filter(entry => entry[\"Mode\"] === \"Pedestre\").length / TT_select.length) * 100},\n {axis: \"Voiture\", value: (TT_select.filter(entry => entry[\"Mode\"] === \"Voiture\").length / TT_select.length) * 100},\t\t\n ]\n];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"axesDomain = Fulldata[0].map(d => d.axis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"axesLength = 4\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"wrapWidth = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"axisLabelFactor = 1.12\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"axisCircles = 4\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"dotRadius = 4\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"radius = 270\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"margin = 30\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"angleSlice = Math.PI * 2 / axesLength","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"import {curveTypes} from \"@palewire/d3-curves-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"color = d3.scaleOrdinal()\n .range([\"#1f77b4\", \"#ff7f0e\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"device = d => [\"Trajet Présentiel\", \"Trajet Télétravail\"][d]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"#### Maxvalue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"maxValue = d3.max(_.flatten(Fulldata).map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"EchellemaxValue = d3.max(_.flatten(EchelleData).map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"#### RScale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":695,"value":"EchellerScale = d3.scaleLinear()\n .domain([0, EchellemaxValue])\n .range([0, radius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"rScale = d3.scaleLinear()\n .domain([0, maxValue])\n .range([0, radius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"#### RadarLine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":701,"value":"EchelleradarLine = d3.lineRadial()\n .curve(d3[curveSelect])\n .radius(d => EchellerScale(d))\n .angle((d, i) => i * angleSlice)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"radarLine = d3.lineRadial()\n .curve(d3[curveSelect])\n .radius(d => rScale(d))\n .angle((d, i) => i * angleSlice)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"### Constantes utilisées pour la hiérarchisation des données pour le Graphique Sunburst","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1672,"value":"Filtre Travail/Télétravail","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"Travail0 = DT.filter(item => item.Teletravail === 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"Travail1 = DT.filter(item => item.Teletravail === 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"Filtre IntraQuartier","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"IntraQuartierA0 = Travail0.filter(entry => entry.Echelle === \"Intra Quartier\"&& (entry.Mode === \"Velo\" || entry.Mode === \"Voiture\" || entry.Mode === \"Metro\" || entry.Mode === \"Pedestre\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"IntraQuartierA1 = Travail1.filter(entry => entry.Echelle === \"Intra Quartier\"&& (entry.Mode === \"Velo\" || entry.Mode === \"Voiture\" || entry.Mode === \"Metro\" || entry.Mode === \"Pedestre\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"VoitureA0 = IntraQuartierA0.filter(entry => entry[\"Mode\"] === \"Voiture\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"VoitureA1 = IntraQuartierA1.filter(entry => entry[\"Mode\"] === \"Voiture\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"VeloA0 = IntraQuartierA0.filter(entry => entry[\"Mode\"] === \"Velo\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"VeloA1 = IntraQuartierA1.filter(entry => entry[\"Mode\"] === \"Velo\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"MetroA0 = IntraQuartierA0.filter(entry => entry[\"Mode\"] === \"Metro\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"MetroA1 = IntraQuartierA1.filter(entry => entry[\"Mode\"] === \"Metro\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"PedestreA0 = IntraQuartierA0.filter(entry => entry[\"Mode\"] === \"Pedestre\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"PedestreA1 = IntraQuartierA1.filter(entry => entry[\"Mode\"] === \"Pedestre\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"Filtre ExtraCommunal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"ExtraCommunal0 = Travail0.filter(entry => entry.Echelle === \"Extra Communal\"&& (entry.Mode === \"Vélo\" || entry.Mode === \"Voiture\" || entry.Mode === \"Métro\" || entry.Mode === \"Pedestre\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"ExtraCommunal1 = Travail1.filter(entry => entry.Echelle === \"Extra Communal\"&& (entry.Mode === \"Velo\" || entry.Mode === \"Voiture\" || entry.Mode === \"Metro\" || entry.Mode === \"Pedestre\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"VoitureB0 = ExtraCommunal0.filter(entry => entry[\"Mode\"] === \"Voiture\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"VoitureB1 = ExtraCommunal1.filter(entry => entry[\"Mode\"] === \"Voiture\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"VeloB0 = ExtraCommunal0.filter(entry => entry[\"Mode\"] === \"Velo\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"VeloB1 = ExtraCommunal1.filter(entry => entry[\"Mode\"] === \"Velo\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"MetroB0 = ExtraCommunal0.filter(entry => entry[\"Mode\"] === \"Metro\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"MetroB1 = ExtraCommunal1.filter(entry => entry[\"Mode\"] === \"Metro\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"PedestreB0 = ExtraCommunal0.filter(entry => entry[\"Mode\"] === \"Pedestre\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"PedestreB1 = ExtraCommunal1.filter(entry => entry[\"Mode\"] === \"Pedestre\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"Filtre IntraCommunal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":461,"value":"IntraCommunalC0 = Travail0.filter(entry => entry.Echelle === \"Intra Communal\"&& (entry.Mode === \"Velo\" || entry.Mode === \"Voiture\" || entry.Mode === \"Métro\" || entry.Mode === \"Pedestre\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"IntraCommunalC1 = Travail1.filter(entry => entry.Echelle === \"Intra Communal\"&& (entry.Mode === \"Velo\" || entry.Mode === \"Voiture\" || entry.Mode === \"Metro\" || entry.Mode === \"Pedestre\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"VoitureC0 = IntraCommunalC0.filter(entry => entry[\"Mode\"] === \"Voiture\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"VoitureC1 = IntraCommunalC1.filter(entry => entry[\"Mode\"] === \"Voiture\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"VeloC0 = IntraCommunalC0.filter(entry => entry[\"Mode\"] === \"Velo\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"VeloC1 = IntraCommunalC1.filter(entry => entry[\"Mode\"] === \"Velo\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"MetroC0 = IntraCommunalC0.filter(entry => entry[\"Mode\"] === \"Metro\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"MetroC1 = IntraCommunalC1.filter(entry => entry[\"Mode\"] === \"Metro\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"PedestreC0 = IntraCommunalC0.filter(entry => entry[\"Mode\"] === \"Pedestre\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"PedestreC1 = IntraCommunalC1.filter(entry => entry[\"Mode\"] === \"Pedestre\").length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"function autoBox() {\n document.body.appendChild(this);\n const {x, y, width, height} = this.getBBox();\n document.body.removeChild(this);\n return [x, y, width, height];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1","titling":"auto"}} 31:"$30:body"