25:["$","title",null,{"children":"Natalité | DCDP | Observable"}] 49:T97a,{ let keys = ['G01Q01', 'G01Q02']; let resData = [ { group: "18-24", gender: "femme", population: 0 }, { group: "18-24", gender: "homme", population: 0 }, { group: "25-34", gender: "femme", population: 0 }, { group: "25-34", gender: "homme", population: 0 }, { group: "35-44", gender: "femme", population: 0 }, { group: "35-44", gender: "homme", population: 0 }, { group: "45-54", gender: "femme", population: 0 }, { group: "45-54", gender: "homme", population: 0 }, { group: "55+", gender: "femme", population: 0 }, { group: "55+", gender: "homme", population: 0 }, ]; let tempData = []; let obj = {}; for (let i = 0; i < data.length; i++) { switch (data[i]['G01Q02']) { case "Femme" : obj.gender = "femme"; break; case "Homme" : obj.gender = 'homme'; break; } switch (true) { case (data[i]['G01Q01']) == "Entre 18 et 24 ans" : obj.group = '18-24'; break; case (data[i]['G01Q01']) == "Entre 25 et 34 ans" : obj.group = '25-34'; break; case (data[i]['G01Q01']) == "Entre 35 et 44 ans" : obj.group = '35-44'; break; case (data[i]['G01Q01']) == "Entre 45 et 54 ans" : obj.group = '45-54'; break; case (data[i]['G01Q01']) == "55 ans et plus" : obj.group = '55+'; break; } tempData.push(obj); obj = {}; } let count; let essai; for (let i = 0; i < resData.length; i++) { if (i < 2) { count = tempData.filter((obj) => obj.group == '18-24' && obj.gender == resData[i]['gender']).length; resData[i]['population'] = count; resData[i]['year'] = "2025"; } else { count = tempData.filter((obj) => obj.group == resData[i]['group'] && obj.gender == resData[i]['gender']).length; resData[i]['population'] = count; resData[i]['year'] = "2025"; } } if (formG01Q01['normalize']) { const totaux = d3.rollups(resData, v => d3.sum(v, e => e.population), d => d.gender) d3.map(resData, d => { d.gender == "femme" ? d.population = d.population / totaux[0][1] : d.population = d.population / totaux[1][1] ; return d ; }) } return populationPyramidPlot(resData, {title : formG01Q01['titre'], marginRight : 200, marginLeft : 100, marginBottom : 80, normalize : formG01Q01['normalize']}); }4a:Te91,chartG01Q01 = { const codeQuestion = 'G01Q01' const form = formG01Q01 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }4b:Tf7d,chartG01Q03 = { const codeQuestion = 'G01Q03' const form = formG01Q03 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d['G01Q03']); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const order = ["Célibataire sans enfant", "En couple sans enfant", "Parent seul avec enfant(s), à charge ou non", "En couple avec enfants(s), à charge ou non", "Autre"] donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) /*.call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name))*/ .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.95 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }4c:T1182,chartG01Q04 = { const codeQuestion = 'G01Q04' const form = formG01Q04 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const order = ["Aucun", 1, 2 , 3 , "4 ou plus"] donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) /*.call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name))*/ .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.95 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); /*svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.value) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = ((radius * 0.95 + 4) * (midangle < Math.PI ? 1 : -1)) + 20; return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name));*/ return svg.node(); }4d:T899,{ let keys = ['G01Q05', 'G01Q02']; let resData = [ { group: "-25 ans", gender: "femme", population: 0 }, { group: "-25 ans", gender: "homme", population: 0 }, { group: "25-29", gender: "femme", population: 0 }, { group: "25-29", gender: "homme", population: 0 }, { group: "30-34", gender: "femme", population: 0 }, { group: "30-34", gender: "homme", population: 0 }, { group: "35+", gender: "femme", population: 0 }, { group: "35+", gender: "homme", population: 0 }, ]; let tempData = []; let obj = {}; for (let i = 0; i < data.length; i++) { switch (data[i]['G01Q02']) { case "Femme" : obj.gender = "femme"; break; case "Homme" : obj.gender = 'homme'; break; } switch (true) { case (data[i]['G01Q05']) == "Avant 25 ans" : obj.group = '-25 ans'; break; case (data[i]['G01Q05']) == "Entre 25 et 29 ans" : obj.group = '25-29'; break; case (data[i]['G01Q05']) == "Entre 30 et 34 ans" : obj.group = '30-34'; break; case (data[i]['G01Q05']) == "À 35 ans et plus" : obj.group = '35+'; break; } tempData.push(obj); obj = {}; } let count; let essai; for (let i = 0; i < resData.length; i++) { if (i < 2) { count = tempData.filter((obj) => obj.group == '-25 ans' && obj.gender == resData[i]['gender']).length; resData[i]['population'] = count; resData[i]['year'] = "2025"; } else { count = tempData.filter((obj) => obj.group == resData[i]['group'] && obj.gender == resData[i]['gender']).length; resData[i]['population'] = count; resData[i]['year'] = "2025"; } } if (formG01Q05['normalize']) { const totaux = d3.rollups(resData, v => d3.sum(v, e => e.population), d => d.gender) d3.map(resData, d => { d.gender == "femme" ? d.population = d.population / totaux[0][1] : d.population = d.population / totaux[1][1] ; return d ; }) } return populationPyramidPlot(resData, {title : "", marginRight : 200, marginLeft : 100, marginBottom : 80, normalize : formG01Q05['normalize']}); }4e:Te6d,chartG01Q05 = { const codeQuestion = 'G01Q05' const form = formG01Q05 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined || d[codeQuestion] == "Je n'ai pas d'enfant") {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }4f:Tf62,chartG01Q06 = { const codeQuestion = 'G01Q06' const form = formG01Q06 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const gauche = ["En outre-mer"] const order = ["En France hexagonale", "En outre-mer", "À l'étranger"] donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI || !gauche.includes(d.data.name) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI || !gauche.includes(d.data.name) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || !gauche.includes(d.data.name) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }50:Tec6,chartG0107 = { const codeQuestion = 'G01Q07' const form = formG01Q07 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d['G01Q07']); const donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) /*.call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name))*/ .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }51:Taf1,{ //traitement (data); const codeQuestion = 'G01Q08' const form = formG01Q08 const ordre = ['Plus de 6 000 €', 'De 4 500 à 6 000 €','De 3 000 à 4 500 €', 'De 1 500 à 3 000 €', 'De 1 000 à 1 500 €', 'Moins de 1 000 €', 'Je préfère ne pas répondre'] let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) if (form['sens'].valeur == "h") { return Plot.plot({ x: {}, color: { legend: false, scheme : form['couleurs'].valeur, domain : ordre}, title: '', width, height : form['h'], marginBottom: form['mb'], marginTop: form['mt'], marginLeft: form['ml'], marginRight : form['mr'], x: form['normalize'] ? { tickFormat: "%", label: "réponses (%)" } : { tickFormat: Math.abs, label: "nombre de réponses" }, y: {label : "Revenu mensuel du foyer", domain : ordre}, marks: [ Plot.barX( filteredData, Plot.groupY({ x: form['normalize'] ? "proportion" : "count" }, { y: codeQuestion, fill: codeQuestion, tip: true }) ), Plot.text(filteredData, Plot.map( {text: form['normalize'] ? (values) => values.map(d3.format(".1%")) : (values) => values}, Plot.groupY( { x: form['normalize'] ? "proportion" : "count", text : form['normalize'] ? "proportion" : "count"}, { y: codeQuestion, dx: 15, sort : { y : "-x"} } ) ) ), Plot.ruleX([0]) ] }) } else { return Plot.plot({ color: { legend: false, scheme : form['couleurs'].valeur, domain : ordre}, title: '', width, height : form['h'], marginBottom: form['mb'], marginTop: form['mt'], marginLeft: form['ml'], marginRight : form['mr'], x: {label : "Revenu mensuel du foyer", domain : ordre}, y: form['normalize'] ? { tickFormat: "%", label: "réponses (%)" } : { tickFormat: Math.abs, label: "nombre de réponses" }, marks: [ Plot.barY( filteredData, Plot.groupX({ y: form['normalize'] ? "proportion" : "count" }, { x: codeQuestion, fill: codeQuestion, tip: true }) ), Plot.text(filteredData, Plot.map( {text: form['normalize'] ? (values) => values.map(d3.format(".1%")) : (values) => values}, Plot.groupX( { y: form['normalize'] ? "proportion" : "count", text : form['normalize'] ? "proportion" : "count"}, { x: codeQuestion, dy: -15, sort : { x : "-y"} } ) ) ), Plot.axisX({ rotate : -30, marginBottom : 140, anchor : "bottom", textAnchor: "end" }), Plot.ruleY([0]) ] }) } }52:Tf34,chartG0201 = { const codeQuestion = 'G02Q01' const form = formG02Q01 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d['G02Q01']); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const order = ["Je ne sais pas", "Aucun", 1, 2, 3, "4 ou plus"] donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) /*.call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name))*/ .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }53:T1034,chartG0202 = { const codeQuestion = 'G02Q02' const form = formG02Q02 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const order = ["Je ne sais pas", "Aucun", 1, 2, 3, "4 ou plus"] donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height + 200) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) svg.append("g") .attr("transform", "translate(-500 -300)") .append("text") .text("Combien d’enfants souhaiteriez-vous personnellement avoir (au total, si possible) ?") .attr("class", "title") /*.call(wrap, 4)*/; svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) /*.call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name))*/ .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }54:Ta82,{ let keys = ['G02Q03', 'G01Q02']; const form = formG02Q03 let resData = [ { group: "Ne sais pas", gender: "femme", population: 0 }, { group: "Ne sais pas", gender: "homme", population: 0 }, { group: "Pas d'âge idéal", gender: "femme", population: 0 }, { group: "Pas d'âge idéal", gender: "homme", population: 0 }, { group: "-25 ans", gender: "femme", population: 0 }, { group: "-25 ans", gender: "homme", population: 0 }, { group: "25-29", gender: "femme", population: 0 }, { group: "25-29", gender: "homme", population: 0 }, { group: "30-34", gender: "femme", population: 0 }, { group: "30-34", gender: "homme", population: 0 }, { group: "35+", gender: "femme", population: 0 }, { group: "35+", gender: "homme", population: 0 }, ]; let tempData = []; let obj = {}; for (let i = 0; i < data.length; i++) { switch (data[i]['G01Q02']) { case "Femme" : obj.gender = "femme"; break; case "Homme" : obj.gender = 'homme'; break; } switch (true) { case (data[i]['G02Q03']) == "Je ne sais pas" : obj.group = 'Ne sais pas'; break; case (data[i]['G02Q03']) == "Pas d'âge idéal" : obj.group = "Pas d'âge idéal"; break; case (data[i]['G02Q03']) == "Avant 25 ans" : obj.group = '-25 ans'; break; case (data[i]['G02Q03']) == "Entre 25 et 29 ans" : obj.group = '25-29'; break; case (data[i]['G02Q03']) == "Entre 30 et 34 ans" : obj.group = '30-34'; break; case (data[i]['G02Q03']) == "À 35 ans ou plus" : obj.group = '35+'; break; } tempData.push(obj); obj = {}; } let count; let essai; for (let i = 0; i < resData.length; i++) { if (i < 2) { count = tempData.filter((obj) => obj.group == '-25 ans' && obj.gender == resData[i]['gender']).length; resData[i]['population'] = count; resData[i]['year'] = "2025"; } else { count = tempData.filter((obj) => obj.group == resData[i]['group'] && obj.gender == resData[i]['gender']).length; resData[i]['population'] = count; resData[i]['year'] = "2025"; } } if (form['normalize']) { const totaux = d3.rollups(resData, v => d3.sum(v, e => e.population), d => d.gender) d3.map(resData, d => { d.gender == "femme" ? d.population = d.population / totaux[0][1] : d.population = d.population / totaux[1][1] ; return d ; }) } return populationPyramidPlot(resData, {title : "", marginRight : 200, marginLeft : 100, marginBottom : 80, normalize : form['normalize']}); }55:Tba3,{ const form = formG03Q01 const form1 = formG03Q01_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G03Q01[1]', 'G03Q01[2]', 'G03Q01[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["rang 1", 0], ["rang 2", 0], ["rang 3", 0] ]); const nom = ["Oui, à cause de mes études/de ma carrière professionnelle", "Oui, à cause de difficultés économiques", "Oui, à cause de ma situation de logement", "Oui, pour des raisons liées à mon état de santé ", "Non, je n’ai jamais reporté de projet d’enfant", "Je n’ai pas de projet d’enfant"]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = "rang ".concat(j+1); obj.id = data[i]['id']; obj.Question = data[i][keys[j]].replace(regex,""); resData.push(obj); } obj = {}; } } let dataPlot=Plot.plot({ //title: titre, marginLeft: 250, marginBottom: 50, height: 600, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Meilleur accompagnement"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 20, anchor: "left", labelAnchor: "center"}) ] }) /*d3.select(dataPlot) .selectAll('text') .call(wrap, 4);*/ return dataPlot }56:Tbbe,{ const form = formG03Q01 const form1 = formG03Q01_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G03Q01[1]', 'G03Q01[2]', 'G03Q01[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["Oui, à cause de mes études/de ma carrière professionnelle", 0], ["Oui, à cause de difficultés économiques", 0], ["Oui, à cause de ma situation de logement", 0], ["Oui, pour des raisons liées à mon état de santé ", 0], ["Non, je n’ai jamais reporté de projet d’enfant", 0], ["Je n’ai pas de projet d’enfant", 0] ]); const nom = ["rang 1", "rang 2", "rang 3"]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = data[i][keys[j]].replace(regex,""); obj.id = data[i]['id']; obj.Question = "rang ".concat(j+1); resData.push(obj); } obj = {}; } } console.log(resData) let dataPlot=Plot.plot({ //title: titre, marginLeft: 80, marginBottom: 50, height: 550, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Rangs"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 40, anchor: "left", labelAnchor: "center"}) ] }) d3.select(dataPlot) .selectAll('text') .call(wrap, 3); return dataPlot }57:T126a,chartG03Q01 = { const formSup = formG03Q01SUP const form = formG03Q01 const choix = formSup['res'].nom let rollup = [] let donnees = [] let resultat = [] let temp = {} const keys = ["G03Q01[1]", "G03Q01[2]", "G03Q01[3]"] for (let i = 0; i < keys.length; i++) { //let filteredData = data.filter((d) => {if (d[keys[i]] == undefined) {return false;}return true;}) rollup = d3.flatRollup(data, (D) => D.length, (d) => d[keys[i]]); donnees = rollup.map(([name, value]) => ({name, value})) temp = donnees.filter(function (donnees) { return donnees.name === choix; }); resultat[i] = temp[0] resultat[i]["name"] = "En réponse " + (i+1) } const regex = "\\" donnees = resultat const total = d3.sum(donnees, d => d.value) const gauche = [] const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }58:T1216,chartG03Q01_1 = { const formSup = formG03Q01SUP1 const form = formG03Q01 const choix = formSup['res'].value const keys = ["G03Q01[1]", "G03Q01[2]", "G03Q01[3]"] let filteredData = data.filter((d) => {if (d[keys[choix]] == undefined) {return false;}return true;}) const rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[choix]]) let donnees = rollup.map(([name, value]) => ({name, value})) const regex = "\\" const total = d3.sum(donnees, d => d.value) const gauche = [] //const order = ["Oui, un peu", "Oui, beaucoup", "Non, pas vraiment", "Non, pas du tout", "Je ne sais pas"] //donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); svg.selectAll('text') .call(wrap, 6); return svg.node(); }59:Tbf4,{ const form = formG03Q02 const form1 = formG03Q02_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G03Q02[1]', 'G03Q02[2]', 'G03Q02[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["rang 1", 0], ["rang 2", 0], ["rang 3", 0] ]); const nom = ["L’aspect financier de l’éducation et de l’entretien y compris à long terme ", "La difficulté à concilier vie professionnelle et familiale hors aspect financier", "Réduction du temps disponible pour soi / gestion du quotidien", "L’absence de soutien familial", "Des raisons de santé ", "Votre âge", "Les inquiétudes liées à l’avenir ou à la société ", "Autre "]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = "rang ".concat(j+1); obj.id = data[i]['id']; obj.Question = data[i][keys[j]].replace(regex,""); resData.push(obj); } obj = {}; } } let dataPlot=Plot.plot({ //title: titre, marginLeft: 250, marginBottom: 50, height: 600, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Meilleur accompagnement"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 20, anchor: "left", labelAnchor: "center"}) ] }) /*d3.select(dataPlot) .selectAll('text') .call(wrap, 4);*/ return dataPlot }5a:Tc21,{ const form = formG03Q02 const form1 = formG03Q02_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G03Q02[1]', 'G03Q02[2]', 'G03Q02[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["L’aspect financier de l’éducation et de l’entretien y compris à long terme ", 0], ["La difficulté à concilier vie professionnelle et familiale hors aspect financier", 0], ["Réduction du temps disponible pour soi / gestion du quotidien", 0], ["L’absence de soutien familial", 0], ["Des raisons de santé ", 0], ["Votre âge", 0], ["Les inquiétudes liées à l’avenir ou à la société ", 0], ["Autre ", 0] ]); const nom = ["rang 1", "rang 2", "rang 3"]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = data[i][keys[j]].replace(regex,""); obj.id = data[i]['id']; obj.Question = "rang ".concat(j+1); resData.push(obj); } obj = {}; } } console.log(resData) let dataPlot=Plot.plot({ //title: titre, marginLeft: 80, marginBottom: 50, height: 550, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Rangs"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 40, anchor: "left", labelAnchor: "center"}) ] }) d3.select(dataPlot) .selectAll('text') .call(wrap, 3); return dataPlot }5b:T1263,chartG03Q02 = { const formSup = formG03Q02SUP const form = formG03Q02 const choix = formSup['res'].nom let rollup = [] let donnees = [] let resultat = [] let temp = {} const keys = ["G03Q02[1]", "G03Q02[2]", "G03Q02[3]"] for (let i = 0; i < keys.length; i++) { let filteredData = data.filter((d) => {if (d[keys[i]] == undefined) {return false;}return true;}) rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[i]]); console.log(rollup) donnees = rollup.map(([name, value]) => ({name, value})) temp = donnees.filter(function (donnees) { return donnees.name === choix; }); resultat[i] = temp[0] resultat[i]["name"] = "En réponse " + (i+1) } donnees = resultat const total = d3.sum(donnees, d => d.value) const gauche = [] const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }5c:T117f,chartG03Q02_1 = { const formSup = formG03Q02SUP1 const form = formG02Q03 const choix = formSup['res'].value const keys = ["G03Q02[1]", "G03Q02[2]", "G03Q02[3]"] let filteredData = data.filter((d) => {if (d[keys[choix]] == undefined) {return false;}return true;}) const rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[choix]]) let donnees = rollup.map(([name, value]) => ({name, value})) const regex = /$(.)*$/i; const total = d3.sum(donnees, d => d.value) const gauche = [""] const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeObservable10); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+10) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); svg.selectAll('text') .call(wrap, 7); return svg.node(); }5d:Tc46,{ const form = formG03Q03 const form1 = formG03Q03_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G03Q03[1]', 'G03Q03[2]', 'G03Q03[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["rang 1", 0], ["rang 2", 0], ["rang 3", 0] ]); const nom = ["L’aspect financier de l’éducation et de l’entretien y compris à long terme ", "La difficulté à concilier vie professionnelle et familiale hors aspect financier", "Réduction du temps disponible pour soi ou pour l'aîné ou les aînés / gestion du quotidien", "L’absence de soutien familial", "Des raisons de santé ", "Votre âge", "Une expérience difficile de la parentalité ", "Les inquiétudes liées à l’avenir ou à la société ", "Autre "]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = "rang ".concat(j+1); obj.id = data[i]['id']; obj.Question = data[i][keys[j]].replace(regex,""); resData.push(obj); } obj = {}; } } let dataPlot=Plot.plot({ //title: titre, marginLeft: 250, marginBottom: 50, height: 600, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Meilleur accompagnement"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 20, anchor: "left", labelAnchor: "center"}) ] }) /*d3.select(dataPlot) .selectAll('text') .call(wrap, 4);*/ return dataPlot }5e:Tc7c,{ const form = formG03Q03 const form1 = formG03Q03_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G03Q03[1]', 'G03Q03[2]', 'G03Q03[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["L’aspect financier de l’éducation et de l’entretien y compris à long terme ", 0], ["La difficulté à concilier vie professionnelle et familiale hors aspect financier", 0], ["Réduction du temps disponible pour soi ou pour l'aîné ou les aînés / gestion du quotidien", 0], ["L’absence de soutien familial", 0], ["Des raisons de santé ", 0], ["Votre âge", 0], ["Une expérience difficile de la parentalité ", 0], ["Les inquiétudes liées à l’avenir ou à la société ", 0], ["Autre ", 0] ]); const nom = ["rang 1", "rang 2", "rang 3"]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = data[i][keys[j]].replace(regex,""); obj.id = data[i]['id']; obj.Question = "rang ".concat(j+1); resData.push(obj); } obj = {}; } } console.log(resData) let dataPlot=Plot.plot({ //title: titre, marginLeft: 80, marginBottom: 50, height: 550, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Rangs"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 40, anchor: "left", labelAnchor: "center"}) ] }) d3.select(dataPlot) .selectAll('text') .call(wrap, 3); return dataPlot }5f:T109e,chartG03Q03 = { const formSup = formG03Q03SUP const form = formG03Q03 const choix = formSup['res'].nom let rollup = [] let donnees = [] let resultat = [] let temp = {} const keys = ["G03Q03[1]", "G03Q03[2]", "G03Q03[3]"] for (let i = 0; i < keys.length; i++) { let filteredData = data.filter((d) => {if (d[keys[i]] == undefined) {return false;}return true;}) rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[i]]); donnees = rollup.map(([name, value]) => ({name, value})) temp = donnees.filter(function (donnees) { return donnees.name === choix; }); resultat[i] = temp[0] resultat[i]["name"] = "En réponse " + (i+1) } donnees = resultat const total = d3.sum(donnees, d => d.value) const gauche = [] //const order = ["Oui, un peu", "Oui, beaucoup", "Non, pas vraiment", "Non, pas du tout", "Je ne sais pas"] //donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }60:T1179,chartG03Q03_1 = { const formSup = formG03Q03SUP1 const form = formG03Q03 const choix = formSup['res'].value const keys = ["G03Q03[1]", "G03Q03[2]", "G03Q03[3]"] let filteredData = data.filter((d) => {if (d[keys[choix]] == undefined) {return false;}return true;}) const rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[choix]]) let donnees = rollup.map(([name, value]) => ({name, value})) const regex = /$(.)*$/i; const total = d3.sum(donnees, d => d.value) const gauche = [""] const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeObservable10); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); svg.selectAll('text') .call(wrap, 7); return svg.node(); }61:Tfae,chartG03Q04 = { const codeQuestion = 'G03Q04' const form = formG03Q04 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const gauche = ["Oui, beaucoup", "Non, pas vraiment", "Non, pas du tout"] const order = ["Oui, un peu", "Oui, beaucoup", "Non, pas vraiment", "Non, pas du tout", "Je ne sais pas"] donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI || !gauche.includes(d.data.name) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI || !gauche.includes(d.data.name) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || !gauche.includes(d.data.name) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }62:T1179,chartG04Q01 = { const codeQuestion = 'G04Q01' const form = formG04Q01 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const order = ["Oui , mais avec des limites (délais, coûts, information...)", "Oui, totalement", "Non, ils sont accessibles mais pas équitables selon les situations", "Non, ils ne sont ni accessibles ni équitables", "Je ne sais pas / pas concerné"] donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left if ((posB[0] < 0) && (posB[0] > (radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1)))) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } if ((posB[0] > 0) && (posB[0] < (radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1)))) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", "15px") .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); svg.selectAll('text') .call(wrap, 6); return svg.node(); }63:Te70,chartG05Q01 = { const codeQuestion = 'G05Q01' const form = formG05Q01 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); const donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }64:Te70,chartG05Q02 = { const codeQuestion = 'G05Q02' const form = formG05Q02 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); const donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }65:T10b6,chartG05Q03 = { const codeQuestion = 'G05Q03' const form = formG05Q03 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); const donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }66:T12cd,chartG05Q04 = { let keys = ['G05Q04[SQ001]', 'G05Q04[SQ002]', 'G05Q04[SQ003]']; let resData = []; let obj = {}; const form = formG05Q04 const nom = ["Le système est adapté à ma situation", "Il est difficile de s’y retrouver", "Le système prend insuffisamment en compte mes besoins"] for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] === "Oui") { obj.Response = data[i][keys[j]]; obj.id = data[i]['id']; obj.Question = nom[j]; resData.push(obj); obj = {}; } } } const rollup = d3.flatRollup(resData, (D) => D.length, (d) => d['Question']); const donnees = rollup.map(([name, value]) => ({name, value})) const nbReponses = d3.flatRollup(resData, (D) => D.length, (d) => d['id']); const total = nbReponses.length; const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); svg.selectAll('text') .call(wrap, 5); return svg.node(); }67:T10ba,chartG05Q05= { const codeQuestion = 'G05Q05' const form = formG05Q05 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); const donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }68:Tbd0,{ const form = formG05Q06 const form1 = formG05Q06_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G05Q06[1]', 'G05Q06[2]', 'G05Q06[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["rang 1", 0], ["rang 2", 0], ["rang 3", 0] ]); const nom = ["Plus de places en crèche et modes de garde plus accessibles", "Congés parentaux mieux rémunérés et plus longs", "Meilleure répartition des congés parentaux entre les deux parents", "Soutien financier direct plus important ", "Aménagement du temps de travail ou meilleure prise en compte de la parentalité au travail ", "Aucune", "Autre "]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = "rang ".concat(j+1); obj.id = data[i]['id']; obj.Question = data[i][keys[j]].replace(regex,""); resData.push(obj); } obj = {}; } } let dataPlot=Plot.plot({ //title: titre, marginLeft: 250, marginBottom: 50, height: 600, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Meilleur accompagnement"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 20, anchor: "left", labelAnchor: "center"}) ] }) /*d3.select(dataPlot) .selectAll('text') .call(wrap, 4);*/ return dataPlot }69:Td56,{ const form = formG05Q06 const form1 = formG05Q06_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G05Q06[1]', 'G05Q06[2]', 'G05Q06[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["Plus de places en crèche et modes de garde plus accessibles", 0], ["Congés parentaux mieux rémunérés et plus longs", 0], ["Meilleure répartition des congés parentaux entre les deux parents", 0], ["Soutien financier direct plus important ", 0], ["Aménagement du temps de travail ou meilleure prise en compte de la parentalité au travail ", 0], ["Aucune", 0], ["Autre ", 0] ]); ["Plus de places en crèche et modes de garde plus accessibles", "Congés parentaux mieux rémunérés et plus longs", "Meilleure répartition des congés parentaux entre les deux parents", "Soutien financier direct plus important ", "Aménagement du temps de travail ou meilleure prise en compte de la parentalité au travail ", "Aucune", "Autre "]; const nom = ["rang 1", "rang 2", "rang 3"]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = data[i][keys[j]].replace(regex,""); obj.id = data[i]['id']; obj.Question = "rang ".concat(j+1); resData.push(obj); } obj = {}; } } console.log(resData) let dataPlot=Plot.plot({ //title: titre, marginLeft: 80, marginBottom: 50, height: 550, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Rangs"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 40, anchor: "left", labelAnchor: "center"}) ] }) d3.select(dataPlot) .selectAll('text') .call(wrap, 3); return dataPlot }6a:T10a2,chartG05Q06 = { const formSup = formG05Q06SUP const form = formG05Q06 const choix = formSup['res'].nom let rollup = [] let donnees = [] let resultat = [] let temp = {} const keys = ["G05Q06[1]", "G05Q06[2]"/*, "G05Q06[3]"*/] for (let i = 0; i < keys.length; i++) { let filteredData = data.filter((d) => {if (d[keys[i]] == undefined) {return false;}return true;}) rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[i]]); donnees = rollup.map(([name, value]) => ({name, value})) temp = donnees.filter(function (donnees) { return donnees.name === choix; }); resultat[i] = temp[0] resultat[i]["name"] = "En réponse " + (i+1) } donnees = resultat const total = d3.sum(donnees, d => d.value) const gauche = [] //const order = ["Oui, un peu", "Oui, beaucoup", "Non, pas vraiment", "Non, pas du tout", "Je ne sais pas"] //donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }6b:T121f,chartG05Q06_1 = { const formSup = formG05Q06SUP1 const form = formG05Q06 const choix = formSup['res'].value const keys = ["G05Q06[1]", "G05Q06[2]", "G05Q07[3]"] let filteredData = data.filter((d) => {if (d[keys[choix]] == undefined) {return false;}return true;}) const rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[choix]]) let donnees = rollup.map(([name, value]) => ({name, value})) const regex = /$(.)*$/i; const total = d3.sum(donnees, d => d.value) const gauche = [""] //const order = ["Oui, un peu", "Oui, beaucoup", "Non, pas vraiment", "Non, pas du tout", "Je ne sais pas"] //donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); svg.selectAll('text') .call(wrap, 5); return svg.node(); }6c:Tbd0,{ const form = formG05Q07 const form1 = formG05Q07_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G05Q07[1]', 'G05Q07[2]', 'G05Q07[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["rang 1", 0], ["rang 2", 0], ["rang 3", 0] ]); const nom = ["Plus de places en crèche et modes de garde plus accessibles", "Congés parentaux mieux rémunérés et plus longs", "Meilleure répartition des congés parentaux entre les deux parents", "Soutien financier direct plus important ", "Aménagement du temps de travail ou meilleure prise en compte de la parentalité au travail ", "Aucune", "Autre "]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = "rang ".concat(j+1); obj.id = data[i]['id']; obj.Question = data[i][keys[j]].replace(regex,""); resData.push(obj); } obj = {}; } } let dataPlot=Plot.plot({ //title: titre, marginLeft: 250, marginBottom: 50, height: 600, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Meilleur accompagnement"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 20, anchor: "left", labelAnchor: "center"}) ] }) /*d3.select(dataPlot) .selectAll('text') .call(wrap, 4);*/ return dataPlot }6d:Td56,{ const form = formG05Q07 const form1 = formG05Q07_1 const pourcentage = form['normalize'] const affichageTexte = form1['affichage'] const couleurs = form1['couleurs'] const regex = /$(.)*$/i; let keys = ['G05Q07[1]', 'G05Q07[2]', 'G05Q07[3]']; //let fData = data.filter((d) => {if (tranches.valeur && (d.group !== tranches.valeur && d.minmaj !== tranches.valeur)) {return false;} return true;}); let {order, offset} = Likert([ ["Plus de places en crèche et modes de garde plus accessibles", 0], ["Congés parentaux mieux rémunérés et plus longs", 0], ["Meilleure répartition des congés parentaux entre les deux parents", 0], ["Soutien financier direct plus important ", 0], ["Aménagement du temps de travail ou meilleure prise en compte de la parentalité au travail ", 0], ["Aucune", 0], ["Autre ", 0] ]); ["Plus de places en crèche et modes de garde plus accessibles", "Congés parentaux mieux rémunérés et plus longs", "Meilleure répartition des congés parentaux entre les deux parents", "Soutien financier direct plus important ", "Aménagement du temps de travail ou meilleure prise en compte de la parentalité au travail ", "Aucune", "Autre "]; const nom = ["rang 1", "rang 2", "rang 3"]; let resData = []; let obj = {}; for (let i = 0; i < data.length; i++) { for (let j = 0; j < keys.length; j++) { if (data[i][keys[j]] !== undefined) { obj.Response = data[i][keys[j]].replace(regex,""); obj.id = data[i]['id']; obj.Question = "rang ".concat(j+1); resData.push(obj); } obj = {}; } } console.log(resData) let dataPlot=Plot.plot({ //title: titre, marginLeft: 80, marginBottom: 50, height: 550, width, x: pourcentage ? { tickFormat: Math.abs, label : "réponses (%)"} : { tickFormat: Math.abs, label: "nombre de réponses"}, y: { tickSize: 0, labelAnchor: "top" }, fy : {domain : nom, lineWidth: 8}, facet: { data: resData, y: "Question", label : "Rangs"}, color: { legend : true, domain: order, scheme: couleurs.valeur }, marks: [ Plot.barX( resData, Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count" }, { fill: "Response", stroke: "#777", strokeWidth:0.2, tip:true, order, offset } ) ), Plot.textX( resData, Plot.map( {text: affichageTexte ? (pourcentage ? (values) => values.map(d3.format(".1%")) : (values) => values) : (values) => values.map(value => "")}, Plot.stackX( Plot.groupZ( { x: pourcentage ? "proportion-facet" : "count", text: pourcentage ? "proportion-facet" : "count" }, { z: "Response", fontFamily : "Lato-Light,sans-serif", fontSize : "1.2em", fill : (d) => d.Response == "Aucune consultation au cours du dernier mois" ? "#fff" : "#000", order, offset } ) ) ) ), Plot.axisX({ticks: affichageTexte ? [] : 'x' }), Plot.axisFy({ lineWidth: 40, anchor: "left", labelAnchor: "center"}) ] }) d3.select(dataPlot) .selectAll('text') .call(wrap, 3); return dataPlot }6e:T1266,chartG05Q07 = { const formSup = formG05Q07SUP const form = formG05Q07 const choix = formSup['res'].nom let rollup = [] let donnees = [] let resultat = [] let temp = {} const keys = ["G05Q07[1]", "G05Q07[2]", "G05Q07[3]"] for (let i = 0; i < keys.length; i++) { let filteredData = data.filter((d) => {if (d[keys[i]] == undefined) {return false;}return true;}) rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[i]]); donnees = rollup.map(([name, value]) => ({name, value})) temp = donnees.filter(function (donnees) { return donnees.name === choix; }); resultat[i] = temp[0] resultat[i]["name"] = "En réponse " + (i+1) } donnees = resultat const regex ="//" const total = d3.sum(donnees, d => d.value) const gauche = [] const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }6f:T1185,chartG05Q07_1 = { const formSup = formG05Q07SUP1 const form = formG05Q07 const choix = formSup['res'].value const keys = ["G05Q07[1]", "G05Q07[2]", "G05Q07[3]"] let filteredData = data.filter((d) => {if (d[keys[choix]] == undefined) {return false;}return true;}) const rollup = d3.flatRollup(filteredData, (D) => D.length, (d) => d[keys[choix]]) let donnees = rollup.map(([name, value]) => ({name, value})) const regex = /$(.)*$/i; const total = d3.sum(donnees, d => d.value) const gauche = [""] const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); svg.selectAll('text') .call(wrap, 5); return svg.node(); }70:T10d8,chartG05Q08= { const codeQuestion = 'G05Q08' const form = formG05Q08 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); const donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const regex = "\\" const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI || midangle > (Math.PI + 3) ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI || midangle > (Math.PI + 3) ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }71:Te6e,chartG06Q01= { const codeQuestion = 'G06Q01' const form = formG06Q01 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); const donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.90 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }72:Te6f,chartG06Q02= { const codeQuestion = 'G06Q02' const form = formG06Q02 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); const donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.90 + 4) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }73:T110c,chartG06Q03= { const codeQuestion = 'G06Q03' const form = formG06Q03 const labelHeight = 15 let filteredData = data.filter((d) => {if (d[codeQuestion] == undefined) {return false;}return true;}) const test = d3.flatRollup(filteredData, (D) => D.length, (d) => d[codeQuestion]); let donnees = test.map(([name, value]) => ({name, value})) const total = d3.sum(donnees, d => d.value) const order = ["Oui, dans une certaine mesure", "Oui, tout à fait", "Non, pas vraiment", "Non, pas du tout", "Je ne sais pas"] donnees = reOrder (order, donnees) const height = Math.min(width, 500); const radius = Math.min(width, height) / 2; const regex = "\\" const arc = d3.arc() .innerRadius(radius * 0.4) // This is the size of the donut hole .outerRadius(radius * 0.8) const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(donnees.map(d => d.name)) .range(d3.schemeDark2); const svg = d3.create("svg") .attr("width", '1200px') .attr("height", height) .attr("viewBox", [(-width+100) / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto;"); // The arc generator const innerArc = d3.arc() .innerRadius(radius * 0.6) // This is the size of the donut hole .outerRadius(radius * 0.6) // Another arc that won't be drawn. Just for labels positioning const outerArc = d3.arc() .innerRadius(radius * 0.8+25) .outerRadius(radius * 0.8+25) const labels= [{nom:"test"}, {nom:"test2"}] svg.append("g") .selectAll() .data(pie(donnees)) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .selectAll() .data(pie(donnees)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(form['normalize'] ? d => Math.round(d.data.value/d3.sum(donnees, d => d.value)*100) + "%" : d => d.data.value.toLocaleString("fr-FR") )); svg .selectAll('allPolylines') .data(pie(donnees)) .join('polyline') .attr("stroke", d => color(d.data.name)) .style("fill", "none") .attr("stroke-width", 1) .attr('points', function(d) { const posA = innerArc.centroid(d) // line insertion in the slice const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that const posC = outerArc.centroid(d); // Label position = almost the same as posB const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left const testPosC = radius * 0.85 * (midangle < Math.PI ? 1 : -1) if ( (posB[0] < 0) && (posB[0] > testPosC) || (posB[0] < 0) && (testPosC > 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } else if ( (posB[0] > 0) && (posB[0] < testPosC) || (posB[0] > 0) && (testPosC < 0) ) { posC[0] = radius * 0.85 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left } return [posA, posB, posC] }) svg .selectAll('allLabels') .data(pie(donnees)) .join('text') .text(d => d.data.name.replace(regex,"")) .attr("font-size", 15) .attr('transform', function(d) { const pos = outerArc.centroid(d); const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 pos[0] = (radius * 0.85 + 15) * (midangle < Math.PI ? 1 : -1); return `translate(${pos})`; }) .style('text-anchor', function(d) { const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 return (midangle < Math.PI ? 'start' : 'end') }) .style("alignment-baseline", "middle") .style("fill", d => color(d.data.name)); return svg.node(); }74:Tea9,function populationPyramidPlot( data, { gender = "gender", group = "group", value = "population", domain, // Arrays of values from 'group'. Can be use to assign particular order facet, // The key of value based on which to generate facets facetDirection = "x", title, marginRight, marginLeft, marginBottom, normalize = false, width = facet ? 960: 1200, // Width of the plot height = facet ? undefined : 500, // Height of the plot colorScheme = schemeContrasting, // Categoriecal color schemes like: d3.schemeAccent, d3.schemeCategory10,... gap = 50 // Gap between two set of bar charts } = {} ) { const genderAccessor = accessor(gender); const groupAccessor = accessor(group); const valueAccessor = accessor(value); domain = domain ?? [...new Set(data.map(groupAccessor))]; facetDirection = ["x", "y"].includes(facetDirection) ? facetDirection : "x"; const genders = [...new Set(data.map(genderAccessor))].sort().reverse(); const maxValue = d3.max(data, valueAccessor); const ticks = d3.ticks(0, maxValue, 5); const xAxis = [ Plot.text( data, Plot.selectFirst({ x: 0, y: group, dx: -gap, dy: 80, filter: (d) => genderAccessor(d) === genders[0], text: (d) => `← ${genderAccessor(d).toUpperCase()}`, textAnchor: "end", fontWeight: "bold" }) ), Plot.text( data, Plot.selectFirst({ x: 0, y: group, dx: gap, dy: 80, filter: (d) => genderAccessor(d) === genders[1], text: (d) => `${genderAccessor(d).toUpperCase()} →`, textAnchor: "start", fontWeight: "bold" }) ) ]; const yAxis = [Plot.text(domain, { x: 0, text: (d) => d, y: (d) => d })]; const plot = Plot.plot({ title, width, height, marginBottom, marginLeft, marginRight, ...(facet && { facet: { label: null, data: data, [facetDirection]: facet } }), fx: { axis: "top", padding: 0.5, label: "" }, color: { type: "categorical", legend: false, domain: genders, range: colorScheme }, x: { label: null, tickFormat: normalize ? "%" : "Math.abs", // Only absolute value (without sign) is shown on ticks. Needed to show axis: null }, y: { label: "Ages", domain, reverse: true, axis: null, padding: 1 / 15, align: 1 }, marks: [ xAxis, // customized yAxis, // customized Plot.barX(data, { y: group, x: (d) => -d.population, dx: -gap, fill: gender, filter: (d) => genderAccessor(d) === genders[0], title }), Plot.barX(data, { y: group, x: (d) => d.population, dx: gap, fill: gender, filter: (d) => genderAccessor(d) === genders[1], title }), Plot.text(data, { y: group, x: (d) => -valueAccessor(d), dx: -60, filter: (d) => genderAccessor(d) === genders[0], text : normalize ? (d) => d3.format(".1%")(d.population) : (d) => d.population, textAnchor: "end", fill: colorScheme[0] }), Plot.text(data, { y: group, x: (d) => d.population, dx: 60, filter: (d) => genderAccessor(d) === genders[1], text : normalize ? (d) => d3.format(".1%")(d.population) : (d) => d.population, textAnchor: "start", fill: colorScheme[1] }) ] }); d3.select(plot) .selectAll("[aria-label=fx-axis] .tick text") .style("font-weight", "bold") //.style("font-size", "1rem"); return plot; }75:[{"id":"66708e860d8ea44139b6abc48dcdb857a987d4f3e5cb403eca688943cc7d67b69bf61a5e9f218d30142f6a8ed1a7fb6e3589426a051febc26e63827a4bd3a984","href":"https://static.observableusercontent.com/files/66708e860d8ea44139b6abc48dcdb857a987d4f3e5cb403eca688943cc7d67b69bf61a5e9f218d30142f6a8ed1a7fb6e3589426a051febc26e63827a4bd3a984","name":"reponses_finales_stat.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1764922058998.558,"size":4388794}] 29:{"id":"260d83cd9b2a18e4","slug":null,"title":"Natalité","thumbnail":"7c4b934c51cb2a953786d9a6b9c1d0e5083f39f755d7398441197aaf14fbe0b4","access_level":"public","create_time":"$D2025-10-27T17:43:00.649Z","update_time":"$D2025-12-08T12:53:22.518Z","view_time":null,"first_public_time":"$D2025-10-29T17:08:26.722Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4030f95112e47d8f","login":"dcdp","name":"DCDP","avatar_url":"https://avatars-next.observableusercontent.com/749d204ce159321bc64534db35a7d70b762d2755a3e91eea597dfbda436dedd4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1232,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"098c8028c708e540","login":"frederic-poli","name":"Frederic poli","avatar_url":"https://avatars-next.observableusercontent.com/9391eeb738294d41d4a14d52fb324f2d8ed16a4208d566b586622ffe8de6fa07","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4030f95112e47d8f","login":"dcdp","name":"DCDP","avatar_url":"https://avatars-next.observableusercontent.com/749d204ce159321bc64534db35a7d70b762d2755a3e91eea597dfbda436dedd4","tier":"starter_2024","role":"editor"},{"type":"individual","id":"098c8028c708e540","login":"frederic-poli","name":"Frederic poli","avatar_url":"https://avatars-next.observableusercontent.com/9391eeb738294d41d4a14d52fb324f2d8ed16a4208d566b586622ffe8de6fa07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Natalité","cells":[{"id":0,"value":"# Natalité","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":598,"value":"

Mise à jour des données : 4 décembre 2025

Votre profil

G01Q01 - Pyramides des âges

G01Q03 - Quelle est votre situation familiale actuelle ?

G01Q04 - Combien d’enfants, y compris majeurs, avez-vous actuellement ?

G01Q05 - À quel âge avez-vous eu votre premier enfant ?

G01Q06 - Résidez-vous en France hexagonale, en outre-mer ou à l'étranger ?

G01Q07 - Quel est votre lieu de résidence ?

G01Q08 - Quel est le niveau de revenu mensuel du foyer (net, environ) ?

Vos aspirations familiales

G02Q01 - Quel est pour vous le nombre idéal d’enfants dans une famille ?

G02Q02 - Combien d’enfants souhaiteriez-vous personnellement avoir (au total, si possible) ?

G02Q03 - À votre avis, à quel âge est-il idéal d’avoir un premier enfant ?

Les freins à la natalité

G03Q01 - Avez-vous déjà reporté ou abandonné un projet d’enfant pour l’une des raisons suivantes ? (jusqu’à trois réponses, par ordre d’importance)

Mise en forme :

`,\n h: Inputs.range([0, 900], {step: 1, value : 600, label: \"Hauteur\"}),\n mt: Inputs.range([0, 150], {step: 1, value : 60, label: \"Marge du haut\"}),\n mb: Inputs.range([0, 200], {step: 1, value : 60, label: \"Marge du bas\"}),\n mr: Inputs.range([0, 150], {step: 1, value : 60, label: \"Marge de droite\"}),\n ml: Inputs.range([0, 150], {step: 1, value : 60, label: \"Marge de gauche\"}),*/\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"{\n const choix = formG03Q01SUP['res'].nom\n return htl.html`

${choix}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"viewof formG03Q01SUP1 = Inputs.form({\n res:Inputs.select(choix_liste,{ label: \"Dans l'ordre d'importance, quelle réponse :\", format: x => x.nom, value: G03Q01_liste.find(t => t.value === \"0\") })\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"{\n const choix = formG03Q01SUP1['res'].nom\n return htl.html`

${choix}

G03Q02 - Quels sont les freins ou difficultés vous ayant conduit à renoncer à avoir un premier enfant ?

G03Q03 - Quels sont les freins ou difficultés vous ayant conduit à renoncer à avoir un enfant supplémentaire ?

${choix}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"$5f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"viewof formG03Q03SUP1 = Inputs.form({\n res:Inputs.select(choix_liste,{ label: \"Dans l'ordre d'importance, quelle réponse :\", format: x => x.nom, value: G03Q03_liste.find(t => t.value === \"0\") })\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"$60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"

G03Q04 - Pensez-vous que la répartition des tâches domestiques et parentales entre femmes et hommes influence la décision d’avoir des enfants ?

Parcours de procréation et santé

G04Q01 - Selon vous, les parcours de PMA (procréation médicalement assistée) en France sont-ils suffisamment accessibles et équitables ?

Le rôle de l’État et des politiques publiques

G05Q01 - À votre avis les politiques publiques peuvent-elles agir efficacement sur les questions de natalité ?

G05Q02 - Seriez-vous favorable à ce que l’État affirme clairement des objectifs en matière de préservation de la fécondité ou de maintien du seuil de renouvellement des générations ?

G05Q03 - Avez-vous personnellement une bonne connaissance des dispositifs d’aide à la parentalité proposés par les pouvoirs publics (prime de naissance, congés parental, complément libre choix du mode de garde, réduction de cotisations pour emploi à domicile, réductions fiscales, allocation rentrée scolaire, etc) ?

G05Q04 - Si vous êtes bénéficiaire d’une ou plusieurs de ces aides, quel regard portez-vous sur le système mis en place pour alléger la charge financière liée à l’arrivée et à l’éducation d’un enfant ? (plusieurs réponses possibles)

G05Q05 - Avez-vous une bonne connaissance des avantages en matière de retraite liés au fait d’avoir élevé des enfants (majorations de durée d’assurance, bonification du montant de la pension, assurance vieillesse des parents au foyer) ?

G05Q06 - Dans votre situation, quelles mesures seraient les plus efficaces pour vous encourager à avoir un premier enfant ?

${choix}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"$6a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"viewof formG05Q06SUP1 = Inputs.form({\n res:Inputs.select(choix_liste,{ label: \"Dans l'ordre d'importance, quelle réponse :\", format: x => x.nom, value: G05Q07_liste.find(t => t.value === \"0\") })\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"{\n const choix = formG05Q06SUP1['res'].nom\n return htl.html`

${choix}

G05Q07 - Vous avez déjà un ou plusieurs enfants, quelles mesures ou aides publiques pourraient vous encourager à avoir un enfant supplémentaire ?
Trois réponses maximum classées par odre d'importance

${choix}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"$6e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"viewof formG05Q07SUP1 = Inputs.form({\n res:Inputs.select(choix_liste,{ label: \"Dans l'ordre d'importance, quelle réponse :\", format: x => x.nom, value: G05Q07_liste.find(t => t.value === \"0\") })\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"{\n const choix = formG05Q07SUP1['res'].nom\n return htl.html`

${choix}

G05Q08 - Au regard de votre expérience personnelle, les aides que vous percevez (RSA, APL, prime d’activité, allocations familiales…) prennent-elles suffisamment en compte la taille des familles ?

Regard sur l’avenir et normes sociales

G06Q01 - Les inquiétudes concernant le climat et l’avenir de la planète influencent-elles votre projet d’avoir des enfants ou d'autres enfants ?

G06Q02 - Les inquiétudes concernant l’évolution de la société et la pérennité du modèle français d’accès aux soins et à l’éducation influencent-elles votre projet d’avoir des enfants ou d'autres enfants ?

G06Q03 - Selon vous, la société valorise-t-elle suffisamment le rôle parental ?

Données techniques

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"G03Q01_liste = [{nom : \"Oui, à cause de mes études/de ma carrière professionnelle\"}, {nom:\"Oui, à cause de difficultés économiques\"}, {nom:\"Oui, à cause de ma situation de logement\"}, {nom:\"Oui, pour des raisons liées à mon état de santé (âge, infertilité…)\"}, {nom:\"Non, je n’ai jamais reporté de projet d’enfant\"}, {nom:\"Je n’ai pas de projet d’enfant\"}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"G03Q02_liste = [{nom : \"L’aspect financier de l’éducation et de l’entretien y compris à long terme (logement, alimentation, énergie, frais de garde, coût des études…)\"}, {nom : \"La difficulté à concilier vie professionnelle et familiale hors aspect financier\"}, {nom : \"Réduction du temps disponible pour soi / gestion du quotidien\"}, {nom : \"L’absence de soutien familial\"}, {nom : \"Des raisons de santé (fertilité, risques liés à la grossesse, fatigue…)\"}, {nom : \"Votre âge\"}, {nom : \"Les inquiétudes liées à l’avenir ou à la société (climat, politique, géopolitique, insécurité, situation économique du pays…)\"}, {nom : \"Autre (précisez)\"}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"G03Q03_liste = [{nom : \"L’aspect financier de l’éducation et de l’entretien y compris à long terme (logement, alimentation, énergie, frais de garde, coût des études…)\"}, {nom : \"La difficulté à concilier vie professionnelle et familiale hors aspect financier\"}, {nom : \"Réduction du temps disponible pour soi ou pour l'aîné ou les aînés / gestion du quotidien\"}, {nom : \"L’absence de soutien familial\"}, {nom : \"Des raisons de santé (fertilité, risques liés à la grossesse, fatigue…)\"}, {nom : \"Votre âge\"}, {nom : \"Une expérience difficile de la parentalité (dépression post-partum, burn-out parental, enfant difficile…)\"}, {nom : \"Les inquiétudes liées à l’avenir ou à la société (climat, politique, géopolitique, insécurité, situation économique du pays…)\"}, {nom : \"Autre (précisez)\"}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"G05Q07_liste = [{nom : \"Plus de places en crèche et modes de garde plus accessibles\"}, {nom : \"Congés parentaux mieux rémunérés et plus longs\"}, {nom : \"Meilleure répartition des congés parentaux entre les deux parents\"}, {nom : \"Soutien financier direct plus important (allocations, fiscalité, majoration de retraite, etc)\"}, {nom : \"Aménagement du temps de travail ou meilleure prise en compte de la parentalité au travail (temps partiel choisi, télétravail, flexibilité, sensibilisation aux contraintes familiales, participation des employeurs aux frais de garde…)\"}, {nom : \"Aucune\"}, {nom : \"Autre (précisez)\"}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"choix_liste = [{nom : \"Première réponse\", value : \"0\"}, {nom : \"Deuxième réponse\", value : \"1\"}, {nom: \"Troisième réponse\", value: \"2\"}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"workbook = FileAttachment(\"reponses_finales_stat.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {colorSchemes} from \"4a90329ce815693a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$74","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = workbook.sheet(0, {\n headers: true\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import {schemeContrasting} from \"@categorise/data-vis-style-guide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"import {schemes} from \"4a90329ce815693a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"function accessor(keyOrFn) {\n if (typeof keyOrFn === \"function\") return keyOrFn;\n\n return (d) => d[keyOrFn];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"function reOrder (order, donnees) {\n let reorder = []\n for (let i = 0; i < donnees.length; i++) {\n for (let j = 0; j < order.length; j++) {\n if (donnees[i].name === order[j]) {\n reorder[j]=donnees[i]; \n }\n }\n }\n return reorder\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"function change_label (label, donnees) {\n for (let i = 0; i < donnees.length; i++) {\n donnees[i][\"name\"] = label[i]; \n }\n return donnees\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {sens_plot} from \"4a90329ce815693a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {ns} from \"4a90329ce815693a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import {filtreSansReponse} from \"4a90329ce815693a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {filtreNA} from \"4a90329ce815693a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import {Likert} from \"4a90329ce815693a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"function wrap(text, width) {\n text.each(function() {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 0.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")) || 0,\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", dy + \"em\"),\n i = 0;\n while (word = words.pop()) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (i > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", (++lineNumber * lineHeight) + 1 + dy + \"em\").text(word);\n i = 0\n }\n i++\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1114,"value":"workbook1 = FileAttachment(\"reponses_finales_stat.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"workbook1.sheetNames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"data1 = workbook1.sheet(0, {\n headers: false,\n // range: \"A1:J10\"\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"data1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W75","stdlib":"1"}} 24:null

Mise à jour des données : 4 décembre 2025

Votre profil

G01Q01 - Pyramides des âges

G01Q03 - Quelle est votre situation familiale actuelle ?

G01Q04 - Combien d’enfants, y compris majeurs, avez-vous actuellement ?

G01Q05 - À quel âge avez-vous eu votre premier enfant ?

G01Q06 - Résidez-vous en France hexagonale, en outre-mer ou à l'étranger ?

G01Q07 - Quel est votre lieu de résidence ?

G01Q08 - Quel est le niveau de revenu mensuel du foyer (net, environ) ?

Vos aspirations familiales

G02Q01 - Quel est pour vous le nombre idéal d’enfants dans une famille ?

G02Q02 - Combien d’enfants souhaiteriez-vous personnellement avoir (au total, si possible) ?

G02Q03 - À votre avis, à quel âge est-il idéal d’avoir un premier enfant ?

Les freins à la natalité

G03Q01 - Avez-vous déjà reporté ou abandonné un projet d’enfant pour l’une des raisons suivantes ? (jusqu’à trois réponses, par ordre d’importance)

Mise en forme :

${choix}

${choix}

G03Q02 - Quels sont les freins ou difficultés vous ayant conduit à renoncer à avoir un premier enfant ?

G03Q03 - Quels sont les freins ou difficultés vous ayant conduit à renoncer à avoir un enfant supplémentaire ?

${choix}

G03Q04 - Pensez-vous que la répartition des tâches domestiques et parentales entre femmes et hommes influence la décision d’avoir des enfants ?

Parcours de procréation et santé

G04Q01 - Selon vous, les parcours de PMA (procréation médicalement assistée) en France sont-ils suffisamment accessibles et équitables ?

Le rôle de l’État et des politiques publiques

G05Q01 - À votre avis les politiques publiques peuvent-elles agir efficacement sur les questions de natalité ?

G05Q02 - Seriez-vous favorable à ce que l’État affirme clairement des objectifs en matière de préservation de la fécondité ou de maintien du seuil de renouvellement des générations ?

G05Q04 - Si vous êtes bénéficiaire d’une ou plusieurs de ces aides, quel regard portez-vous sur le système mis en place pour alléger la charge financière liée à l’arrivée et à l’éducation d’un enfant ? (plusieurs réponses possibles)

G05Q05 - Avez-vous une bonne connaissance des avantages en matière de retraite liés au fait d’avoir élevé des enfants (majorations de durée d’assurance, bonification du montant de la pension, assurance vieillesse des parents au foyer) ?

G05Q06 - Dans votre situation, quelles mesures seraient les plus efficaces pour vous encourager à avoir un premier enfant ?

${choix}

${choix}

G05Q07 - Vous avez déjà un ou plusieurs enfants, quelles mesures ou aides publiques pourraient vous encourager à avoir un enfant supplémentaire ?Trois réponses maximum classées par odre d'importance

${choix}

${choix}

G05Q08 - Au regard de votre expérience personnelle, les aides que vous percevez (RSA, APL, prime d’activité, allocations familiales…) prennent-elles suffisamment en compte la taille des familles ?

Regard sur l’avenir et normes sociales

G06Q01 - Les inquiétudes concernant le climat et l’avenir de la planète influencent-elles votre projet d’avoir des enfants ou d'autres enfants ?

G06Q02 - Les inquiétudes concernant l’évolution de la société et la pérennité du modèle français d’accès aux soins et à l’éducation influencent-elles votre projet d’avoir des enfants ou d'autres enfants ?

G06Q03 - Selon vous, la société valorise-t-elle suffisamment le rôle parental ?

Données techniques

G05Q07 - Vous avez déjà un ou plusieurs enfants, quelles mesures ou aides publiques pourraient vous encourager à avoir un enfant supplémentaire ?
Trois réponses maximum classées par odre d'importance