34:["$","title",null,{"children":"Ingressos i despeses. Per tipus de concert i tipus d’hospital | imaspons | Observable"}] 3c:Tf3f, const data = await FileAttachment("hospitals.json").json(); const root = d3.hierarchy(data); d3.tree() .size([2 * Math.PI, 1]) .separation((a, b) => (a.parent === b.parent ? 1 : 2) / Math.max(a.depth, 1))(root); const step = 1.4; root.each(d => { const r = Math.tanh(d.depth * step / 2); const a = d.x - Math.PI / 2; d.z = [r * Math.cos(a), r * Math.sin(a)]; d.top = d.depth === 0 ? "root" : d.ancestors().at(-2).data.name; }); const W = 680, R = W / 2 - 10; const color = d3.scaleOrdinal( ["root", "Ingressos", "Despeses", "Resultat", "Inversions anuals"], ["#888", "#4269d0", "#efb118", "#3ca951", "#ff725c"] ); const rad = d3.scaleSqrt([0, 8000], [3, 16]); const fmt = d3.format(",.1f"); const nodes = root.descendants(), links = root.links(); const mob = (z, a) => { const nr = z[0] - a[0], ni = z[1] - a[1]; const dr = 1 - (a[0] * z[0] + a[1] * z[1]), di = -(a[0] * z[1] - a[1] * z[0]); const m = dr * dr + di * di; return [(nr * dr + ni * di) / m, (ni * dr - nr * di) / m]; }; const geodesic = (u, v) => { const det = u[0] * v[1] - u[1] * v[0]; const U = [u[0] * R, u[1] * R], Vv = [v[0] * R, v[1] * R]; if (Math.abs(det) < 1e-6) return `M${U}L${Vv}`; const bu = (1 + u[0] ** 2 + u[1] ** 2) / 2, bv = (1 + v[0] ** 2 + v[1] ** 2) / 2; const cx = (bu * v[1] - bv * u[1]) / det, cy = (u[0] * bv - v[0] * bu) / det; const r = Math.sqrt(cx * cx + cy * cy - 1); const cross = (u[0] - cx) * (v[1] - cy) - (u[1] - cy) * (v[0] - cx); return `M${U}A${r * R},${r * R} 0 0 ${cross > 0 ? 1 : 0} ${Vv}`; }; const nodeR = d => { const s = Math.max(1 - (d.p[0] ** 2 + d.p[1] ** 2), 0); return Math.max(1.5, rad(Math.abs(d.data.value ?? 8000)) * Math.sqrt(s) * 1.3); }; const svgEl = svg``; const linkSel = d3.select(svgEl).select(".links") .selectAll("path").data(links).join("path"); const nodeSel = d3.select(svgEl).select(".nodes") .selectAll("g").data(nodes).join("g") .style("cursor", "pointer") .on("click", (e, d) => focusOn(d.z)); nodeSel.append("circle") .attr("fill", d => color(d.top)) .attr("stroke", "white"); nodeSel.append("text") .attr("text-anchor", "middle") .attr("stroke", "white").attr("stroke-width", 3).attr("paint-order", "stroke") .attr("fill", "#222") .text(d => d.data.name); nodeSel.append("title") .text(d => `${d.data.name}${d.data.value != null ? "\n" + fmt(d.data.value) + " M€" : ""}`); function draw(a) { nodes.forEach(n => n.p = mob(n.z, a)); linkSel.attr("d", l => geodesic(l.source.p, l.target.p)); nodeSel.attr("transform", d => `translate(${d.p[0] * R},${d.p[1] * R})`); nodeSel.select("circle").attr("r", nodeR); nodeSel.select("text") .attr("y", d => -nodeR(d) - 3) .attr("font-size", d => 8 + 4 * (1 - Math.hypot(...d.p))) .attr("display", d => Math.hypot(...d.p) < 0.9 ? null : "none"); } let cur = [0, 0]; function focusOn(target) { const from = cur; d3.transition().duration(750).tween("focus", () => t => { t = d3.easeCubicInOut(t); cur = [from[0] + (target[0] - from[0]) * t, from[1] + (target[1] - from[1]) * t]; draw(cur); }); } draw(cur); display(html`

Ingressos i despeses. Per tipus de concert i tipus d'hospital. Catalunya, 2017 (milions d'euros). Clica qualsevol node per portar-lo al centre. La mida del node és proporcional a l'import.

${svgEl}

Font: IDESCAT, a partir de l'Estadística d'establiments sanitaris amb règim d'internament (EESRI), Departament de Salut.

`); 3d:[{"id":"899b0c4d0120b5a48808a86531501dc95e9065729e5e5d249b5caa57197ff6247f9dba74e050f775124d7d23137aa852200360a741e940fc93bea47bc39bf8b5","href":"https://static.observableusercontent.com/files/899b0c4d0120b5a48808a86531501dc95e9065729e5e5d249b5caa57197ff6247f9dba74e050f775124d7d23137aa852200360a741e940fc93bea47bc39bf8b5","name":"hospitals.json","type":"application/json","lastModified":1793302007186,"size":14055}] 38:{"id":"f17a03ae4c09e36f","slug":"ingressos-i-despeses-per-tipus-de-concert-i-tipus-d-hospital","title":"Ingressos i despeses. Per tipus de concert i tipus d’hospital","thumbnail":"5a8f7e9be1dcef30f8a0be5edaadcb68635cad287906109119d2cadf77edd000","access_level":"public","create_time":"$D2026-10-29T19:33:21.082Z","update_time":"$D2026-10-29T19:36:17.249Z","view_time":null,"first_public_time":"$D2026-10-29T19:37:23.426Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f31b14d917b49a3b","login":"imaspons","name":"imaspons","avatar_url":"https://avatars-next.observableusercontent.com/620f2aff3073bc76da89ed3fa3f7b7accde1b05ba7dd8a483fa6e1d50351af9d","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":22,"publish_version":22,"role":null,"authored":false,"authors":[{"type":"individual","id":"22214548273698b8","login":"imaspons","name":"imaspons","avatar_url":"https://avatars-next.observableusercontent.com/620f2aff3073bc76da89ed3fa3f7b7accde1b05ba7dd8a483fa6e1d50351af9d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f31b14d917b49a3b","login":"imaspons","name":"imaspons","avatar_url":"https://avatars-next.observableusercontent.com/620f2aff3073bc76da89ed3fa3f7b7accde1b05ba7dd8a483fa6e1d50351af9d","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ingressos i despeses. Per tipus de concert i tipus d’hospital","cells":[{"id":1,"value":"# Ingressos i despeses. Per tipus de concert i tipus d'hospital","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$3c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"2"}} 33:null