2a:null 2b:["$","title",null,{"children":"YLPieChart | linard-y | Observable"}] 31:T2ed1,YLPieChart = (data, config={}) => { const id = "ID" + Math.floor(Math.random() * 1000000); const svgWidth = config?.svgWidth ? config.svgWidth : 1100; const svgHeight = config?.svgHeight ? config.svgHeight : 600 const defaultFont = config?.defaultFont ? config.defaultFont : "Arial"; const defaultColor = config?.defaultColor ? config.defaultColor : "000000-ffff-e6deb2-ecb45b-ed8238-D9736A-ab90a4-6a8782-80B266-9ac1ae-947f67"; // Create the SVG container. const svg = d3.create("svg") .attr("class", "svg-chart-container") .attr("width", svgWidth) .attr("height", svgHeight) .attr("style", "max-width: 100%; height: auto;") .attr("font-family", defaultFont); const marginTop = config?.marginTop ? config.marginTop : 50; const marginBottom = config?.marginBottom ? config.marginBottom : 100; const marginRight = config?.marginRight ? config.marginRight : 100; const marginLeft = config?.marginLeft ? config.marginLeft : 180; const chartWidth = svgWidth - marginRight - marginLeft; const chartHeight = svgHeight - marginBottom - marginTop; const radius = Math.min(chartWidth, chartHeight) / 2; var innerRadius = radius * 0.7; if (innerRadius < 100) innerRadius = radius * 0.8; const chart = svg.append('g') .attr("class", "chart") .attr( "transform", "translate(" + marginLeft + "," + marginTop + ")" ); const centerPoint = chart.append('g') .attr("class", "center-point") .attr( "transform", "translate(" + chartWidth / 2 + "," + chartHeight / 2 + ")" ); const defaultFontSize = config?.defaultFontSize ? config.defaultFontSize : 12; const percentCircleRadius = config?.percentCircleRadius ? config.percentCircleRadius : 14; const labelMargin = config?.labelMargin ? config.labelMargin : 20; const defaultTextFill = config?.defaultTextFill ? config.defaultTextFill : "#6F68A7"; const backCircleColor = config?.backCircleColor ? config.backCircleColor : "#EAF0FB"; const channels = ({x:config?.x ? config.x : "name", y:config?.y ? config.y : "value"}) const nameAccessor = (d) => d[channels.x]; const valueAccessor = (d) => d[channels.y]; const round = config?.round ? config.round : (d, sum) => Math.round((valueAccessor(d.data) / sum) * 100); const centerText = config?.centerText ? config.centerText : ``; const centerTextFontFamily = config?.centerTextFontFamily ? config.centerTextFontFamily : defaultFont; const groupingText = config?.groupingText ? config.groupingText : `Count`; const groupingTextFontFamily = config?.groupingTextFontFamily ? config.groupingTextFontFamily : defaultFont; const pieTextFontFamily = config?.pieTextFontFamily ? config.pieTextFontFamily : defaultFont; const dataTextFontFamily = config?.dataTextFontFamily ? config.dataTextFontFamily : defaultFont; const valueFormat = config?.valueFormat ? config.valueFormat : (d) => (d.toFixed(0))+ " m³"; const minAllowed = config?.minAllowed ? config.minAllowed : 0.02; const othersText = config?.othersText ? config.othersText :"Others"; const rect = svg.node().getBoundingClientRect(); const ctx = DOM.context2d(rect.width, rect.height); const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(radius) .padAngle(0.02) .cornerRadius(1); const arcOuter = d3.arc() .innerRadius(arc.outerRadius()() + 2) .outerRadius(arc.outerRadius()() + 10); const arcLabel = d3.arc() .innerRadius(arcOuter.outerRadius()()) .outerRadius(arcOuter.outerRadius()() + 30); const pie = d3.pie() .value(valueAccessor) .sort(null); ////////// function drawCenterTexts() { const sum = d3.sum(data.map(valueAccessor)); const fo = centerPoint.append("foreignObject") .attr("class", "center-for-text") .attr("pointer-events", "none") .attr("x", -innerRadius) .attr("y", -innerRadius) .attr("width", innerRadius * 2) .attr("height", innerRadius * 2); fo.append("xhtml:div") .attr("class", "for-center-div") .html(`

${centerText}
${groupingText}
${valueFormat(sum)}

`); } function getTextWidth(text, { fontSize = 14, fontWeight = 400 } = {}) { ctx.font = `${fontWeight || ""} ${fontSize}px ${defaultFont} `; const measurement = ctx.measureText(text); return measurement.width+100; } function getPieData() { const sum = d3.sum(data, valueAccessor); let _data = data.filter((dataItem) => valueAccessor(dataItem) / sum >= minAllowed); const others = data.filter((dataItem) => valueAccessor(dataItem) / sum < minAllowed); if (others.length > 1) { let tmp = {}; tmp["items"] = others; tmp[channels.x] = othersText; tmp[channels.y] = d3.sum(others, valueAccessor); _data.push(tmp); } else { _data = data; } return pie(_data.sort((a,b)=>valueAccessor(a)/sum isRightSide(d)); const left = pieData.filter((d) => !isRightSide(d)); pieData.forEach((d, i, arr) => { d.xOffset = 0; if ((i != 0 && i != arr.length - 1) || arr.length < 20) { d.yOffset = 0; } else { d.yOffset = -30; } }); const process = (d, i, arr) => { if (i < 1) return; const prev = arr[i - 1]; const curr = d; const yPrev = arcLabel.centroid(prev)[1] + prev.yOffset; const yCurr = arcLabel.centroid(curr)[1]; if (isRightSide(curr) && yPrev + percentCircleRadius * 2 > yCurr) { curr.yOffset = yPrev + percentCircleRadius * 2 - yCurr + 2; } else if (!isRightSide(curr) && yPrev + percentCircleRadius * 2 > yCurr) { curr.yOffset = yPrev + percentCircleRadius * 2 - yCurr + 2; if (arr.length > 4) { if (i < 4 + arr.length / 10) { //curr.xOffset = -10-arr.length/2*1; } if (arr.length > 9) { curr.xOffset = 0; } } } }; right.forEach(process); left.reverse().forEach(process); let tmp = {}; tmp[channels.y]=1; centerPoint.append('path') .attr("class", "pie-background") .data(pie([tmp])) .attr("d", arcOuter) .attr("fill", backCircleColor); const pieG = centerPoint.append('g') .selectAll() .data(pieData); pieG.join("path") .attr("class", "pie-paths") .attr("d", arc) .attr("cursor", "pointer") .attr("fill", (d,i) => getColor(d,i)); pieG.join('polyline') .attr("class", "pie-label-line") .attr("points", (d) => { let textWidth = getTextWidth(d.data[channels.x] || "", { fontSize: defaultFontSize }) + labelMargin; if (isRightSide(d)) { textWidth = -textWidth;} return ` ${arc.centroid(d)[0]}, ${arc.centroid(d)[1]} ${arcLabel.centroid(correct(d))[0] + d.xOffset}, ${arcLabel.centroid(correct(d))[1] + d.yOffset} ${arcLabel.centroid(correct(d))[0] - textWidth + d.xOffset}, ${arcLabel.centroid(correct(d))[1] + d.yOffset} `; }) .attr("stroke", defaultTextFill) .attr("fill", "none") .attr("pointer-events", "none") .style("opacity", getLabelOpacity); pieG.join('circle') .attr("class", "pie-center-points") .attr("cx", (d) => arc.centroid(d)[0]) .attr("cy", (d) => arc.centroid(d)[1]) .style("opacity", getLabelOpacity) .attr("fill", "#FFFFFF") .attr("r", 2) .attr("pointer-events", "none"); pieG.join('text') .attr("class", "pie-texts") .text((d) => nameAccessor(d.data)) .attr("x", (d) => { let x = arcLabel.centroid(correct(d))[0]; if (isRightSide(d)) x += labelMargin - 5; else x -= labelMargin - 5; return x + d.xOffset; }) .attr("text-anchor", (d) => (isRightSide(d) ? "start" : "end")) .attr("font-size", defaultFontSize+2) .attr("font-family", pieTextFontFamily) .attr("font-weight", 'bold') .attr("y", (d) => arcLabel.centroid(correct(d))[1] - 4 + d.yOffset) .attr("fill", defaultTextFill) .style("opacity", getLabelOpacity); pieG.join('text') .attr("class", "pie-data-texts") .text((d) => valueFormat(valueAccessor(d.data))) .attr("x", (d) => { let x = arcLabel.centroid(correct(d))[0]; if (isRightSide(d)) x += labelMargin - 5; else x -= labelMargin + 15; return x + d.xOffset; }) .attr("text-anchor", (d) => (isRightSide(d) ? "start" : "end")) .attr("font-size", defaultFontSize-2) .attr("font-family", dataTextFontFamily) .attr("y", (d) => arcLabel.centroid(correct(d))[1] + 10 + d.yOffset) .attr("fill", defaultTextFill) .style("opacity", getLabelOpacity); pieG.join('text') .attr("class", "pie-percent-texts") .text((d) => round(d, sum) + "%") .attr("alignment-baseline", "middle") .attr("x", (d) => { let textWidth = getTextWidth(d.data[channels.x] || "", { fontSize: defaultFontSize }) + labelMargin + percentCircleRadius; if (isRightSide(d)) { textWidth = -textWidth;} return arcLabel.centroid(correct(d))[0] - textWidth + d.xOffset; }) .attr("y", (d) => arcLabel.centroid(correct(d))[1] + d.yOffset) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("font-family", defaultFont) .attr("fill", defaultTextFill) .style("opacity", getLabelOpacity); pieG.join('circle') .attr("class", "pie-percent-circle") .attr("stroke", defaultTextFill) .attr("r", percentCircleRadius) .style("opacity", getLabelOpacity) .attr("fill", "none") .attr("cx", (d) => { let textWidth = getTextWidth(d.data[channels.x] || "", { fontSize: defaultFontSize }) + labelMargin + percentCircleRadius; if (isRightSide(d)) { textWidth = -textWidth; } return arcLabel.centroid(correct(d))[0] - textWidth + d.xOffset; }) .attr( "cy", (d) => arcLabel.centroid(correct(d))[1] - 1.1 + d.yOffset ); } /////// function getLabelOpacity(pieItem) { if (Math.abs(pieItem.yOffset) > 130) { return 0; } return 1; } function getColor(d,i) { const sum = d3.sum(data.map(valueAccessor)); let codeColor = defaultColor.split("-").map((d) => `#${d}`).reverse() return ( d.data.color || codeColor[i] //d3.schemeSet1[hashCode(d.data[channels.x] + "") % d3.schemeSet1.length] ); } function isRightSide(n) { const d = correct(n); const midAngle = (d.startAngle + d.endAngle) / 2; if (midAngle <= Math.PI) return true; return false; } function correct(d) { return Object.assign({}, d, { startAngle: d.startAngle, endAngle: d.endAngle }); } // Get hashcode from string function hashCode(s) { for (var i = 0, h; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0; return Math.abs(h); } ////////// drawSlices(data); drawCenterTexts(); return svg.node(); } 32:[{"id":"af3bb4265617706c9a4b5df30c81df8032d9a372e9295f0cbc416a5994100c00c0e5decd67f899e911514b4e95aefb7f0ca6d7e47111f3fedf0ea14d72742f22","href":"https://static.observableusercontent.com/files/af3bb4265617706c9a4b5df30c81df8032d9a372e9295f0cbc416a5994100c00c0e5decd67f899e911514b4e95aefb7f0ca6d7e47111f3fedf0ea14d72742f22","name":"Surfaces_agricoles.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1733732771906.784,"size":167187}] 2e:{"id":"dea1853993bbd40d","slug":"ylpiechart","title":"YLPieChart","thumbnail":"d8f7c6a27a9d0ac75dbff23b58ce5a9e4707f5a7f06ab092a6d972030e1ca43d","access_level":"public","create_time":"$D2024-12-05T09:05:55.971Z","update_time":"$D2026-07-13T08:45:48.501Z","view_time":null,"first_public_time":"$D2024-12-09T11:54:15.473Z","fork":{"id":"cfd975ba56294bd5","slug":"donut-chart/2","title":"Donut chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":2,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":911,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"},{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"YLPieChart","cells":[{"id":859,"value":"# YLPieChart","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"md`Usage:\n~~~js\nimport {YLPieChart} from \"@linard-y/ylpiechart\"\n\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"Le diagramme ci-dessous illustre la répartition des terres arables en France en ${year} par unité de surface (hectare). Source : [Agreste - Statistique agricole annuelle - SSP/ Ministère en charge de l'agriculture](https://agreste.agriculture.gouv.fr/agreste-web/disaron/SAA-SeriesLongues/detail/)","pinned":false,"hidden":false,"mode":"md"},{"id":877,"value":"viewof year = Inputs.select(['2020','2021','2022','2023'], {label:\"Année\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"YLPieChart(getData(parseInt(year)), {\n x:\"use\", \n y:\"area\",\n centerText:`RÉPARTITION DES TERRES ARABLES FRANÇAISES en ${year}`, \n groupingText : 'Utilisations totales ',\n dataTextFontFamily:\"Handlee\",\n valueFormat: (d) => (d.toFixed(0))+ \" ha\",\n minAllowed: 0.015\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"getData(parseInt(year))","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"getData = (year) => {\n let ws = wb.sheet('TER', {range:\"A6:G3806\", headers:true});\n let cats = new Set();\n ws.map(line => cats.add(line.LIB_SAA));\n let catagories = Array.from(cats);\n catagories.splice(13, 1);\n catagories = catagories.slice(0,19);\n \n let SURF = ({\n 2020 : d3.rollup(ws, v => d3.sum(v, d => d.SURF_2020), d => d.LIB_SAA),\n 2021 : d3.rollup(ws, v => d3.sum(v, d => d.SURF_2021), d => d.LIB_SAA),\n 2022 : d3.rollup(ws, v => d3.sum(v, d => d.SURF_2022), d => d.LIB_SAA),\n 2023 : d3.rollup(ws, v => d3.sum(v, d => d.SURF_2023), d => d.LIB_SAA)\n });\n return catagories.map(cat => ({use: cat.slice(5), area: SURF[year].get(cat)}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"wb = await FileAttachment(\"Surfaces_agricoles.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"{\n let codeColor = \"000000-ffff-e6deb2-dec367-ecb45b-ed8238-e07a5f-D9736A-BF846F-ab90a4-85aab1-5A7E8C-6a8782-869e80-80B266-aad09d-b5ddbf-9ac1ae-aea9a4-947f67\".split(\"-\").map((d) => `#${d}`).reverse();\n \n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"{\n let codeColor = \"000000-ffff-e6deb2-ecb45b-ed8238-D9736A-ab90a4-6a8782-80B266-9ac1ae-947f67\".split(\"-\").map((d) => `#${d}`).reverse();\n \n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"