2d:null 2e:["$","title",null,{"children":"Muhammad Ali | Alexandre R. Cajazeira Ramos | Observable"}] 33:T198e,chart = { var mobile = 0; if(chartWidth<600) mobile = 1; var active = d3.select(null); var svg = d3.select( DOM.svg(chartWidth, chartHeight*2) ); const gMap = svg.append("g") .style("stroke-width", "1.5px") .attr("transform", 'translate('+margin.left+','+(margin.top+chartHeight)+')'); gMap.selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", d => path(d)) .style('fill', '#B6C8E3') .style('stroke', 'white') .style('stroke-width', '1px'); // var mapTitle = svg.append('text') // .attr('class', 'title') // .attr('y', chartHeight+ (mobile?20:10)) // .attr('x', margin.left) // .attr('fill', 'black') // .text("Veja no mapa onde as lutas ocorreram:"); const dotRadius = 4; var xScale = d3.scaleTime() .domain(dayExtent) .range([0, innerWidth]); var xAxis = d3.axisBottom(xScale) .ticks(5) .tickSize(-innerHeight); var xAxisG = svg.append('g').call(xAxis) .attr('transform', `translate(${(margin.left-dotRadius)},${(innerHeight+margin.top)})`); var xAxisLabel = xAxisG.append('text') .attr('class', 'axis-label') .attr('y', mobile?25:40) .attr('x', innerWidth / 2) .attr('fill', 'black') .text("Anos"); // xAxisG.select('.domain').remove(); var yScale = d3.scaleLinear() .domain([0, 61]) .range([innerHeight,0]); var gYAxis = svg.append("g") .attr("transform", "translate("+(margin.left-dotRadius)+","+margin.top+")"); var yAxis = gYAxis.append('g') .call(d3.axisLeft(yScale).ticks(4)) .selectAll('.domain') .remove(); var yAxisLabel = gYAxis.append('text') .attr('class', 'axis-label') .attr('y', -40) .attr('x', -(innerHeight/2)) .attr('fill', 'black') .attr("transform", "rotate(-90)") .attr('text-anchor',"middle") .text("Nº de Vitórias"); var gDestaque = svg.append("g") .attr("transform", "translate("+(margin.left-dotRadius)+","+margin.top+")"); var x = xScale(new Date(1967,5,20)), barWidth = xScale(new Date(1970,9,26))-x; gDestaque .append('rect') .attr('x',x) .attr('y',0) .attr('width',barWidth) .attr('height',innerHeight) .attr('opacity',0.1) gDestaque.append('text') .attr('class', 'destaque') .attr('y', yScale(57)) .attr('x', x+5) .attr('fill', 'black') .text("Período de"); gDestaque.append('text') .attr('class', 'destaque') .attr('y', yScale(mobile?50:54)) .attr('x', x+5) .attr('fill', 'black') .text("Suspensão"); var legenda = svg.append("g") .attr("transform", "translate("+(margin.left-dotRadius)+","+margin.top+")"); var gDots = svg.append("g") .attr("transform", "translate("+(margin.left-dotRadius)+","+margin.top+")"); var tooltip = svg.append("g"); var tooltip2 = svg.append("g") .attr("transform", 'translate('+margin.left+','+(margin.top+chartHeight)+')'); function plotPoints(dataPoints) { const leg_height = mobile?10:20; const resultados = dataPoints.map(d=> d.Resultado), resultados_count = d3.rollup(resultados, v => v.length, d => d); legenda.selectAll("rect").remove(); legenda.selectAll("rect") .data(resultados_count) .enter() .append('rect') .attr('x',10) .attr('y',(d,i) => i*leg_height + leg_height) .attr("stroke-width", 0.4) .attr("stroke", 'black') .attr('width',leg_height) .attr('height',leg_height) .attr('fill',d=> d[0] == 'Vitória'?'#11a579':'#cc503e') .attr('opacity',0.9); legenda.selectAll("text").remove(); legenda.selectAll("text") .data(resultados_count) .enter() .append('text') .attr('class', 'legenda') .attr('x',13+leg_height) .attr('y',(d,i) => i*leg_height + leg_height*1.8) .text(d=> d[1]+" "+d[0]+"(s)"); gDots.selectAll("circle").remove(); gDots.selectAll("circle") .data(dataPoints) .enter() .append("circle") .attr("fill", d=> d.Resultado == 'Vitória'?'#11a579':'#cc503e') .attr('opacity', d=> (oponente == "" | oponente == d.Oponente)?0.9:0.2) .attr("stroke-width", 0.4) .attr("stroke", 'black') .attr("cx", d=>{return xScale(d.dtg)}) .attr("cy", d=>{return yScale(d.num_de_vit)}) .attr("r", dotRadius).on("touchmove mousemove", function(event, d) { const tx = margin.left + innerWidth/3; const ty = 50; tooltip.call(callout,`${d.nLuta}º luta: ${d.Resultado} Oponente: ${d.Oponente} Método: ${d.Método} Local: ${d.Local} Data: ${d.Data} `); tooltip.attr("transform", `translate(${tx}, ${ty})`); d3.select(this) .attr("weight", 2) .attr("color", 'black') .attr("fill", 'black') .attr("r", dotRadius*2) .raise();}) .on("touchend mouseleave", function() { tooltip.call(callout, null); d3.select(this) .attr("fill", d=> d.Resultado == 'Vitória'?'#11a579':'#cc503e') .attr("r", dotRadius) .lower(); }); gMap.selectAll("circle").remove(); gMap.selectAll("circle") .data(dataPoints) .enter() .append("circle") .attr("fill", d=> d.Resultado == 'Vitória'?'#11a579':'#cc503e') .attr('opacity', d=> (oponente == "" | oponente == d.Oponente)?1:0) .attr("stroke-width", 0.4) .attr("stroke", 'black') .attr("cx", d=>projection([d.lng,d.lat])[0]) .attr("cy", d=>projection([d.lng,d.lat])[1]) .attr("r", dotRadius).on("touchmove mousemove", function(event, d) { const tx = innerWidth/2 +margin.left; const ty = chartHeight+margin.top; tooltip2.call(callout,`${d.nLuta}º luta: ${d.Resultado} Oponente: ${d.Oponente} Método: ${d.Método} Local: ${d.Local} Data: ${d.Data} `); tooltip2.attr("transform", `translate(${tx}, ${ty})`); d3.select(this) .attr("weight", 2) .attr("color", 'black') .attr("fill", 'black') .attr("r", dotRadius*2) .raise();}) .on("touchend mouseleave", function() { tooltip2.call(callout, null); d3.select(this) .attr("fill", d=> d.Resultado == 'Vitória'?'#11a579':'#cc503e') .attr("r", dotRadius) // .lower();; ; }); } return Object.assign(svg.node(), { plotPoints: plotPoints, }); }34:[{"id":"ee7e1871557ad67d98e5cb1d7547fd53b7f408cfcc21da9443179eb2abe143dec99e22826e4ae97728c6c3955c1e91baae1d6fdd68718ccdc85f4e3dbe5066ff","href":"https://static.observableusercontent.com/files/ee7e1871557ad67d98e5cb1d7547fd53b7f408cfcc21da9443179eb2abe143dec99e22826e4ae97728c6c3955c1e91baae1d6fdd68718ccdc85f4e3dbe5066ff","name":"Lutas.csv","type":"text/csv","lastModified":1642074902331.849,"size":6025},{"id":"b90c5c258f735f2dd062544b2d87f3616d3cd969841d3e55ddc5588ff6e32d7ed1a68b07c9f428dc8f172a8d94c20846d987e3417a23b3e7ee03a60a63a1e051","href":"https://static.observableusercontent.com/files/b90c5c258f735f2dd062544b2d87f3616d3cd969841d3e55ddc5588ff6e32d7ed1a68b07c9f428dc8f172a8d94c20846d987e3417a23b3e7ee03a60a63a1e051","name":"lutas.csv","type":"text/csv","lastModified":1642095055655.301,"size":7449}] 31:{"id":"7277812aa66b0418","slug":"lutas-muhammad-ali","title":"Muhammad Ali","thumbnail":"06b7afa272ea68ad203cdcdb8ce5524c257b7b421061d055764bdfd3d0c03bac","access_level":"public","create_time":"$D2022-01-13T11:51:29.709Z","update_time":"$D2022-01-14T18:02:36.104Z","view_time":null,"first_public_time":"$D2022-02-08T12:33:26.596Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8e753d8464d231a8","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/24092c234c1e156d4478bb8314522bb1b37a8ec8ee43d8a161f6931e7d8e6bed","tier":"starter_2024"},"version":430,"publish_version":430,"role":null,"authored":false,"authors":[{"type":"individual","id":"273de8807df2d5cc","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/b3a734ec21bf9f0bb7a0ecaacac5767f34267e9be1b061f79faf1fb9146aa44d","tier":null}],"members":[{"type":"individual","id":"273de8807df2d5cc","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos","avatar_url":"https://avatars-next.observableusercontent.com/b3a734ec21bf9f0bb7a0ecaacac5767f34267e9be1b061f79faf1fb9146aa44d","tier":null,"role":"editor"},{"type":"individual","id":"26eebf100421abdc","login":"levyks","name":"Levy Barbosa","avatar_url":"https://avatars.githubusercontent.com/u/16294244?v=4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"6ad1142fbeacff4b","slug":"datadoc","title":"DATADOC / OPOVO","owner":{"id":"8e753d8464d231a8","login":"cajazeiraramos","name":"Alexandre R. Cajazeira Ramos"}},"type":"notebook","body":{"title":"Muhammad Ali","cells":[{"id":0,"value":"# Muhammad Ali","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"title = md`# Lutas de Muhammad Ali`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"viewof oponente = autoSelect({\n options: uniq_oponentes,\n placeholder: \"Pesquise um Oponente . . .\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof time = Scrubber(steps, { delay: 50, format: d => \"Lutas até: \"+ d3.timeFormat(\"%m/%Y\")(d), loop: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"fonte = {\n const tam = chartWidth > 600? 18:12;\n const fonte = htl.html`\n Fonte: Levantamento DATADOC, inspirado na análise de Jofre Espigule-Pons\n \n\n
\n.\n\n`\n return fonte;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"resultados = filteredPoints.map(d=> d.Resultado)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"resultados_count = d3.rollup(resultados, v => v.length, d => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"plotPoints = {\n chart.plotPoints(filteredPoints);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"lutas = {\n var num_de_vit = 0, luta = 0\n const formatTime = d3.timeParse(\"%Y-%m-%d\");\n \n const dataRaw = d3.csvParse(await FileAttachment(\"lutas.csv\").text())\n // ['Resultado', 'Oponente', 'Método', 'Round, Duração', 'Data', 'Idade','Local','dtg','lat','lng']\n dataRaw.forEach((d,i) => \n {\n d.dtg = formatTime(d.dtg);\n if(d.Resultado == 'Vitória')\n num_de_vit+=1; \n d.num_de_vit = num_de_vit;\n luta += 1;\n d.nLuta = luta;\n d.lat = +d.lat;\n d.lng = +d.lng;\n \n });\n return dataRaw;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"dayExtent = d3.extent(lutas, d => d.dtg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"steps = \n d3.timeMonth\n .range(dayExtent[0], d3.timeDay.offset(dayExtent[1],30))\n .map(d => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"filteredPoints = lutas.filter(d => d.dtg <= time)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"oponentes = lutas.map(d=> d.Oponente);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"uniq_oponentes = [...new Set(oponentes)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"locais = lutas.map(d=> d.Local);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"uniq_locais = [...new Set(locais)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"chartWidth = Math.min(1000,width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"chartHeight = chartWidth*0.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"margin = { \n return {top: chartHeight*0.15, right: chartWidth*0.1, bottom: chartHeight*0.15, left: chartWidth*0.1};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"innerWidth = chartWidth - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"innerHeight = chartHeight - margin.top - margin.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"projection = d3.geoEquirectangular()\n .fitSize([innerWidth, chartHeight], countries);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"path = d3.geoPath()\n .projection(projection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"import {callout} from \"@cronaline/mexico-with-mercator-projection-and-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"import {autoSelect} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"