2b:null 2c:["$","title",null,{"children":"Como era seu esquema de trabalho antes da pandemia? | carolinaleslie | Observable"}] 31:Tc67,fazGrafico = function(Dados) { const svg = d3 .create("svg") .style("cursor", "default") .attr("viewBox", [0, 0, width, height]); const g = svg .selectAll(".waffle") .data(waffles) .join("g") .attr("class", "waffle"); if (!whole) { const numPerRow = Math.floor(width / (waffleSize + padding.x)); g.attr("transform", (d, i) => { var r = Math.floor(i / numPerRow); var c = i - r * numPerRow; return `translate(${c * (waffleSize + padding.x)},${r * (waffleSize + padding.y)})`; }); } const cellSize = scale.bandwidth(); const half = cellSize / 2; const cells = g .append("g") .selectAll(options.shape) .data(d => d) .join(options.shape) .attr("fill", d => (d.index === -1 ? "#ddd" : color(d.index))); if (isRect) { cells .attr("x", d => scale(d.x)) .attr("y", d => (whole ? 0 : scale(d.y))) .attr("rx", 3) .attr("ry", 3) .attr("width", cellSize) .attr("height", cellSize); } else { cells .attr("cx", d => scale(d.x) + half) .attr("cy", d => (whole ? 0 : scale(d.y) + half)) .attr("r", half); } if (whole) { cells.append("title").text(d => { const cd = Dados[d.index]; return `${cd.territory}:\n ${cd.ratio.toFixed(1)}%`; }); cells .transition() .duration(d => d.y * 100) .ease(d3.easeBounce) .attr(isRect ? "y" : "cy", d => scale(d.y) + (isRect ? 0 : half)); svg .transition() .delay(550) .on("end", drawLegend); } else { g.append("text") .style("font-size", 20) .style("font-weight", "bold") .attr("dy", "1.5em") .attr("text-anchor", "middle") .attr("fill", (d, i) => color(i)) .attr("transform", `translate(${waffleSize / 2},0)`) .text((d, i) => `${Dados[i].ratio.toFixed(0)}%`); g.append("g") .attr("transform", `translate(0,${waffleSize + padding.y / 2.5})`) .call(g => g.append("text").text((d, i) => Dados[i].territory)) .call( g => g.append("text").attr("dy", "1em") // .text((d, i) => chartData[i].profit) ); } return svg.node(); var legend; function drawLegend() { legend = svg .selectAll(".legend") .data(Dados.map(d => d.territory)) .join("g") .attr("opacity", 1) .attr("transform", (d, i) => `translate(${waffleSize + 20},${i * 30})`) .on("mouseover", highlight) .on("mouseout", restore); legend .append("rect") .attr("rx", 3) .attr("ry", 3) .attr("width", 30) .attr("height", 20) .attr("fill", (d, i) => color(i)); legend .append("text") .attr("dx", 40) .attr("alignment-baseline", "hanging") .text((d, i) => `${d} (${Dados[i].ratio.toFixed(1)}%)`); } function highlight(e, d, restore) { const i = legend.nodes().indexOf(e.currentTarget); cells .transition() .duration(500) .attr("fill", d => (d.index === i ? color(d.index) : "#ccc")); } function restore() { cells .transition() .duration(500) .attr("fill", d => color(d.index)); } }32:[] 2f:{"id":"ea4a1000f355ccff","slug":"como-era-seu-esquema-de-trabalho-antes-da-pandemia","title":"Como era seu esquema de trabalho antes da pandemia?","thumbnail":"7ab20f0c19891c8d8ecc6c5cb2fdee348f1cd3dbf93e3a0888a4c83571ef5955","access_level":"public","create_time":"$D2020-12-20T18:27:43.588Z","update_time":"$D2021-01-30T20:39:44.237Z","view_time":null,"first_public_time":"$D2020-12-23T19:26:49.807Z","has_unpublished_edits":null,"fork":{"id":"2cecde5741cc5888","slug":"waffle-chart","title":"Waffle Chart","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9efb35d6aa318769","login":"carolinaleslie","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a541452499e0f53b25ff46236d7f5ccf02d322bae9f9c7d0c2cf888899e20656","tier":"starter_2024"},"version":349,"publish_version":349,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Como era seu esquema de trabalho antes da pandemia?","cells":[{"id":0,"value":"md`# Como era seu esquema de trabalho antes da pandemia?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof options = form(html`

\n Style: \n Shape: \n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"fazGrafico(chartData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"//toCurrency = (num) => Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(num)\n//toCurrency = num => d3.format(\"$,.2f\")(num)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"//color = d3.scaleOrdinal(d3.schemeTableau10)\ncolor = d3\n .scaleOrdinal([\"#cd34b5\", \"#0000ff\", \"#ffd700\"])\n .domain(sequence(chartData.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"scale = d3.scaleBand()\n .domain(sequence(10))\n .range([0, waffleSize])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"sequence = (length) => Array.apply(null, {length: length}).map((d, i) => i);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"whole = options.style === \"whole\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"isRect = options.shape === \"rect\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"chartData = d3.tsvParse(dadosrawAntes, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"chartDataDurante = d3.tsvParse(dadosrawDurante, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"chartDataIdeal = d3.tsvParse(dadosrawIdeal, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"dadosrawAntes = `territory\tQuando\tprofit\tratio\nSem home office\tAntes da pandemia\t1251\t73\nDe 1 a 3 dias\tAntes da pandemia\t367\t21\nMais de 4 dias\tAntes da pandemia\t96\t6`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"dadosrawDurante = `territory\\tQuando\\tprofit\\tratio\nDe 1 a 3 dias na semana\tAgora (nov/dez 2020)\t46\t3\nEu não estou trabalhando em home office\tAgora (nov/dez 2020)\t34\t2\nMais de 4 dias / tempo integral\tAgora (nov/dez 2020)\t1653\t95 \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"dadosrawIdeal = ` territory\\tQuando\\tprofit\\tratio\nDe 1 a 3 dias na semana\tIdeamente\t1006\t57\nMais de 4 dias / tempo integral\tIdeamente\t683\t39\nNão trabalhar em home office\tIdeamente\t70\t4\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"waffles = {\n var array = [];\n if (whole) {\n const max = chartData.length; \n var index = 0, curr = 1, \n accu = Math.round(chartData[0].ratio), waffle = [];\n \n for (var y = 9; y >= 0; y--)\n for (var x = 0; x < 10; x ++) {\n if (curr > accu && index < max) {\n var r = Math.round(chartData[++index].ratio);\n while(r === 0 && index < max) r = Math.round(chartData[++index].ratio);\n accu += r;\n }\n waffle.push({x, y, index});\n curr++;\n } \n array.push(waffle);\n }\n else {\n chartData.map((d, i) => {\n var curr = 0, waffle = [];\n for (var y = 9; y >= 0; y--)\n for(var x = 0; x < 10; x ++) {\n waffle.push(({x, y, index: curr < Math.round(d.ratio) ? i : -1}));\n curr++;\n }\n array.push(waffle);\n });\n } \n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"width = 1024","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"padding = ({x: 10, y: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"waffleSize = whole ? width < height ? width : height : 150;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"