25:null 26:["$","title",null,{"children":"Gastos do fundo partidário | Lucas Cordeiro | Observable"}] 2b:T869,{ const dataHierarchy = data => d3.hierarchy({ children: data }).sum(d => d.value); const pack = data => { const _pack = d3 .pack() .size([width - 2, height - 2]) .padding(3); const hierarchy = dataHierarchy(data); return _pack(hierarchy); }; const root = pack(fornecedoresPartido); const color = d3.scaleOrdinal( fornecedoresPartido.map(d => d.name), d3.schemeTableau10 ); const format = locale.format("$,.2f"); const baseFontSize = 13; let zoomLevel = 1; const svg = d3 .create('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .attr('text-anchor', 'middle') .style('font-size', `${baseFontSize / zoomLevel}px`); const g = svg.append('g'); function zoomed() { zoomLevel = d3.event.transform.k; svg.style('font-size', `${baseFontSize / zoomLevel}px`); g.attr('transform', d3.event.transform); } svg.call( d3 .zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on('zoom', zoomed) ); const { tooltip, showTooltip, moveTooltip, hideTooltip } = createTooltip(); const leaf = g .selectAll('g') .data(root.leaves()) .join('g') .attr('transform', d => `translate(${d.x + 1}, ${d.y + 1})`); leaf .append('circle') .attr('id', d => (d.leafUid = DOM.uid('leaf')).id) .attr('r', d => d.r) .attr('fill-opacity', 0.7) .attr('fill', d => color(d.data.name)) .on('mouseover', function(d) { return showTooltip.call(this, zoomLevel, d); }) .on('mousemove', function(d) { return moveTooltip.call(this, zoomLevel, d); }) .on('mouseleave', function(d) { return hideTooltip.call(this, zoomLevel, d); }); leaf .append('clipPath') .attr('id', d => (d.clipUid = DOM.uid('clip')).id) .append('use') .attr('xlink:href', d => d.leafUid.href); leaf .append('text') .attr('clip-path', d => d.clipUid) .append('tspan') .datum(d => d.data.name) .text(d => d); return html`

${svg.node()} ${tooltip.node()}

`; }2c:T486,createTooltip = { const tooltip = d3 .create('div') .style('opacity', 0) .attr('class', 'tooltip') .style('background-color', '#121212') .style('border-radius', '5px') .style('padding', '10px') .style('color', 'rgba(255, 255, 255, .87)'); const showTooltip = function(zoomLevel, d) { const content = ` Fornecedor: ${d.data.name}
Valor: ${locale.format('$,.2f')(d.data.value)} `.trim(); tooltip.style('opacity', 1).html(content); moveTooltip(zoomLevel).call(this, d); }; const moveTooltip = function(zoomLevel, d) { const clientRect = this.getBoundingClientRect(); const [x, y] = d3.mouse(this); const relativeX = x * zoomLevel + clientRect.width / 2; const relativeY = y * zoomLevel + clientRect.height / 2; tooltip .style('top', `${clientRect.y}px`) .style('left', `${clientRect.x}px`) .style( 'transform', `translate(${relativeX + 15}px, ${relativeY + 15}px)` ); }; const hideTooltip = function(_, d) { tooltip.style('opacity', 0); }; return () => ({ tooltip, showTooltip, moveTooltip, hideTooltip }); }2d:[] 29:{"id":"aa154c7af16aab3f","slug":"gastos-do-fundo-partidario/2","title":"Gastos do fundo partidário","thumbnail":"49dd9f5bda403a87f41317fd07466f03819ab9e79a77bc26b27f70d5ff3621cf","access_level":"public","create_time":"$D2019-10-25T11:28:38.827Z","update_time":"$D2019-11-03T00:04:05.449Z","view_time":null,"first_public_time":"$D2019-11-01T02:23:45.682Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2602806da79cd217","login":"lucasecdb","name":"Lucas Cordeiro","avatar_url":"https://avatars-next.observableusercontent.com/33224685c513b154e890dc12f73990903fefba701d00f8cfbb4cd2057a187f41","tier":"starter_2024"},"version":514,"publish_version":514,"role":null,"authored":false,"authors":[{"type":"individual","id":"002756504615f006","login":"lucasecdb","name":"Lucas Cordeiro","avatar_url":"https://avatars-next.observableusercontent.com/33224685c513b154e890dc12f73990903fefba701d00f8cfbb4cd2057a187f41","tier":null}],"members":[{"type":"individual","id":"002756504615f006","login":"lucasecdb","name":"Lucas Cordeiro","avatar_url":"https://avatars-next.observableusercontent.com/33224685c513b154e890dc12f73990903fefba701d00f8cfbb4cd2057a187f41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"99515ca197843e0d","slug":"visualizacao-de-dados","title":"Visualização de Dados","owner":{"id":"2602806da79cd217","login":"lucasecdb","name":"Lucas Cordeiro"}},"type":"notebook","body":{"title":"Gastos do fundo partidário","cells":[{"id":0,"value":"md`\n# Gastos do fundo partidário\n\nNeste notebook iremos analisar os gastos dos partidos políticos do estado da Paraíba, provinientes do [Fundo Partidário](https://pt.wikipedia.org/wiki/Fundo_Partid%C3%A1rio). Todos os dados podem ser acessados [neste repositório git](https://github.com/nazareno/transparencia-partidos).\n\nNa visualização abaixo podemos ver todos os partidos e a média de seus respectivos gastos.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"embed({\n $schema: 'https://vega.github.io/schema/vega-lite/v4.json',\n data: {\n values: data\n },\n width: 400,\n height: 300,\n mark: {\n type: 'circle',\n tooltip: true\n },\n encoding: {\n y: {\n field: 'SG_PARTIDO',\n type: 'nominal',\n title: 'Partido',\n sort: '-x'\n },\n x: {\n field: 'VR_PAGAMENTO',\n type: 'quantitative',\n title: 'Média dos pagamentos',\n aggregate: 'mean',\n scale: {\n type: 'log'\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"md`\nSelecione um partido para ver em detalhes os seus gastos em relação aos fornecedores.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"partido = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"md`\nO gráfico acima mostra todos os fornecedores do partido selecionado (neste caso, o ${partidoSelecionado}).\nCada fornecedor é um círculo, e o seu tamanho corresponde a média do quanto ele recebe pelo partido em\nrelação aos demais. É possível obter mais informações passando o mouse sobre cada círculo.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"md`\nTambém podemos analisar mais detalhes sobre os fornecedores do partido selecionado anteriormente, como por exemplo sua distribuição em relação ao valor do pagamento.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"fornecedor = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"embed({\n data: {\n values: data\n },\n transform: [\n {\n filter: {\n field: 'SG_PARTIDO',\n equal: partidoSelecionado\n }\n },\n {\n filter: {\n field: 'NM_FORNECEDOR',\n equal: fornecedorSelecionado\n }\n }\n ],\n width: 300,\n title: 'Valor de pagamento por tipo de documento',\n mark: {\n type: 'bar',\n tooltip: true\n },\n encoding: {\n x: {\n field: 'DS_TP_DOCUMENTO',\n type: 'nominal',\n title: 'Tipo do documento'\n },\n y: {\n field: 'VR_PAGAMENTO',\n type: 'quantitative',\n title: 'Total do valor do pagamento',\n aggregate: 'sum'\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"md`\n---\n\n##### Dependências\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":363,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"height = 500 ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"partidoSelecionado = Generators.input(partido)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"fornecedorSelecionado = Generators.input(fornecedor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"fornecedoresPartido = R.compose(\n R.values,\n R.mapObjIndexed(\n R.reduce(\n (acc, point) => ({\n name: point.NM_FORNECEDOR,\n value: acc.value + point.VR_PAGAMENTO\n }),\n {\n value: 0\n }\n )\n ),\n R.groupBy(R.prop('NM_FORNECEDOR')),\n R.filter(R.propEq('SG_PARTIDO', partidoSelecionado))\n)(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"partidos = Object.keys(\n data.reduce(\n (acc, point) => Object.assign({}, acc, { [point['SG_PARTIDO']]: true }),\n {}\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"data = d3.csv(\n 'https://raw.githubusercontent.com/nazareno/transparencia-partidos/master/data/despesas_17-18_fundo-partidario_PB.csv',\n row => ({\n ...row,\n VR_PAGAMENTO: +row.VR_PAGAMENTO,\n VR_GASTO: +row.VR_GASTO,\n VR_DOCUMENTO: +row.VR_DOCUMENTO\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":323,"value":"locale = d3.formatLocale(\n await d3.json('https://unpkg.com/d3-format@1/locale/pt-BR.json')\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"vega = require('vega@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"vegaLite = require('vega-lite')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"vegaTooltip = require('vega-tooltip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"embed = {\n return function vegalite(spec) {\n const div = document.createElement(\"div\");\n const view = (div.value = new vega.View(\n vega.parse(vegaLite.compile(spec).spec)\n ));\n\n const tooltipHandler = new vegaTooltip.Handler({});\n\n return view\n .initialize(div)\n .tooltip(tooltipHandler.call)\n .runAsync()\n .then(function() {\n return div;\n });\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"import { R } from '@itacirgabral/ramda'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2a:"$29:body"