2d:null 2e:["$","title",null,{"children":"How the GOP learned to love QAnon | Sawyer Click | Observable"}] 33:T1345,chart = { const margin = { top: 20, left: 0, right: 0, bottom: 60 }; const height = 2500 - margin.top - margin.bottom; const _width = width - margin.left - margin.right; const svg = d3.select(DOM.svg(_width, height + margin.top + margin.bottom)); const g = svg .attr('preserveAspectRatio', 'xMidYMid') .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); const parseTime = d3.timeParse("%Y-%m-%d"); const parseFullTime = d3.timeParse("%Y-%m-%d %H:%M:%S"); // 2017-10-28 02:57:28+00:00 var formatTime = d3.timeFormat("%-I:%M %p · %b %d, %Y"); const yPositionScale = d3 .scaleLinear() .domain(d3.extent(data, d => parseTime(d.date.split(' ')[0])).reverse()) .range([height - margin.bottom, margin.top]); const rScale = d3 .scaleSqrt() .domain(d3.extent(data, d => +d.retweets)) .range([3, _width / 17]); const firstTweets = d3 .nest() .key(d => d.username) .entries(data) .map(d => d.values[0].permalink.split('status/')[1]); function formatNumber(number) { if (number > 1000) return d3.format('.3s')(number); else return number; } // function tweet(id) { // const div = d3.select('#svg-tooltip') // Promise.resolve().then(() => twttr.widgets.createTweet(id, div)); // return div // } function embedTweet(id) { return twttr.widgets.createTweet(id, svg.select('#svg-tooltip'), { conversation: 'none', // or all cards: 'hidden', // or visible linkColor: '#cc0000', // default is blue theme: 'light' // or dark }); } const simulation = d3 .forceSimulation(data) .velocityDecay(0.2) // .on("tick", ticked) // .force("center", forceBoundary(margin.left, margin.top, width - margin.right, height)) .force( 'collision', d3 .forceCollide() .radius(d => rScale(+d.retweets) + 1) .iterations(2) ) .force( "forceX", d3 .forceX() .strength(.06) .x(_width / 2) ) .force( "forceY", d3 .forceY() .strength(1) .y(d => yPositionScale(parseTime(d.date.split(' ')[0]))) ) .stop(); simulation.tick(300); const tweets = g .selectAll('tweets') .data(data) .join('circle') // .attr('cy', d => yPositionScale(parseTime(d.date.split(' ')[0]))) // .attr('cx', _width / 2) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => rScale(+d.retweets)) .attr('class', d => `tweets ${d.username} id${d.index}`) .attr('id', d => 'id' + d.permalink.split('status/')[1]) .attr('fill-opacity', 1) .attr('fill', d => firstTweets.includes(d.permalink.split('status/')[1]) ? '#2db8ff' : '#ccc' ) // .attr('fill','#2db8ff') .on("mouseover", d => { g.selectAll('.tweets') .attr('opacity', 1) .attr('fill', '#ccc'); g.selectAll(`.${d.username}`) .attr('opacity', .7) .attr('fill', '#2db8ff'); g.selectAll(`#id${d.permalink.split('status/')[1]}`) .attr('opacity', 1) .attr('fill', '#2db8ff'); tooltip .attr("data-html", "true") .style("visibility", "visible") // .html(d => embedTweet(d.permalink.split('status/')[1])) // .html(d => `${tweet(d.permalink.split('status/')[1])}`) .html( `

@${d.username}

${ d.text }

${formatTime( parseFullTime(d.date.split('+')[0]) )}

${formatNumber( +d.retweets )} Retweets ${formatNumber(+d.favorites)} Likes

