2d:null 2e:["$","title",null,{"children":"Idades de pares românticos no cinema de Hollywood | Mariana Mendes e Silva | Observable"}] 33:T54a,chart = (data) => { const svg = d3.select(DOM.svg(width, height)) .style("-webkit-tap-highlight-color", "transparent") .style("overflow", "visible"); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line).call(transition); svg.append("text").attr("x", 1).attr("y",1).text('diferença de idades').style("font-size", "12px") svg.append("text").attr("x", 930).attr("y",470).text('anos').style("font-size", "17px") svg.append("text").attr("x", 200).attr("y",530).text('* Repousar o mouse sobre a curva pode mostrar informações mais precisas sobre o ano e a média de diferença de idade').style("font-size", "12px") const tooltip = svg.append("g"); svg.on("touchmove mousemove", function() { const {year, mean} = bisect(d3.mouse(this)[0]); tooltip .attr("transform", `translate(${x(year)},${y(mean)})`) .call(callout, `${mean.toLocaleString(undefined, {year: "mean"})} ${year.toLocaleString(undefined, {year: "numeric"})}`); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }34:T4bc,html`

Para visualizar melhor, os dados foram resumidos resultando em uma média das diferenças para cada ano, mais ou menos nesse formato: {ano: 1990, média_diferença: 23 }, {ano: 1999, média_diferença: 6.82 }... {ano: 2017, média_diferença:7.4 }
Selecionando homo no seletor acima, temos uma visualização apenas de casais homossexuais, podemos ver uma linha que não varia tanto ao longo do tempo, no mínimo 8 anos e no máximo 12 anos de diferença de idades. Contudo, há poucos registros desses casais nos filmes, o que é algo um tanto problemático e nos impede de fazer perguntas mais significativas para esse pares (nos dados, 16 filmes de 937, e apenas a partir dos anos 2000). Portanto, considerando apenas essa amostra, podemos afirmar que a variação de idades é pequena.
Selecionando hétero temos os pares românticos héteros, maioria dos dados, e podemos observar que houve uma diminuição na diferença de idades através dos anos, a partir de 2000 essa média fica entre 12 e 6. Sabendo que existe a diferença de idade, principalmente nos casais héteros, queremos agora responder outra pergunta:

`35:T605,{ const width= 1000 const height = 420 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } svg.append('g') .call(d3.axisBottom(xScale())) .attr('transform', `translate(0,${height - margin.bottom})`) svg.append('g') .call(d3.axisLeft(yScale())) .attr('transform', `translate(${margin.left},0)`) svg.selectAll('circle').data(movies) .enter() .append('circle') .attr('cx', d => xScale()( new Date(d.release_year))) .attr('cy', d => yScale()(Math.abs(d.age_difference))) .attr('r', d => 4) .attr('fill', d => pickColor(d)) svg.append("text").attr("x", 3).attr("y",9).text('diferença de idades').style("font-size", "12px") svg.append("text").attr("x", 930).attr("y",415).text('anos').style("font-size", "17px") svg.append("text").attr("x", 500).attr("y", 100).text("1 ponto = 1 filme").style("font-size", "15px") const legenda = [{ t: "idade mulher > idade homem", color: "#C7325C", pos: 40}, {t: "idade mulher < idade homem", color: "#57ADA4", pos: 55}, {t: "idade mulher = idade homem", color: "black", pos: 70}] legenda.forEach(item => { svg.append("circle").attr("cx",50).attr("cy",item.pos).attr("r", 5).style("fill", item.color) svg.append("text").attr("x", 57).attr("y", item.pos + 5).text(item.t).style("font-size", "15px") }) return svg.node()}36:[] 31:{"id":"93c381ff1f71d7e2","slug":"untitled/2","title":"Idades de pares românticos no cinema de Hollywood","thumbnail":"0f82338691326683a9d30799f7d108dfae43a02e8e60805a9543bb3cbabc03d6","access_level":"public","create_time":"$D2020-09-21T13:41:47.959Z","update_time":"$D2020-09-23T23:32:43.078Z","view_time":null,"first_public_time":"$D2020-09-21T22:50:20.251Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"272d17ccac140c61","login":"mariana-mendes","name":"Mariana Mendes e Silva","avatar_url":"https://avatars-next.observableusercontent.com/cf450846b4f38bdb604115291a6353df86fb7afb15b30b688543e3256ce83b74","tier":"starter_2024"},"version":890,"publish_version":890,"role":null,"authored":false,"authors":[{"type":"individual","id":"3bbbf47d6bffd6fe","login":"mariana-mendes","name":"Mariana Mendes e Silva","avatar_url":"https://avatars-next.observableusercontent.com/cf450846b4f38bdb604115291a6353df86fb7afb15b30b688543e3256ce83b74","tier":null}],"members":[{"type":"individual","id":"3bbbf47d6bffd6fe","login":"mariana-mendes","name":"Mariana Mendes e Silva","avatar_url":"https://avatars-next.observableusercontent.com/cf450846b4f38bdb604115291a6353df86fb7afb15b30b688543e3256ce83b74","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Idades de pares românticos no cinema de Hollywood","cells":[{"id":0,"value":"md`# Idades de pares românticos no cinema de Hollywood`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"md`### Os dados`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"html`

Os dados utilizados para essa análise podem ser encontrados nesse link\n. Os filmes presentes foram adicionados de forma colaborativa, portanto é possível que alguns estejam faltando na lista e é possível contribuir, caso você queira :). \nAs informações disponibilizadas, para cada filme são: nome, diretor, ano de lançamento, diferença de idade do par romântico no filme e algumas informações dos atores e atrizes como nome, data de nascimento e idade.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`### A diferença de idades entre os pares românticos mudou com o passar dos anos?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"html`

