2c:null 2d:["$","title",null,{"children":"Presupuesto Colombia | John Alexis Guerra Gómez | Observable"}] 32:T97e,chart = { const target = html`

Example insight

A short description of the chart. Usually what's on the y axis

`; const width = 500, height = 500, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 20, right: 30, bottom: 30, left: 40}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gBase = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gBase.append("text") .attr("class", "tooltip") .attr("x", -100) .style("fill", "black") .style("stroke", "black") .text("TOOLTIP"); const x = d3.scaleSqrt() .domain([0, d3.max(data, d => d["APORTE NACIONAL"]) ]) .range([0, iwidth]) .nice(); const y = d3.scaleSqrt() .domain([0, d3.max(data, d => d.TOTAL ) ]) .range([iheight, 0]) .nice(); gBase.append("g") .call(d3.axisBottom(x).tickFormat(d3.format("$.2s"))) .attr("transform", `translate(0, ${iheight})`); gBase.append("g") .call(d3 .axisLeft(y) .tickFormat(d3.format("$.2s")) ); function onMouseOver(d) { d3.select(this) .style("fill", "firebrick"); gBase.select(".tooltip") .attr("x", d3.mouse(this)[0]) .attr("y", d3.mouse(this)[1] + 20) .text(d.CONCEPTO1); console.log("mouseover", d3.mouse(this)); } function onMouseOut(d) { d3.select(this) .style("fill", "#777"); gBase.select(".tooltip") .attr("x", -100) .text(""); console.log(d, d3.event); } gBase.selectAll(".points") .data(data) .join("circle") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .attr("class", "points") .attr("cx", d => x(d["APORTE NACIONAL"]) ) .attr("cy", d => y(d["TOTAL"]) ) .attr("r", 5 ) .style("opacity", 0.5) .style("fill", "#777"); return target; }33:T989,{ const target = html`

Presupuesto por tipo de rubro

Los rubros de funcionamiento son los más grandes

`; const width = 500, height = 500, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 20, right: 30, bottom: 30, left: 200}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gBase = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gBase.append("text") .attr("class", "tooltip") .attr("x", -100) .style("fill", "black") .style("stroke", "black") .text(""); const x = d3.scaleSqrt() .domain([0, d3.max(data, d => d["APORTE NACIONAL"]) ]) .range([0, iwidth]) .nice(); console.log("xdomain", x.domain()); const y = d3.scalePoint() .domain(d3.set(data.map(d => d["CONCEPTO2"])).values()) .range([iheight, 0]) .padding(0.5); gBase.append("g") .call(d3.axisBottom(x).tickFormat(d3.format("$.2s"))) .attr("transform", `translate(0, ${iheight})`); gBase.append("g") .call(d3 .axisLeft(y) ); function onMouseOver(d) { d3.select(this) .style("fill", "firebrick"); gBase.select(".tooltip") .attr("x", d3.mouse(this)[0]) .attr("y", d3.mouse(this)[1] + 20) .text(d.CONCEPTO1); console.log("mouseover", d3.mouse(this)); } function onMouseOut(d) { d3.select(this) .style("fill", "#777"); gBase.select(".tooltip") .attr("x", -100) .text(""); console.log(d, d3.event); } gBase.selectAll(".points") .data(data) .join("circle") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .attr("class", "points") .attr("cx", d => x(d["APORTE NACIONAL"]) ) .attr("cy", d => y(d["CONCEPTO2"]) ) .attr("r", 5 ) .style("opacity", 0.5) .style("fill", "#777"); return target; }34:T995,barchart = { const target = html`

Gastos Nivel 2

Estos son los gastos agrupando por Nivel 2

Gastos Nivel 2

Estos son los gastos agrupando por Nivel 2

Presupuesto por tipo de rubro

Los rubros de funcionamiento son los más grandes. Con un poco de jitter para distribuir los puntos

`; const width = 800, height = 500, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 20, right: 30, bottom: 30, left: 200}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gBase = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gBase.append("text") .attr("class", "tooltip") .attr("x", -100) .style("fill", "black") .style("stroke", "black") .text(""); const x = d3.scaleSqrt() .domain([0, d3.max(data, d => d["APORTE NACIONAL"]) ]) .range([0, iwidth]) .nice(); const y = d3.scalePoint() .domain(d3.set(data.map(d => d["CONCEPTO2"])).values()) .range([iheight, 0]) .padding(0.5); const color = d3.scaleOrdinal(d3.schemeAccent); gBase.append("g") .call(d3.axisBottom(x).tickFormat(d3.format("$.2s"))) .attr("transform", `translate(0, ${iheight})`); gBase.append("g") .call(d3 .axisLeft(y) ); function onMouseOver(d) { d3.select(this) .style("fill", "firebrick"); gBase.select(".tooltip") .attr("x", d3.mouse(this)[0]) .attr("y", d3.mouse(this)[1] + 20) .text(d.CONCEPTO1); console.log("mouseover", d3.mouse(this)); } function onMouseOut(d) { d3.select(this) .style("fill", "#777"); gBase.select(".tooltip") .attr("x", -100) .text(""); console.log(d, d3.event); } gBase.selectAll(".points") .data(data) .join("circle") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .attr("class", "points") .attr("cx", d => x(d["APORTE NACIONAL"]) ) .attr("cy", d => y(d["CONCEPTO2"]) + (Math.random()*100-50) ) .attr("r", 3 ) .style("opacity", 0.3) .style("fill", d => color(d["CONCEPTO2"]) ); return target; }37:T612,angleRadiusAxis = function(cx, cy, r, angle, innerRadius, outerRadius, ticks = 3){ return function(sel) { console.log("angleAxis", sel); const tickValues = d3.range(innerRadius, outerRadius, (outerRadius-innerRadius)/(ticks+1)); sel.selectAll("circle.tick") .data(tickValues) .join("circle") .attr("class", "tick") .style("fill", "none") .style("stroke", "#ccc") .attr("cx", cx) .attr("cy", cy) .attr("r", d => d); sel.selectAll("text.tickr") .data(tickValues) .join("text") .attr("class", "tickr") .style("font-size", "8pt") .style("text-anchor", "middle") .attr("x", cx) .attr("y", d => cy - d -1) .text(d => d3.format("$.2s")(r.invert(d)) ); sel.selectAll("text.tickA") .data(angle.domain()) .join("text") .attr("class", "tickA") .style("font-size", "8pt") .style("text-anchor", "middle") .attr("x", d=> cx+ outerRadius*Math.cos(angle(d))) .attr("y", d=> cy+ outerRadius*Math.sin(angle(d))) .text(d => d); sel.selectAll("line.tickA") .data(angle.domain()) .join("line") .attr("class", "tickA") .style("stroke", "black") .attr("x1", d=> cx+ innerRadius*Math.cos(angle(d))) .attr("y1", d=> cy+ innerRadius*Math.sin(angle(d))) .attr("x2", d=> cx+ (innerRadius-5)*Math.cos(angle(d))) .attr("y2", d=> cy+ (innerRadius-5)*Math.sin(angle(d))) } }38:Ta60,{ const target = html`

Presupuesto por tipo de rubro

Los rubros de funcionamiento son los más grandes. En un diagrama radial

`; const width = 500, height = 500, innerRadius = 50, outerRadius = 200, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 0, right: 0, bottom: 0, left: 0}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gBase = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); gBase.append("text") .attr("class", "tooltip") .attr("x", -100) .style("fill", "black") .style("stroke", "black") .text(""); const r = d3.scaleSqrt() .domain([0, d3.max(data, d => d["APORTE NACIONAL"]) ]) .range([innerRadius, outerRadius]) .nice(); const angle = d3.scalePoint() .domain(d3.set(data.map(d => d["CONCEPTO2"])).values()) .range([0, 2*Math.PI]) .padding(0.5); const color = d3.scaleOrdinal(d3.schemeAccent); gBase.append("g") .call(angleRadiusAxis(iwidth/2, iheight/2, r, angle, innerRadius, outerRadius)); function onMouseOver(d) { d3.select(this) .style("fill", "firebrick"); gBase.select(".tooltip") .attr("x", d3.mouse(this)[0]) .attr("y", d3.mouse(this)[1] + 20) .text(d.CONCEPTO1); console.log("mouseover", d3.mouse(this)); } function onMouseOut(d) { d3.select(this) .style("fill", "#777"); gBase.select(".tooltip") .attr("x", -100) .text(""); console.log(d, d3.event); } gBase.selectAll(".points") .data(data) .join("circle") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .attr("class", "points") .attr("cx", d => { d.jitter = Math.PI/2*Math.random()-Math.PI/4; return iwidth/2 + r(d["APORTE NACIONAL"])*Math.cos(angle(d["CONCEPTO2"]) + d.jitter); }) .attr("cy", d => iheight/2 + r(d["APORTE NACIONAL"])*Math.sin(angle(d["CONCEPTO2"]) + d.jitter)) .attr("r", 2 ) .style("opacity", 0.3) .style("fill", d => color(d["CONCEPTO2"])); return target; }39:[] 30:{"id":"6b0ab5ef1cde2452","slug":"presupuesto-colombia","title":"Presupuesto Colombia","thumbnail":"dec9bd1fd5c776d7b048b60a74ffe9582d64c801352fd0254f3fadb59ed46dab","access_level":"public","create_time":"$D2019-08-28T01:08:25.674Z","update_time":"$D2019-09-03T21:37:58.020Z","view_time":null,"first_public_time":"$D2019-09-03T21:38:10.719Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024","bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity"},"version":236,"publish_version":236,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"bio":"I love to build dataviz for insight discovery. I also love to put technology to the service of humanity"}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":33,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Presupuesto Colombia","cells":[{"id":0,"value":"md`# Presupuesto Colombia`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"congresoAgrupado = { \n return d3.nest()\n .key(d => d.Nivel2)\n .rollup( leaves => ({\n leaves, \n sum:d3.sum(leaves, d=>d[\"TOTAL\"] ),\n numLeaves: leaves.length\n }) )\n .entries(data)\n .sort( (a,b) => d3.ascending(a.value.sum, b.value.sum)); \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = d3.csv(\"https://raw.githubusercontent.com/john-guerra/presupuestoColombia/master/PresupuestoGeneralDeLaNacionColombia2020.csv\", d3.autoType)\n .then(data => {\n data.forEach(d => {\n if (d['APORTE NACIONAL'])\n d[\"APORTE NACIONAL\"] = +(d[\"APORTE NACIONAL\"].replace(/,/g, \"\"));\n if (d['TOTAL'])\n d[\"TOTAL\"] = +(d[\"TOTAL\"].replace(/,/g, \"\"));\n \n });\n return data;\n }); \n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"\n// {\n// // Navio\n// const target = html`

`;\n// const nv = navio(target, 600);\n// nv.data(rawData);\n// nv.addAllAttribs();\n// nv.update();\n// return target;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"navio = require(\"navio\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"