2a:null 2b:["$","title",null,{"children":"Barra circular - estudo inicial parte 2 | carolinaleslie | Observable"}] 30:T628,chart = { const svg = d3 .create("svg") .attr("id", "cg") .attr("viewBox", [0, 0, width, Height]); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", Height) .attr('fill', "#000"); for (let i = 0; i < 200; i++) { let star = svg .append('circle') .attr('cx', Math.random() * width) .attr('cy', Math.random() * Height) .attr('r', Math.random() * 2) .attr('opacity', Math.random()) .attr('fill', '#fff') .attr('class', 'stars'); } svg .selectAll('path') .data(dados) .enter() .append('path') .attr( 'transform', (d, i) => `translate(${calculateGridPos(i)}) rotate(160)` ) .attr('class', '.genero') .attr('d', d => balaoSimplesMenor) .attr('fill', d => color(d.Sexo)) .attr('stroke', d => color(d.Sexo)) .attr('fill-opacity', 0.65) .attr('stroke-width', 2); svg .selectAll('estrelas') .data(dados) .enter() .append('circle') .attr('transform', (d, i) => `translate(${calculateGridPos(i)})`) .attr('cx', -40) .attr('cy', -15) .attr('r', 5) .attr('fill', d => colorestrela(d.Turno)) .attr('fill-opacity', 0.6) .attr('stroke-width', 2); svg .selectAll('text') .data(dados) .enter() .append('text') .attr('transform', (d, i) => `translate(${calculateGridPos(i)})`) .text(d => d.Nome) .attr('y', 20) .attr('text-anchor', 'middle') .style('font-size', '16px') .attr('fill', "White"); return svg.node(); }31:T785,{ const svg = d3 .create("svg") .attr("id", "cg") .attr("viewBox", [0, 0, width, Height]); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", Height) .attr('fill', "#000"); for (let i = 0; i < 100; i++) { let star = svg .append('circle') .attr('cx', Math.random() * width) .attr('cy', Math.random() * Height) .attr('r', Math.random() * 2) .attr('opacity', Math.random()) .attr('fill', '#fff') .attr('class', 'stars'); } // svg // .selectAll('path') // .data(dados) // .enter() // .append('path') // .attr( // 'transform', // (d, i) => `translate(${calculateGridPos(i)}) rotate(160)` // ) // .attr('class', '.genero') // .attr('d', d => balaoSimplesMenor) // .attr('fill', d => color(d.Sexo)) // .attr('stroke', "White") // .attr('fill-opacity', 0.65) // .attr('stroke-width', 2); svg .selectAll('path') .data(baloes) .enter() .append('path') .attr( 'transform', (d, i) => `translate(${d.translate}) rotate(160) scale(${d.scale || 1})` ) .attr('d', d => d.path) .attr('fill', d => d.color) .attr('fill-opacity', 0.65) .attr('stroke', d => d.color); svg .selectAll('estrelas') .data(dados) .enter() .append('circle') .attr('transform', (d, i) => `translate(${calculateGridPos(i)})`) .attr('cx', -40) .attr('cy', -15) .attr('r', 5) .attr('fill', d => colorestrela(d.Turno)) .attr('fill-opacity', 0.6) .attr('stroke-width', 2); svg .selectAll('text') .data(dados) .enter() .append('text') .attr('transform', (d, i) => `translate(${calculateGridPos(i)})`) .text(d => d.Nome) .attr('y', 20) .attr('text-anchor', 'middle') .style('font-size', '16px') .attr('fill', "White"); return svg.node(); }32:[{"id":"a6cbac24bf4900abefed054c789802ef7bb48ab8789f64e080543e1e578f352cb81527b3a8734206d5147f192add2ec138bfa391e5263dbd179a82d367722c54","href":"https://static.observableusercontent.com/files/a6cbac24bf4900abefed054c789802ef7bb48ab8789f64e080543e1e578f352cb81527b3a8734206d5147f192add2ec138bfa391e5263dbd179a82d367722c54","name":"Obitos Cidade Sao Paulo - 2020.csv","type":"text/csv","lastModified":1607260490356.194,"size":5411},{"id":"ade7b62247b2ca52376f91dda54cea387d105916ad9465ec2568229ee0670efd3505ffd0cf9e1925cb125e98b97289981a4bc5696fd02dae6e0ea89607b10456","href":"https://static.observableusercontent.com/files/ade7b62247b2ca52376f91dda54cea387d105916ad9465ec2568229ee0670efd3505ffd0cf9e1925cb125e98b97289981a4bc5696fd02dae6e0ea89607b10456","name":"Obitos Cidade Sao Paulo - 2020-3.csv","type":"text/csv","lastModified":1607280842106.058,"size":5674}] 2e:{"id":"39afa086cce412f9","slug":"barra-circular-estudo-inicial-parte-2","title":"Barra circular - estudo inicial parte 2","thumbnail":"4070d0440122aeee7f419ab7f42eb50ee4c51188295b8c706cfd3c797446c9f6","access_level":"public","create_time":"$D2020-12-06T13:14:50.356Z","update_time":"$D2020-12-13T22:39:50.429Z","view_time":null,"first_public_time":"$D2020-12-06T13:48:48.602Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9efb35d6aa318769","login":"carolinaleslie","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a541452499e0f53b25ff46236d7f5ccf02d322bae9f9c7d0c2cf888899e20656","tier":"starter_2024"},"version":446,"publish_version":446,"role":null,"authored":false,"authors":[{"type":"individual","id":"56441b69f57f787c","login":"carolinaleslie","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a541452499e0f53b25ff46236d7f5ccf02d322bae9f9c7d0c2cf888899e20656","tier":null}],"members":[{"type":"individual","id":"56441b69f57f787c","login":"carolinaleslie","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a541452499e0f53b25ff46236d7f5ccf02d322bae9f9c7d0c2cf888899e20656","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Barra circular - estudo inicial parte 2","cells":[{"id":0,"value":"md`# Barra circular - estudo inicial parte 2 \n\n## Parte 1 - desenhando o balão `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"BalaoSimples = html`\n\n100px\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"BalaoSimples2 = html`\n\n100px\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"Combinabaloes = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"balaoSimples = \"M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0\"\n\n//\"M0,100 C50,60 50,50 0,0 C-50,50 -50,60 0,100\"\n//\"M0,0 C50,40 50,70 0,100 C-50,70 -50,40 0,0\"\n// M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\n// G: \"M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0\"\n// PG: \"M-35 0 C-25 25 25 25 35 0 C50 25 25 75 0 100 C-25 75 -50 25 -35 0\"\n// PG-13: \"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\"\n// R: \"M0 0 C50 25 50 75 0 100 C-50 75 -50 25 0 0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"BalaoSimplesMe = html`\n\n100px\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"balaoSimplesMenor = \"M0 0 C40 40 40 80 0 80 C-40 80 -40 40 0 0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`## Parte 2 - unindo os balões aos dados `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"{\n const svg = html`\n \n `;\n\n const path = d3\n .select(svg)\n .selectAll('path')\n .data(dados)\n .attr('fill', d => color(d.Sexo))\n .attr('fill-opacity', 0.5)\n .attr('stroke-width', 2)\n .attr('stroke', d => color(d.Sexo));\n console.log(path);\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"dados = await d3.csvParse(\n await FileAttachment(\"Obitos Cidade Sao Paulo - 2020-3.csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"color = d3.scaleOrdinal([\"#3AAE48\", \"#891EAC\"]).domain(dados.map(d => d.Sexo))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`## Parte 3 - Um balão por dado \n\nDúvidas atuais:\n* Deixar as estrelas com um gradiente radial\n* Incluir um segundo balão por acidente, codificando a informação sobre outro veículo envolvido\n* Ilustrar a faixa etária com bolinhas sobre o balão de gênero // ou ilustrar faixa estária pelo tamanho do balão\n* Buscar os nomes das vítimas e incluir em cada balão\n* Conseguir manter fundo de estrelas e estrela indicando o horário do acidente\n* Criar legendas\n* Desenhar o fio dos balões\n* Desenhar uma ghost bike apenas ilustrativa na base da imagem`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"calculateGridPos = i => {\n return [\n ((i % perRow) + 0.5) * pathWidth,\n (Math.floor(i / perRow) + 0.75) * pathWidth\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"perRow = Math.floor(width / pathWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"pathWidth = 140","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"colorestrela = d3\n .scaleOrdinal([\"#000\", \"#FFFF3E\", \"#FFCB50\", \"#FFFF3E\", \"#000\"])\n .domain(dados.map(d => d.Turno))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"md`## Parte 4 - organizando os dados `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"baloes = {\n const variacaoidade = d3.extent(dados, d => d.IdadeVtM);\n const sizeScale = d3\n .scaleLinear()\n .domain(variacaoidade)\n .range([0.3, 0.8]);\n\n return _.map(dados, (d, i) => {\n return {\n title: d.Nome,\n translate: calculateGridPos(i),\n color: corbalao(d.Sexo),\n genero: d.Sexo,\n path: balaoSimples,\n scale: sizeScale(d.IdadeVtM)\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"corbalao = d3\n .scaleOrdinal([\"#3AAE48\", \"#891EAC\"])\n .domain(dados.map(d => d.Sexo));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"md`## Parte 4 `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"container = {\n const svg = d3\n .create(\"svg\")\n .attr(\"id\", \"cg\")\n .attr(\"viewBox\", [0, 0, width, Height]);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"g = svg\n .selectAll('g')\n .data(baloes)\n .enter()\n .append('g')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"text = g.append('text')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"svg = d3.select(container).select('svg')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`## Apoio `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"Height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"