2d:null 2e:["$","title",null,{"children":"Passe o mouse e navegue pelos principais vídeos do canal oficial de Marília Mendonça no Youtube, que já somam mais de 13 Bilhões de visualizações. | Alexandre R. Cajazeira Ramos | Observable"}] 33:T157e,vor_chart = { const chartWidth = width*0.8; const svg = d3.create("svg") .attr("width", chartWidth + margin.left + margin.right) .attr("height", height + margin.bottom + margin.top); const background = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .selectAll('path') .data(nodes.filter(d => d.depth == 1), d => d.data.key) .join('path') .attr('d', d => "M" + d.polygon.join("L") + "Z") const clipPathLookup = {} svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .selectAll('clipPath') .data(nodes.filter(d => d.depth == 1), d => d.data.key) .join("clipPath") .attr("id", d => { const uid = DOM.uid("clip") clipPathLookup[d.data.key] = uid return uid.id }) .append("path") .attr('d', d => "M" + d.polygon.join("L") + "Z") const voronoi = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .selectAll('path') .data(nodes.filter(d => d.depth == 2), d => d.data.id) .join('path') .attr('d', d => "M" + d.polygon.join("L") + "Z") .style('fill', function (d) { if(d.data.title == selectedVideo) return selectcolor return bgcolor }) .attr("clip-path", d => clipPathLookup[d.data.parent]) .attr("stroke", "#fff") .style("cursor", "pointer") .on("mouseenter", function(d) { const thisPath = d3.select(this) .classed("selected", true); let label = labels.select(`.label-${d.data.id}`); label.attr('opacity', 1) // label.text(d => d.data.title) let view_label = view_labels.select(`.label-views-${d.data.id}`); view_label.attr('opacity', 1) // view_label.text(d => d3.format(".2s")(d.data.views).replace("G"," Bi") +" visualizações") thisPath.moveToFront() .transition() .attrTween("d", function(d) { const oldPath = thisPath.attr("d") const newPath = slightlyExpand(oldPath) const interpolator = flubber.interpolate(oldPath, newPath); return interpolator }); thisPath.style('fill', selectcolor) }) .on("mouseleave", function(d) { const thisPath = d3.select(this) .classed("selected", false) thisPath.style('fill', bgcolor) let label = labels.select(`.label-${d.data.id}`); label.attr('opacity', 0) let view_label = view_labels.select(`.label-views-${d.data.id}`); view_label.attr('opacity', 0) thisPath .transition() .attrTween("d", function(d) { const oldPath = thisPath.attr("d") const newPath = "M" + d.polygon.join("L") + "Z" const interpolator = flubber.interpolate(oldPath, newPath); return interpolator }).on("end", () => { thisPath .attr("clip-path", d => clipPathLookup[d.data.parent]); }) svg.select(".exit") .transition() .style("opacity", 0) }) .on("click", d => window.open( 'https://www.youtube.com/watch?v='+ d.data.id, '_blank' ) ) const labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const view_labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let hoveredShape = null; labels.selectAll('text') .data(nodes.filter(d => d.depth == 2), d => d.data.key) .enter() .append('text') .attr('class', d => `label-${d.data.id}`) .attr('text-anchor', 'middle') .attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y+6]+")") .text(d => d.data.title.replace("(TODOS OS CANTOS)","").replace("(Todos Os Cantos)","") .replace("(Agora Que São Elas 2)","") .split("feat.")[0] .split("#")[0]) // .attr('opacity', '0') .attr('opacity', function (d) { if(d.data.title == selectedVideo) return 1 return 0 }) // .attr('opacity', function(d) {if(d.data.views > 445000000) { return(1); }else {return(0);}}) .attr('cursor', 'default') .attr('pointer-events', 'none') .attr('fill', 'black') .style('font-family', 'Arial') .style('font-weight', 'bold'); view_labels.selectAll('text') .data(nodes.filter(d => d.depth == 2), d => d.data.key) .enter() .append('text') .attr('class', d => `label-views-${d.data.id}`) .attr('text-anchor', 'middle') .attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y+25]+")") .text(d => d3.format(".2s")(d.data.views).replace("G"," Bi") +" visualizações") .attr('opacity', function (d) { if(d.data.title == selectedVideo) return 1 return 0 }) // .attr('opacity', function(d) {if(d.data.views > 445000000) { return(1); }else {return(0);}}) .attr('cursor', 'default') .attr('pointer-events', 'none') .attr('fill', 'black') .style('font-family', 'Arial') .style('font-weight', 'bold'); svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .attr("class", "exit") .style("opacity", 0) .append("text") .attr("transform", `translate(${width - 30}, ${30})`) .text("X") .style("font", "24px sans-serif") return svg.node(); }34:T425,slightlyExpand = (currentPath) => { const points = currentPath.replace("M",'').replace("Z","").split("L") const newPoints = [] let minX = width; let minY = height; let maxX = 0; let maxY = 0; for(let i = 0; i < points.length; i++) { const coord = points[i].split(","); const x = +coord[0]; const y = +coord[1]; if(x > maxX) maxX = x; if(x < minX) minX = x; if(y > maxY) maxY = y; if(y < minY) minY = y; } const w = maxX - minX; const h = maxY - minY; for(let i = 0; i < points.length; i++) { const coord = points[i].split(","); const x = +coord[0]; const y = +coord[1]; const xPerc = (x - minX) / w ; const yPerc = (y - minY) / h; let xOffset = xPerc > .75 ? expandDegree : xPerc < .25 ? -expandDegree : 0; let yOffset = yPerc > .75 ? expandDegree : yPerc < .25 ? -expandDegree : 0; if(x >= width - 5 || x <= 5) xOffset = 0; if(y >= height - 5 || y <= 5) yOffset = 0; newPoints.push(`${x + xOffset},${y + yOffset}`) } return `M ${newPoints.join("L")} Z`; }35:[{"id":"4fdbad796e8410f6910d00e800c23157358f0cfbcb91c988e1cd86cbaf0dee62509cbfba1c3845f995bd870f31fd1909e4dcffe7cf6ac6c9c4887785d6aee045","href":"https://static.observableusercontent.com/files/4fdbad796e8410f6910d00e800c23157358f0cfbcb91c988e1cd86cbaf0dee62509cbfba1c3845f995bd870f31fd1909e4dcffe7cf6ac6c9c4887785d6aee045","name":"MM_youtubeVideos.csv","type":"text/csv","lastModified":1636387446843.482,"size":35008}] 31:{"id":"e790d3e404e37902","slug":"voronoi-marilia-mendonca-videos","title":"Passe o mouse e navegue pelos principais vídeos do canal oficial de Marília Mendonça no Youtube, que já somam mais de 13 Bilhões de visualizações.","thumbnail":"2941f03bac69ad91a2aa76ca5da902531130c1fd3030597ca6d45f49bf5abc3c","access_level":"public","create_time":"$D2021-11-08T15:27:15.736Z","update_time":"$D2021-12-14T12:01:01.196Z","view_time":null,"first_public_time":"$D2021-11-08T19:01:30.831Z","has_unpublished_edits":null,"fork":{"id":"d6e05f98ae5c0fbf","slug":"expanding-voronoi-treemap","title":"Expanding Voronoi Treemap","owner":{"id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa"}},"stars":3,"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":819,"publish_version":819,"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"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Passe o mouse e navegue pelos principais vídeos do canal oficial de Marília Mendonça no Youtube, que já somam mais de 13 Bilhões de visualizações.","cells":[{"id":0,"value":"# Passe o mouse e navegue pelos principais vídeos do canal oficial de [Marília Mendonça no Youtube](https://www.youtube.com/channel/UCwfEOn0O1DWcyTgzVVu28ig), que já somam mais de ${viewsCountResumo} de visualizações.\n\nQuanto maior a área, mais visualizações tem o vídeo. Para assistir no youtube, basta clicar. No Total, contabilizamos ${viewsCount} de views, ${likesCount} de likes e ${commentCount} de comentários. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"viewof minViews = slider({\n title: \"Minimo de Visualizações\",\n min: 146000,\n max: 540000000,\n step: 10,\n value: 146000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"viewof maxViews = slider({\n title: \"Máximo de Visualizações\",\n min: minViews+1000,\n max: 550000000,\n step: 10,\n value: 550000000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"subTitle = md`# Passe o mouse e descubra os maiores sucessos de Marília Mendonça no Youtube, que já somam 13 Bilhões de visualizações.\n\nPara assistir um dos vídeos, clique no diagrama. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"viewof selectedVideo = autoSelect({\n options: videoData.map(d => d.title),\n placeholder: \"Pesquise um vídeo . . .\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"fonte = md`Levantamento DATADOC / OPOVO. \nColeta via [Youtube Data API](https://developers.google.com/youtube/v3), em 08/11, às 10h20min.\nEssa página foi uma adaptação da implementação [Expanding Voronoi Treemap](https://observablehq.com/@pstuffa/expanding-voronoi-treemap)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof expandDegree = slider({\n min: 0, \n max: 50,\n step: 1,\n value: 20,\n title: 'Degree of Expansion'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"viewof bgcolor = Inputs.color({label: \"BG Color\", value: \"#9fb2b7\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"viewof selectcolor = Inputs.color({label: \"Select Color\", value: \"#ffdd00\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"margin = ({top: 10, bottom: 5, left: 30, right: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"allData = FileAttachment(\"MM_youtubeVideos.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"videoData = allData.filter(d => {return (d.views >= minViews & d.views <= maxViews)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"structuredRandomData2 = nestAndHier2(videoData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"nestAndHier2 = (flatData) => {\n const nestedArray = d3.nest()\n .key(d => d.titulo)\n .entries(flatData)\n \n const hierarchyObject = {key: \"video_data\", values: nestedArray};\n \n return d3.hierarchy(hierarchyObject, d => d.values).sum(d => d.views)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"voronoiTreeMap = d3.voronoiTreemap()\n .clip([[0,0], [width, 0], [width, height], [0, height]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"getBBox = (path) => {\n const points = path.replace(\"M\",'').replace(\"Z\",\"\").split(\"L\")\n const newPoints = []\n let minX = width;\n let minY = height;\n let maxX = 0;\n let maxY = 0;\n for(let i = 0; i < points.length; i++) {\n const coord = points[i].split(\",\");\n const x = +coord[0];\n const y = +coord[1];\n if(x > maxX) maxX = x;\n if(x < minX) minX = x;\n if(y > maxY) maxY = y;\n if(y < minY) minY = y;\n }\n const w = maxX - minX;\n const h = maxY - minY;\n \n return {\n x: minX,\n y: minY,\n width: w,\n height: h,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"root = {\n voronoiTreeMap(structuredRandomData2)\n return structuredRandomData2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"nodes = root.descendants()\n .sort((a, b) => b.depth - a.depth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"viewsCount = d3.sum(allData, d => d.views).toLocaleString('pt')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"viewsCountResumo = d3.format(\".2s\")(d3.sum(allData, d => d.views)).replace(\"G\",\" Bilhões\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"likesCount = d3.sum(allData, d => d.likes).toLocaleString('pt')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"commentCount = d3.sum(allData, d=> d.comment).toLocaleString('pt')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`## Imported Modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"flubber = require('flubber')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"d3.selection.prototype.moveToFront = function() {\n return this.each(function(){\n this.parentNode.appendChild(this);\n });}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"import {autoSelect} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"