2b:null 2c:["$","title",null,{"children":"D3 - Hollywood Age Gap - Atividade | T3L35 | Observable"}] 31:T47f,html`

Vis do PPGCC UFCG - Teles Sales

Analisando o perfil de atores e atrizes

A intenção deste Observable notebook é realizar uma breve análise sobre os dados do projeto de @lynnandtonic que analisa a diferença de idade entre as partes de pares românticos nos filmes de Hollywood.

A intenção aqui não é aprofundar-se muito, mas sim mostrar alguns recursos do D3.js na utilização em visualizações de dados.

Contexto e breve descrição do dataset

O dataset utilizado aqui traz informações sobre filmes do gênero romântico desde 1939 até 2017, foram coletadas informações sobre os atores e atrizes que protagonizaram os casais dos filmes.

Alguns dos dados que podemos destacar são:

release_year: Data de lançamento do filme
actor_1_age : Idade do(a) ator/atriz 1 no release_year
actor_2_age : Idade do(a) ator 2/atriz no release_year
age_difference: Diferença de idade entre o actor_1_age e o actor_2_age

`32:T42c,html`

Breve análise utilizando uma vis do D3

Podemos realizar uma breve análise sobre os dados que temos. A idéia aqui é podermos vermos os dados das diferenças de idades espalhados ao longo dos anos por meio de um scatter plot em D3. O que é possível ver na representação gráfica a seguir é que entre os anos 40 até os anos 90 a diferença de idade entre pares de filmes não era concentrado em altas ou baixas diferenças de idade.

Porém, ao enxergarmos o intervalo a partir dos anos 2000 até dias atuais vemos que há uma maior concentração de baixas diferenças de idades. O que podemos concluir é que filmes mais antigos não se importavam tanto com o quanto um par era mais velho que o outro. Mas em filmes mais recentes vemos uma maior preocupação em manter idades próximas entre pares de filmes. Um dado a ser acrescentado nesta análise é que nos dados utilizados temos em sua maioria a presença masculina como 1º ator, e quando este é o 1º ator tem uma tendência de ser mais velho que seu par.

`33:[{"id":"2693f323248edb723d359360a2305ab4eb3386d63330a4bd31644a505591f287856a64bb6b16d7a9384b7de30c4c4dc31a74bef012e5a8d4026eadd141235f3b","href":"https://static.observableusercontent.com/files/2693f323248edb723d359360a2305ab4eb3386d63330a4bd31644a505591f287856a64bb6b16d7a9384b7de30c4c4dc31a74bef012e5a8d4026eadd141235f3b","name":"unemployment-x-1.csv","type":"text/csv","lastModified":1600704841755.815,"size":30665}] 2f:{"id":"8242151966eac5fb","slug":"d3-hollywood-age-gap-atividade","title":"D3 - Hollywood Age Gap - Atividade","thumbnail":"525b73a98e677838e4f61face9b445f9cbb3265cf55d99a51d14998f3e365827","access_level":"public","create_time":"$D2020-09-19T16:25:06.558Z","update_time":"$D2020-10-04T23:37:17.879Z","view_time":null,"first_public_time":"$D2020-09-19T16:29:33.033Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1f2c6bd35a10718f","login":"tlsgit","name":"T3L35","avatar_url":"https://avatars-next.observableusercontent.com/a73185564e83b5b6e500c4d8e70253a9ab0dc783f6e830cfbb250636d3b89992","tier":"starter_2024"},"version":345,"publish_version":345,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bba73788a51f4ec","login":"tlsgit","name":"T3L35","avatar_url":"https://avatars-next.observableusercontent.com/a73185564e83b5b6e500c4d8e70253a9ab0dc783f6e830cfbb250636d3b89992","tier":null}],"members":[{"type":"individual","id":"0bba73788a51f4ec","login":"tlsgit","name":"T3L35","avatar_url":"https://avatars-next.observableusercontent.com/a73185564e83b5b6e500c4d8e70253a9ab0dc783f6e830cfbb250636d3b89992","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"D3 - Hollywood Age Gap - Atividade","cells":[{"id":0,"value":"md`# D3 - Hollywood Age Gap - Atividade`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"html`

