29:null 2a:["$","title",null,{"children":"1 - Quantità di progetti per tipologia e tipo di partecipazione | DensityDesign Lab | Observable"}] 2f:Taa7,chart = { layout(root); root.data = ["Progetti PNRR dei partner SID"]; let svg = d3.create("svg").attr("width", width).attr("height", height); // background let bg = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f6ee"); createTitle( svg, "Quantità di progetti per tipologia e tipo di partecipazione", width - 40 ); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // links g.selectAll("path.link") .data(root.links()) .join("path") .attr("class", "link") .attr( "d", d3 .linkHorizontal() .x((d) => d.y) .y((d) => d.x) ) .attr("fill", "none") .attr("stroke", "#555"); // nodes const node = g .selectAll("g.node") .data(root.descendants()) .join("g") .attr( "class", (d) => "node" + (d.children ? " node--internal" : " node--leaf") ) .attr("transform", (d) => `translate(${d.y},${d.x})`); // only for leaves: node .filter((d) => !d.children) .each(function (d) { const g = d3.select(this); const p = +d.data[1].partecipati; const c = +d.data[1].coordinati; const all = d.data[1].coordinati.concat(d.data[1].partecipati); const dotR = rScale.dotsSize / 2; const spacingX = dotR * 2 + 1; const spacingY = dotR * 2 + 1; const rows = Math.ceil(all.length / maxPerLine); const verticalOffset = ((rows - 1) * spacingY) / 2; g.selectAll("circle.dot") .data(all) .join("circle") .attr("class", "dot") .attr("cursor", "pointer") .attr("r", dotR) .attr("cx", (_, i) => { const col = i % maxPerLine; // left-align: first dot at x=0 return spacingX / 2 + col * spacingX; }) .attr("cy", (_, i) => { const row = Math.floor(i / maxPerLine); return row * spacingY - verticalOffset; }) .attr("fill", (d) => d["Ruolo CEAR-08/D"] === "coordinamento" ? "#e33d4b" : "#f9f6ee" ) .attr("stroke", (d) => d["Ruolo CEAR-08/D"] === "coordinamento" ? "none" : "#e33d4b" ); }); // labels node .append("text") .attr("dy", "0.32em") .attr("x", -6) .attr("text-anchor", "end") .attr("paint-order", "stroke") .attr("fill", "#231f20") .attr("stroke", "#f9f6ee") .attr("stroke-width", 3) .attr("font-family", "Manrope Medium, sans-serif") .attr("font-size", 12) .text((d) => d.data[0]); //interactions let circles = node.selectAll("circle.dot"); addTippy(svg, "circle.dot", tooltip); return svg.node(); }30:T4f4,rScale = { let leaves = root.leaves(); let nLeaves = leaves.length; let values = leaves.map((n) => n.value); let minCount = d3.min(values); let maxCount = d3.max(values); let availableHeight = height - margin.top - margin.bottom; // 1) we will use a fixed ratio of 1:1 for dots:padding let totalElements = d3.sum(values) + (nLeaves - 1); let dotsSize = availableHeight / totalElements; // 2) Decide on the vertical padding you want between adjacent circles let padding = dotsSize; // 3) Compute the absolute maximum possible radius so that two max‐sized circles // sitting at adjacent leaf positions (i.e. H/(nLeaves-1) apart) won’t overlap: // gap between centers = H / (nLeaves - 1) // need gap >= 2*maxR + padding // ⇒ maxR = (gap - padding) / 2 var gap = (height - margin.top - margin.bottom) / (nLeaves - 1); var maxR = (gap - padding) / 2; // 4) Compute a proportional minimum radius so that the smallest‐count leaf // scales down in the same ratio: var minR = maxR * (minCount / maxCount); // set the right margin proportional // 5) Build your scale return { maxR, dotsSize, padding, scale: d3.scaleLinear().domain([minCount, maxCount]).range([minR, maxR]) }; }31:[{"id":"1d61e838938554537bbaa891288669f95d60353955fcaeda940632471a0f5e970db4652a1283df7caaae7d458f0308d4c092bfa11df1cad26850ac4776129d8a","href":"https://static.observableusercontent.com/files/1d61e838938554537bbaa891288669f95d60353955fcaeda940632471a0f5e970db4652a1283df7caaae7d458f0308d4c092bfa11df1cad26850ac4776129d8a","name":"Elenco progetti PNRR nazionali_semplificato_con pictorials (20250805) - dati generali-1.csv","type":"text/csv","lastModified":1754473616511.34,"size":82408},{"id":"1266c56a6c6d128c4f6e6676da5e8160b487e72f2b76709d0d8eeb11de0a1ec6df790ab29bf7d053ebfda3da82d0d4d0ac7c399174a840b134c0647ac2c5a53e","href":"https://static.observableusercontent.com/files/1266c56a6c6d128c4f6e6676da5e8160b487e72f2b76709d0d8eeb11de0a1ec6df790ab29bf7d053ebfda3da82d0d4d0ac7c399174a840b134c0647ac2c5a53e","name":"Elenco progetti PNRR nazionali - SID - Dati per viz - OD@2.csv","type":"text/csv","lastModified":1753907562306.037,"size":62895},{"id":"c946234693f7b042adf3035cc923b325123bfeb9d603646de79979bb3326f85f0f8cc2fc75ab743c2455c47235d34ed3a631a1a0e597c35554978cb93e048065","href":"https://static.observableusercontent.com/files/c946234693f7b042adf3035cc923b325123bfeb9d603646de79979bb3326f85f0f8cc2fc75ab743c2455c47235d34ed3a631a1a0e597c35554978cb93e048065","name":"Elenco progetti PNRR nazionali - SID - Dati per viz - OD@3.csv","type":"text/csv","lastModified":1753907889002.842,"size":62876}] 2d:{"id":"a899233ee2c66a6f","slug":null,"title":"1 - Quantità di progetti per tipologia e tipo di partecipazione","thumbnail":"0f80a9156aaa239007fa63308e1f34c04394c74572056bf7217f44cb1e6c274d","access_level":"public","create_time":"$D2025-07-02T14:14:53.961Z","update_time":"$D2025-09-19T07:06:06.245Z","view_time":null,"first_public_time":"$D2025-07-08T20:17:53.698Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"18e633938ae9b147","login":"densitydesign","name":"DensityDesign Lab","avatar_url":"https://avatars-next.observableusercontent.com/a47c21d6984b3962d41b76daa903d24f99e43af5ccb20681b83424176f7a7317","tier":"pro_2024"},"version":424,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"88179e875414a070","login":"mikima","name":"Michele Mauri","avatar_url":"https://avatars-next.observableusercontent.com/d76c5aa791b94671438fe822f26d224a383c16411fbbd792799179b3c3912918","tier":null}],"members":[{"type":"team","id":"18e633938ae9b147","login":"densitydesign","name":"DensityDesign Lab","avatar_url":"https://avatars-next.observableusercontent.com/a47c21d6984b3962d41b76daa903d24f99e43af5ccb20681b83424176f7a7317","tier":"pro_2024","role":"editor"},{"type":"individual","id":"88179e875414a070","login":"mikima","name":"Michele Mauri","avatar_url":"https://avatars-next.observableusercontent.com/d76c5aa791b94671438fe822f26d224a383c16411fbbd792799179b3c3912918","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"1 - Quantità di progetti per tipologia e tipo di partecipazione","cells":[{"id":0,"value":"# 1 - Quantità di progetti per tipologia e tipo di partecipazione","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"## Tippy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"tooltip = function (d) {\n if (d != undefined) {\n return `\n

${d[\"TITOLO PROGETTO\"]}

\n
\n

Sede: ${d[\"sede (lead/partner)\"]}

Ruolo: ${d[\"Ruolo CEAR-08/D\"]}

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"## Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"maxPerLine = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"margin = ({ top: 60, right: 20, bottom: 20, left: 200 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"## Hierarchy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"layout = d3\n .cluster()\n .size([\n height - margin.top - margin.bottom,\n width -\n margin.left -\n (margin.right + rScale.dotsSize * maxPerLine + maxPerLine - 1)\n ])\n .separation(function (a, b) {\n // pick each node’s “radius”\n var ra = a.children\n ? 4 // fixed small dot for internal nodes\n : rScale.dotsSize * a.value; // scaled dot for leaves\n var rb = b.children ? 4 : rScale.dotsSize * b.value;\n\n // desired raw spacing = ra + rb + padding\n // normalize so that (2*maxR + padding) → 1 “unit”\n return ra + rb;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"root = d3\n .hierarchy(nested, ([, children]) => Array.from(children))\n .sum(function (d) {\n return typeof d[1].total === \"number\"\n ? Math.ceil(d[1].total / maxPerLine)\n : 0;\n })\n .sort((a, b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"leafValues = root.leaves().map(function (n) {\n return {\n parent: n.parent.data[\"0\"],\n stotal: n.data[1].total,\n name: n.data[0],\n rows: n.value\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"import { od } from \"@densitydesign/sid-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"nested = d3.rollup(\n od,\n (v) => ({\n total: v.length,\n partecipati: v.filter((e) => e[\"Ruolo CEAR-08/D\"] === \"partecipazione\"),\n coordinati: v.filter((e) => e[\"Ruolo CEAR-08/D\"] === \"coordinamento\")\n }),\n (d) => d[\"Macro-tipologia\"],\n (d) => d[\"titolo macrotopologia corto\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"import { createTitle } from \"@densitydesign/sid-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"import { addTippy } from \"@densitydesign/sid-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"