Gráfico que representando a diferença de idades entre pares românticos nos filmes atráves dos anos, para casais héteros e gays.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"chart(movies_summarized)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"viewof dd = select(['hétero', 'homo'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"md`### Geralmente, em casais héteros, a pessoa mais velha do par é o homem ou a mulher? `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"html`\n
\nPara responder essa pergunta, representamos um filme com um ponto, sua posição na vertical indica a diferença de idade do casal e horizontalmente está o ano. Quando a mulher é a mais velha, a cor do ponto é rosa, já quando o homem é mais velho, o ponto é verde, já quando não existe diferença, o ponto é preto. \n
Sabemos que existe, na sociedade, uma certa glamourização da velhice masculina, enquanto que para mulheres, a velhice pode resultar no aumento de probabilidade de rejeição, romanticamente falando. \n
Visualizamos, a partir do gráfico, um possível reflexo da idealização de \"mundo real\" sob o olhar masculino: Marjoritariamente os homens são mais velhos nos pares. Outra fato que é possível visualizar é que, geralmente, quando a mulher é mais a velha a diferença de idade não é tão constrastante. \n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"md`#### Daqui pra baixo é só código mesmo :*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"movies_summarized = Array.from(new Set(mov.map(d => d.release_year)))\n .map(movie => ({\n year: new Date(movie),\n mean: getMean(movie)\n })).slice().sort((a, b) => d3.ascending(a.year, b.year))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"mov = dd == 'hétero' ? straight_couples: homo_couples","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"pickColor = (item) => {\n const older = item.actor_1_age > item.actor_2_age ? item.actor_1_gender : item.actor_2_gender\n if(item.actor_1_age == item.actor_2_age)\n return \"black\"\n return older == \"man\" ? \"#57ADA4\" : \"#C7325C\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"yScale = () => d3.scaleLinear()\n .domain(d3.extent(movies.map(d => Math.abs(d.age_difference))))\n .range([400 - 20, 10])\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"xScale = () => d3.scaleTime()\n .domain(d3.extent(movies.map(d => new Date(d.release_year)))) \n .range([30, width - 10])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":" x = d3.scaleTime()\n .domain(d3.extent(movies_summarized, d => d.year))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(movies_summarized.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(movies_summarized, d => d.mean)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 200).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"function transition(path) {\n path.transition()\n .duration(7500)\n .attrTween(\"stroke-dasharray\", tweenDash)\n .on(\"end\", () => { d3.select(this).call(transition); });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"function tweenDash() {\n const l = this.getTotalLength(),\n i = d3.interpolateString(\"0,\" + l, l + \",\" + l);\n return function(t) { return i(t) };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"bisect = {\n const bisect = d3.bisector(d => d.year).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(movies_summarized, date, 1);\n const a = movies_summarized[index - 1];\n const b = movies_summarized[index];\n console.log( date - a.year > b.year - date ? b : a)\n return date - a.year > b.year - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"line = d3.line()\n .defined(d => !isNaN(d.mean))\n .x(d => x(d.year))\n .y(d => y(d.mean))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"getMean = (year) => {\n let a = movies.filter(i => i.release_year == year) \n return d3.sum(a, d => Math.abs(d.age_difference))/a.length\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"movies = 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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"straight_couples = movies.filter(item => item.same_sex == 'FALSE')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"homo_couples = movies.filter(item => item.same_sex == 'TRUE')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 32:"$31:body"