Observações e gráficos

\n\n

Olhando inicialmente os dados é interessante observarmos em quais anos temos amostras dos dados dos filmes. A idéia aqui não é focar em frequências mas sim os anos que se espalham as amostras do dataframe, a representação gráfica a seguir nos dá esta noção.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"// Forma 1\n// d3 = require('d3-dsv')\n// Forma 2\nd3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"//data = d3.csvParse(await Files.text(f))\n\ndata = d3.csv(\"https://raw.githubusercontent.com/cienciadedados-ufcg/eda-pares-romanticos/master/data/hollywoodagegaps.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":" escalaX = d3.scaleLinear()\n .domain([1938, d3.max(data, (d) => d.release_year)])\n .rangeRound([20, width - 10]); // rangeRound cuida pra só retornar valores inteiros\n // porque não existe pixel 122.459","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"escalaCor = d3.scaleLinear()\n .domain([0, d3.max(data, (d) => d.release_year)])\n .range([\"Turquoise\", \"purple\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"escalaCor(100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width) // width é uma variável global com a largura do display\n .attr(\"height\", 50)\n\n svg.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => escalaX(d.release_year)) \n .attr(\"cy\", 20)\n .attr(\"r\", 7)\n .attr(\"fill\", d => escalaCor(d.release_year));\n \n svg.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + 30 + \")\")\n .call(d3.axisBottom(escalaX)); // magica do d3: desenha eixo a partir da escala\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"escalaY = d3.scalePoint()\n .domain(data.map(d => Math.abs(d.age_difference)))\n .rangeRound([30, height - 30]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"data.map(d => escalaY(Math.abs(d.age_difference)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width) // width é uma variável global com a largura do display\n .attr(\"height\", height)\n\n svg.selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => escalaX(d.release_year)) \n .attr(\"cy\", d => escalaY(Math.abs(d.age_difference)))\n .attr(\"r\", 7)\n .attr(\"fill\", d => escalaCor(d.age_difference));\n \n svg.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + (height - 20) + \")\")\n .call(d3.axisBottom(escalaX)); \n \n svg.append('g')\n .attr('transform', 'translate(20,0)')\n .call(d3.axisLeft(escalaY))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"html`

Uma outra análise com uma outra vis do D3

\n\n

A análise aqui é um pouco mais estatística, em mostrar como se dá a distribuição de idades, focando no 1º ator, predominantemente do sexo masculino.

\n\n

Podemos ver a partir do Histograma a seguir que os juvenis não tiveram muitas chances em protagonizar filmes em pares. Sendo os mais maduros, por volta dos 37 anos, os queridinhos para protagonizarem os filmes.

\n\n\n

É interessante ressaltar que a galera da \"melhor idade\", os que estão por volta dos 80 anos, tiveram uma brevíssima oportunidade de estrelarem filmes, com números até menores do que os pares \"teen\", menores de 20 anos.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n svg.append(\"g\")\n .attr(\"fill\", \"red\")\n .selectAll(\"rect\")\n .data(bins)\n .join(\"rect\")\n .attr(\"x\", d => x(d.x0) + 1)\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0) - 1))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n \n\n svg.append(\"g\")\n .call(xAxis);\n \n svg.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"dframe = Object.assign(d3.csvParse(await FileAttachment(\"unemployment-x-1.csv\").text(), ({rate}) => +rate), {x: \"Idades\", y: \"Frequências\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":284,"value":"bins = d3.bin()\n .domain(x.domain())\n .thresholds(x.ticks(40))\n (dframe)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"x = d3.scaleLinear()\n .domain(d3.extent(dframe)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(bins, d => d.length)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(dframe.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(dframe.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"