` ); }) .on("mousemove", d => { var x = d3.event.pageX; var y = d3.event.pageY; // tooltip.node().getBoundingClientRect() var toolTipWidth = tooltip.node().getBoundingClientRect().width; var toolTipMargin = 10; let parsedX = x + margin.left + toolTipMargin; if (parsedX > _width - toolTipWidth - toolTipMargin) parsedX = parsedX - toolTipWidth - toolTipMargin * 3; // let parsedY = y + margin.left + toolTipMargin // if (parsedY > height - toolTipWidth - toolTipMargin) parsedX = parsedX - toolTipWidth tooltip .style("left", `${parsedX}px`) .style("top", d3.event.pageY + toolTipMargin + "px"); }) .on("mouseout", d => { g.selectAll('.tweets') .attr('fill', d => firstTweets.includes(d.permalink.split('status/')[1]) ? '#2db8ff' : '#ccc' ) .attr('opacity', 1); tooltip.style("visibility", "hidden"); }); const tooltip = d3 .select("body") .append("div") .attr("id", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden"); invalidation.then(() => simulation.stop()); return svg.node(); }34:T4ad,styles2 = html` `35:[{"id":"f58e28f2d6c6a4feb12f5091554ef9148c7da20298b85442a40313682471955cf52313ee2e2411af125f8c8ed4805a168aca7578d1cb500ae18a9cbd80eef641","href":"https://static.observableusercontent.com/files/f58e28f2d6c6a4feb12f5091554ef9148c7da20298b85442a40313682471955cf52313ee2e2411af125f8c8ed4805a168aca7578d1cb500ae18a9cbd80eef641","name":"data.csv","type":"text/csv","lastModified":1602374368429.382,"size":756176},{"id":"43679a891dcb0c258bdb890bcde3f25dc3ce982faf71f2190089671f326129b39914eeb8c1997c67490ecb2e2f51e02697ea4e5c95c9e1486e8da841f2807b56","href":"https://static.observableusercontent.com/files/43679a891dcb0c258bdb890bcde3f25dc3ce982faf71f2190089671f326129b39914eeb8c1997c67490ecb2e2f51e02697ea4e5c95c9e1486e8da841f2807b56","name":"Influencer Managers_Agents Database Interactive - Agents (2).csv","type":"text/csv","lastModified":1603151851493.255,"size":45191},{"id":"85f3934c4c5ea6156da3968992fe0d7dc36613d1ab241c57ee5fac8207d8de90d5cb0b9bfd50276afa16543e0080b17f4b67337388418324d34937210fe4091e","href":"https://static.observableusercontent.com/files/85f3934c4c5ea6156da3968992fe0d7dc36613d1ab241c57ee5fac8207d8de90d5cb0b9bfd50276afa16543e0080b17f4b67337388418324d34937210fe4091e","name":"Q + pedo tweets - tweets (2).csv","type":"text/csv","lastModified":1602687508846.244,"size":712337}] 31:{"id":"ec1dc8e7b708dda7","slug":"how-the-gop-learned-to-love-qanon","title":"How the GOP learned to love QAnon","thumbnail":"205ef58dc8335f196afd81be52a938225bfa3b84dc59ff4c93b5c7ec6346835f","access_level":"public","create_time":"$D2020-10-10T23:59:28.429Z","update_time":"$D2021-02-18T05:52:07.116Z","view_time":null,"first_public_time":"$D2021-02-18T05:52:38.274Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"5d8465f659062b49","login":"sawyerclick","name":"Sawyer Click","avatar_url":"https://avatars-next.observableusercontent.com/3d18cc40990b6e5f4687641c3e7bb0adc018aac37afda8adb573ce58847b674e","tier":"starter_2024"},"version":687,"publish_version":687,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b28d2c89c25fdfd","login":"sawyerclick","name":"Sawyer Click","avatar_url":"https://avatars-next.observableusercontent.com/3d18cc40990b6e5f4687641c3e7bb0adc018aac37afda8adb573ce58847b674e","tier":null}],"members":[{"type":"individual","id":"6b28d2c89c25fdfd","login":"sawyerclick","name":"Sawyer Click","avatar_url":"https://avatars-next.observableusercontent.com/3d18cc40990b6e5f4687641c3e7bb0adc018aac37afda8adb573ce58847b674e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"How the GOP learned to love QAnon","cells":[{"id":0,"value":"md`# How the GOP learned to love QAnon\nThe first draft of the graphic I made on the [similarly titled story for Business Insider](https://www.businessinsider.com/how-qanon-infiltrated-the-gop-2020-10). \n\nSource: Business Insider via Twitter\n\nDisabled animation to speed up performance.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md` ## Imports and data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"data = d3.csv(await FileAttachment(\"Q + pedo tweets - tweets (2).csv\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"d3.csv(await FileAttachment('Influencer Managers_Agents Database Interactive - Agents (2).csv').url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"twttr = require(\"https://platform.twitter.com/widgets.js\").catch(() => window.twttr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"import { styles } from '@sawyerclick/styles'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"