30:T46f,data = [ {palavra: "previdência", selecionado: 0}, {palavra: "empregabilidade", selecionado: 0}, {palavra: "uberização", selecionado: 0}, {palavra: "privacidade de dados", selecionado: 0}, {palavra: "fake news", selecionado: 0}, {palavra: "evelhecimento", selecionado: 0}, {palavra: "longevidade", selecionado: 0}, {palavra: "educação financeira", selecionado: 0}, {palavra: "rede social", selecionado: 1}, {palavra: "vício", selecionado: 0}, {palavra: "comportamento", selecionado: 0}, {palavra: "desperdício", selecionado: 0}, {palavra: "moradores de rua", selecionado: 0}, {palavra: "hormônio", selecionado: 0}, {palavra: "guerra urbana", selecionado: 0}, {palavra: "violência", selecionado: 0}, {palavra: "família e trabalho", selecionado: 1}, {palavra: "suicídio", selecionado: 0}, {palavra: "depressão", selecionado: 0}, {palavra: "saúde mental", selecionado: 1}, {palavra: "ansiedade", selecionado: 0}, {palavra: "angústia", selecionado: 0}, {palavra: "frustração", selecionado: 0}, {palavra: "matemática", selecionado: 0}, {palavra: "ensino", selecionado: 0} ]31:T948,//original wordcloud code from: @danyyyy89 //https://observablehq.com/@danyyyy89/force-simulation-to-visualize-word-cloud-with-split-versio wordCloud = (data,word,selected) => { const r = 60;//scale for radius const height = 600; const padding = 2; // create the SVG container let svg = d3.select(html``) .attr('width', width) .attr('height', height); const colors = d3.schemeSet1 .slice(0, new Set(data.map(d=> d[selected])).size); // create a layer or group let gBubble = svg .selectAll('gBubble') .data(data); gBubble.exit().remove(); let bubble = gBubble.enter() .append('g') .classed('gBubble', true) .attr('id',d => d[word]); bubble .append('circle') .attr('r', d => r) .attr('fill', d => colors[+d[selected]]) .attr('fill-opacity', 0.4) .attr('stroke', d => colors[+d[selected]]) .attr('stroke-width', 1) .style("cursor", "pointer"); let text= bubble .append('text'); const textLabels = text .text( d => (d[word])) .style('text-anchor','middle') .attr("dominant-baseline", "central") .attr('font-family', 'sans-serif') .attr('font-size', d => r/5+'px' ) .attr('font-weight','normal') .attr('fill', '#000') .style("cursor", "pointer") gBubble = gBubble .merge(bubble); //drag functions let drag = simulation => { function dragstarted(d){ if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d){ d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d){ if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return d3.drag() .on('start', dragstarted) .on('drag', dragged) .on('end', dragended); } // define the simualtion engine var simulation = d3.forceSimulation(data) .force("x", d3.forceX(width/2).strength(0.008)) .force("y", d3.forceY(height/2).strength(0.032)) .force("collide", d3.forceCollide().radius(d=> r + padding).iterations(3)) .force('center', d3.forceCenter(width/2, height/2)) .alpha(0.8); gBubble.call(drag(simulation)); simulation.nodes(data) .on('tick', () => { gBubble .attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')'); }) return svg.node(); }32:T4b4,//original code from: @nitaku //https://observablehq.com/@nitaku/tangled-tree-visualization-ii? svg``33:T18de,data2 = { var levels = [ [{id: 'Temas'}], [ {id: 'Saúde Mental', parents: ['Temas']}, {id: 'Família e Trabalho', parents: ['Temas']}, {id: 'Rede Social', parents: ['Temas']} ], [ {id: 'Autoconhecimento', parents: ['Saúde Mental']}, {id: 'Predisposição química', parents: ['Saúde Mental']}, {id: 'Fatores externos', parents: ['Saúde Mental']}, {id: 'Depressão', parents: ['Saúde Mental']}, {id: 'Inteligência Emocional', parents: ['Saúde Mental']}, {id: 'Respeito', parents: ['Saúde Mental']}, {id: 'Apoio em geral', parents: ['Saúde Mental']}, {id: 'Crise', parents: ['Saúde Mental']}, {id: 'Sensibilidade', parents: ['Saúde Mental']}, {id: 'Relacionamento', parents: ['Saúde Mental']}, {id: 'Algorimitização das emoções', parents: ['Saúde Mental']}, {id: 'Envolvimento', parents: ['Saúde Mental']}, {id: 'Culpa', parents: ['Família e Trabalho']}, {id: 'Integrar', parents: ['Família e Trabalho']}, {id: 'Dor', parents: ['Família e Trabalho']}, {id: 'Saudade', parents: ['Família e Trabalho']}, {id: 'Participar', parents: ['Família e Trabalho']}, {id: 'Solidário', parents: ['Família e Trabalho']}, {id: 'Disponibilidade', parents: ['Família e Trabalho']}, {id: 'Estrutura', parents: ['Família e Trabalho']}, {id: 'Vício', parents: ['Rede Social']}, {id: 'Isolamento', parents: ['Rede Social']}, {id: 'Tempo', parents: ['Rede Social']}, {id: 'Indiferença', parents: ['Rede Social']}, {id: 'Ficção', parents: ['Rede Social']}, {id: 'Roteiro', parents: ['Rede Social']}, {id: 'Conexão', parents: ['Rede Social']}, {id: 'Emoções', parents: ['Rede Social']} ], [ {id: 'Tabu', parents: ['Inteligência Emocional']}, {id: 'Educação Infantil', parents: ['Inteligência Emocional']}, {id: 'Autoconfiança', parents: ['Crise']}, {id: 'Estrutura Familiar', parents: ['Relacionamento']}, {id: 'Consciliar', parents: ['Integrar']}, {id: 'Distância', parents: ['Dor']}, {id: 'Acolher', parents: ['Participar']}, {id: 'Creche', parents: ['Solidário']}, {id: 'Terceirizar', parents: ['Solidário']}, {id: 'Doação', parents: ['Disponibilidade']}, {id: 'Egoismo', parents: ['Disponibilidade']}, {id: 'Descaso', parents: ['Disponibilidade']}, {id: 'Flexibilidade', parents: ['Estrutura']}, {id: 'Rigidez', parents: ['Estrutura']} ], [ {id: 'Repressão', parents: ['Tabu']}, {id: 'Confiança', parents: ['Estrutura Familiar']}, {id: 'Equilibrar', parents: ['Consciliar']}, {id: 'Babá', parents: ['Terceirizar']} ] ] // precompute level depth levels.forEach((l,i) => l.forEach(n => n.level = i)) var nodes = levels.reduce( ((a,x) => a.concat(x)), [] ) var nodes_index = {} nodes.forEach(d => nodes_index[d.id] = d) // objectification nodes.forEach(d => { d.parents = (d.parents === undefined ? [] : d.parents).map(p => nodes_index[p]) }) // precompute bundles levels.forEach((l, i) => { var index = {} l.forEach(n => { if(n.parents.length == 0) { return } var id = n.parents.map(d => d.id).sort().join('--') if (id in index) { index[id].parents = index[id].parents.concat(n.parents) } else { index[id] = {id: id, parents: n.parents.slice(), level: i} } n.bundle = index[id] }) l.bundles = Object.keys(index).map(k => index[k]) l.bundles.forEach((b, i) => b.i = i) }) var links = [] nodes.forEach(d => { d.parents.forEach(p => links.push({source: d, bundle: d.bundle, target: p})) }) var bundles = levels.reduce( ((a,x) => a.concat(x.bundles)), [] ) // reverse pointer from parent to bundles bundles.forEach(b => b.parents.forEach(p => { if(p.bundles_index === undefined) { p.bundles_index = {} } if(!(b.id in p.bundles_index)) { p.bundles_index[b.id] = [] } p.bundles_index[b.id].push(b) })) nodes.forEach(n => { if(n.bundles_index !== undefined) { n.bundles = Object.keys(n.bundles_index).map(k => n.bundles_index[k]) } else { n.bundles_index = {} n.bundles = [] } n.bundles.forEach((b, i) => b.i = i) }) links.forEach(l => { if(l.bundle.links === undefined) { l.bundle.links = [] } l.bundle.links.push(l) }) // layout const padding = 8 const node_height = 28 const node_width = 120 const bundle_width = 14 const level_y_padding = 16 const metro_d = 4 const c = 16 const min_family_height = 16 nodes.forEach(n => n.height = (Math.max(1, n.bundles.length)-1)*metro_d) var x_offset = padding var y_offset = padding levels.forEach(l => { x_offset += l.bundles.length*bundle_width y_offset += level_y_padding l.forEach((n, i) => { n.x = n.level*node_width + x_offset n.y = node_height + y_offset + n.height/2 y_offset += node_height + n.height }) }) var i = 0 levels.forEach(l => { l.bundles.forEach(b => { b.x = b.parents[0].x + node_width + (l.bundles.length-1-b.i)*bundle_width b.y = i*node_height }) i += l.length }) links.forEach(l => { l.xt = l.target.x l.yt = l.target.y + l.target.bundles_index[l.bundle.id].i*metro_d - l.target.bundles.length*metro_d/2 + metro_d/2 l.xb = l.bundle.x l.xs = l.source.x l.ys = l.source.y }) // compress vertical space var y_negative_offset = 0 levels.forEach(l => { y_negative_offset += -min_family_height + d3.min(l.bundles, b => d3.min(b.links, link => (link.ys-c)-(link.yt+c))) || 0 l.forEach(n => n.y -= y_negative_offset) }) // very ugly, I know links.forEach(l => { l.yt = l.target.y + l.target.bundles_index[l.bundle.id].i*metro_d - l.target.bundles.length*metro_d/2 + metro_d/2 l.ys = l.source.y l.c1 = l.source.level-l.target.level > 1 ? node_width+c : c l.c2 = c }) var layout = { height: d3.max(nodes, n => n.y) + node_height/2 + 2*padding, node_height, node_width, bundle_width, level_y_padding, metro_d } return {levels, nodes, nodes_index, links, bundles, layout} }34:T6b1,md`# Caderno de campo Passamos a semana seguinte observando tudo que se conectava aos temas que estavamos buscando investigar. Colecionando notícias, falas, imagens, etc. Um dos pesquisadores observou um diálogo entre mulheres, onde a Mulher1(Branca e moradora da zona sul do Rio de Janeiro) disse a frase: > Ninguém solta a mão de ninguém Essa frase foi viralizada após os resultados das eleição para presidente em 2019, através de variações desta imagem: ![Ninguém solta a mão de ninguém](http://vamoss.com.br/publico/mestrado/ninguem-solta-a-mao-de-ninguem.jpg) Em seguida a Mulher2(Negra e moradora de favela) respondeu: > Ninguém segura a mão de ninguém. Nunca segurou! Fizemos essa imagem para representar a questão da viralização com o discurso vazio alarmado pela Mulher2: ![Ninguém segura a mão de ninguém](http://vamoss.com.br/publico/mestrado/ninguem-segura-a-mao-de-ninguem.png) Outro elemento que somou na reflexão sobre os temas foi o relato a partir do documentário [O Silêncio dos Homens](https://www.youtube.com/watch?v=NRom49UVXCE). Onde observou-se como os homens tem dificuldade de se expressar, e vem propagando discursos machistas em detrimento da ausência paterna, ou de uma paternidade construída com pouco diálogo. O documentário traz ainda o papel dos Grupos de Reflexão como ferramenta para que estes homens possam esclarecer suas emoções, observar suas atitudes, buscar autoconhecimento e assim construir relações mais saudáveis. Neste processo, falar de suas fragilidades tem um papel fundamental, estes grupos de reflexões apresentam dinâmicas acolhedoras, onde expor a fragilidade pode se tornar ferramenta para promover a empatia. `35:[] 2e:{"title":"Cartografia Grupos de Reflexão","cells":[{"id":0,"value":"md`# Cartografia Grupos de Reflexão\nUtilizamos o Design Thinking para abordar problemas com soluções desconhecidas.\n\nNosso processo de trabalho subdividiu-se nestas etapas:\n\n![Ninguém segura a mão de ninguém](http://vamoss.com.br/publico/mestrado/processo.png)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`# Brainstorming\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Temas para debatidos\nA escolha do tema partiu de uma tempestade de ideias(brainstorming) que aqui vamos apresentar em forma de núvem de palavras(word cloud), as palavras em destaque foram escolhidas pelo grupo. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"example = wordCloud(data, 'palavra', 'selecionado')","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`# MindMap\n## O que estes temas tem em comum?\nRealizamos um debate inicial sobre o que estes temas remetem, e geramos um mapa mental(mind map).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`\nPercebemos que boa parte dos problemas destes 3 temas estão relacionados ao uso não saudável do celular, seja pelo uso demasiado, ou pela fuga da realidade através do uso das redes sociais.\n\nDaí buscamos representar o sentimento do grupo em uma imagem:\n\n![Todos sustentando celulares](http://vamoss.com.br/publico/mestrado/design-thinking-stage1.png)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`# Debate e reflexões\nAlgumas dúvidas surgiram, e buscamos chegar num consenso sobre as respostas:\n\nPor que usamos tanto o celular?\n\n> Queremos estar em todos os lugares porque temos medo de estar sozinhos!\n\nO que é fragilidade?\n\n> Fragilidade é onde quebramos.\n\nPor que não há empatia nas redes sociais?\n\n> Porque ao expor suas fragilidades no meio social, acabamos afastando as pessoas que estão sem tempo para lidar com elas. Nas redes sociais o imperativo são seus melhores momentos.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`# Problema\nChegamos no seguinte problema síntese:\n\n> Como conectar estes Grupos de Reflexão com as pessoas nas redes sociais?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`# Solução?\nHipótese: Acreditamos que o acesso à estes grupos de reflexão será facilitado através da construção de uma cartografia.\n\nO documentário (O Silêncio dos Homens) foi realizado em parceria com o site Papo de Homem. Neste site, encontram-se várias publicações que ampliam o debate do documentário, em uma destas publicações, encontra-se uma lista com [129 projetos/grupos de reflexão](https://papodehomem.com.br/transformacao-homens-masculinidades-projetos-iniciativas-pessoas/) que utilizamos como material de consulta primário.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`# Cartografia\nBuscar código que dê conta de apresentar os dados georeferenciados\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}