2d:null 2e:["$","title",null,{"children":"Makeover Monday: Visualizing the Emoji Mashup Twitter Bot | Ben Kates | Observable"}] 33:T435,My original hypothesis for this exercise was that the ***most favorited mashups are the ones that combine happy and sad emojis***. After doing some research on emoji sentiment, I discovered the 2015 study **Sentiment of Emojis** and its **emoji sentiment table**. The authors *(Petra Kralj Novak, Jasmina Smailovi´c, Borut Sluban, and Igor Mozetiˇc)* downloaded 1.4 million European language tweets (4% of which contained emojis), used existing sentiment lexicons to calculate tweet text sentiment, attributed that text sentiment to the emojis featured in the tweet, and created sentiment scores for each emoji. By combining the emoji sentiment score from this study with the “source” emojis for each mashup, we can start visualizing each mashup in a new way. *↓↓Source emoji sentiment score plotted alongside the resulting mashup (filtered to mashups with a source emoji count of 2)*34:T1113,chart = { //replay on click replay; //define sentiment labels const axisLabelsData = [ { text: "Negative", x: -0.75, color: "#bf8f8f", anchor: "middle" }, { text: "Neutral", x: 0, color: "#c3c396", anchor: "middle" }, { text: "Positive", x: 0.75, color: "#93bf8f", anchor: "middle" } ]; //size constants let width; width = window.innerWidth > 700 ? 700 : window.innerWidth; let height = width * 3; if (width > 500) height = width * 2; const margin = { top: 100, right: width * 0.05, bottom: 50, left: 0 }; let marginLeftInner = width * 0.15; if (width > 500) { marginLeftInner = width * 0.2; } //define x scale function const xScale = d3 .scaleLinear() .domain([-1, 1]) .rangeRound([marginLeftInner, width - margin.right]); //define y scale function const yScale = d3 .scalePoint() .domain(d3.range(data.length)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); //define xAxis function const xAxis = (g) => g .attr("transform", `translate(0,${margin.top - 60})`) .call(d3.axisTop(xScale).tickValues([-0.5, 0, 0.5]).tickSizeOuter(0)) .attr("font-size", "18"); //TO DO: specific tick values? //.call(g => g.select(".domain").remove()) //axis line function scoreCheck(d, flip = false) { if (!flip) { return d.score_x1 > d.score_x2 ? d.score_x2 : d.score_x1; } else { return d.score_x1 > d.score_x2 ? d.score_x1 : d.score_x2; } } //main wrapper const svg = d3.create("svg").attr("width", width).attr("height", height); //background axis lines svg .append("g") .attr("stroke", "lightgrey") .attr("stroke-width", 2) .attr("z", 1) .selectAll("line") .data(data) .join("line") .attr("y1", (d, i) => yScale(i)) .attr("y2", (d, i) => yScale(i)) .attr("x1", marginLeftInner) .attr("x2", marginLeftInner) .transition() .duration(1250) .attr("x2", width - margin.right); //rendered image! svg .append("g") .selectAll("svg") .data(data) .join("svg") .attr("class", "rendered-image-container") .append("image") .attr("class", "rendered-image") .attr("xlink:href", (d) => d.img) .attr("width", height * 0.075) .attr("height", height * 0.075) .attr("x", -150) .attr("y", (d, i) => yScale(i) - (height * 0.075) / 2) .transition() .duration(500) .ease(d3.easeCircle) .attr("x", margin.left); //thick lines svg .append("g") .attr("stroke", "darkgrey") .attr("stroke-width", width > 500 ? 8 : 4) .attr("z", 2) .selectAll("line") .data(data) .join("line") .attr("x1", (d) => xScale(scoreCheck(d)) - (width * 0.05) / 2) .attr("x2", (d) => xScale(scoreCheck(d)) - (width * 0.05) / 2) .attr("y1", (d, i) => yScale(i)) .attr("y2", (d, i) => yScale(i)) .transition() .duration(1250) .attr("x2", (d) => xScale(scoreCheck(d, true)) - (width * 0.05) / 2); //emoji1 (using twitter links from twemoji) svg .append("g") .selectAll("image") .data(data) .join("image") .attr("xlink:href", (d) => emojiUnicode(d.emoji_x1)) .attr("width", height * 0.025) .attr("height", height * 0.025) .attr("x", (d) => xScale(d.score_x1) - height * 0.025) .attr("y", (d, i) => yScale(i) - (height * 0.025) / 2) .call(transitionOpacity); //emoji2 (using twitter links from twemoji) svg .append("g") .selectAll("image") .data(data) .join("image") .attr("xlink:href", (d) => emojiUnicode(d.emoji_x2)) .attr("width", height * 0.025) .attr("height", height * 0.025) .attr("x", (d) => xScale(d.score_x2) - height * 0.025) .attr("y", (d, i) => yScale(i) - (height * 0.025) / 2) .call(transitionOpacity); //add axis svg.append("g").call(xAxis).call(transitionOpacity); //add axis label text svg .append("g") .selectAll("text") .data(axisLabelsData) .join("text") .attr("text-anchor", (d) => d.anchor) .text((d) => d.text) .attr("x", (d) => xScale(d.x)) .attr("y", yScale(0) - 50) // .attr("dy", "-4em") .style("fill", (d) => d.color) .style("font-size", `${height * 0.015}px`) .style("font-family", "sans-serif") .attr("dominant-baseline", "text-top") .call(transitionOpacity); return svg.node(); }35:Tf7d,multiChart = { //replay on button click replay2; //define dimensions let width; width = window.innerWidth > 500 ? window.innerWidth * 0.75 : window.innerWidth; const height = 500; const margin = { top: height * 0.1, right: height * 0.1, bottom: height * 0.1, left: height * 0.1 }; //get max of each variable const xMax = 1.2; const yMax = d3.max(multiEmojiData, (d) => d.favoriteCount); //create svg const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); //create scales const xScale = d3 .scaleLinear() .domain([0, xMax]) .nice() .rangeRound([margin.left, width - margin.right]); const yScale = d3 // .scaleSymlog() //scaleLog does not allow 0 in domain // // .base(2) // .constant(15000) .scaleLinear() .domain([0, yMax]) .nice() .range([height - margin.top, margin.bottom]); //declare image dimensions const imageDims = { height: height * 0.075, width: height * 0.075 }; //declare x/y position getters const xGet = (d) => xScale(d.diff); const yGet = (d) => yScale(d.favoriteCount); const xPos = (d) => xGet(d) - imageDims.width / 2; const yPos = (d) => yGet(d) - imageDims.height / 2; //create axes const xAxis = d3.axisBottom(xScale).tickValues([0, 0.3, 0.6, 0.9]); const yAxis = d3 .axisLeft(yScale) .tickValues([0, 5000, 10000, 15000, 20000, 25000, 28500]); //create tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden"); //add x axis svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("y2", margin.top + margin.bottom - height) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", width - margin.right) .attr("y", margin.bottom - 10) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-size", 14) .text("Difference in emoji sentiment →") ) .call(transitionOpacity); //add y axis svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("x2", width - margin.left - margin.right) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", margin.left) .attr("y", margin.top - 5) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-size", 14) .text("↑ Favorites") ) .call(transitionOpacity); //add images svg .append("g") .selectAll("svg") .data(multiEmojiData) .join("svg") .attr("x", xPos) .attr("y", yPos) .attr("width", imageDims.width) .attr("height", imageDims.height) .attr("opacity", 0) .call(emojiInteractions, tooltip, xGet, yGet, imageDims) .transition() .duration(1000) .ease(d3.easeCubicOut) .attr("x", xPos) .attr("y", yPos) .attr("opacity", 1); svg .selectAll("svg") .data(multiEmojiData) .join("svg") .append("image") .attr("xlink:href", (d) => d.media_url) .attr("width", "100%") .attr("height", "100%") .attr("preserveAspectRatio", "xMidYMid slice") .style("mix-blend-mode", "multiply") //these styles remove the white background .style("filter", "contrast(1)") //these styles remove the white background .style("cursor", "pointer") .call(transitionOpacity, 500); return svg.node(); } //TODO: comments36:Tc0c,data = [ { img: "http://pbs.twimg.com/media/EAYavyBXoAAS9fB.jpg", emoji_x1: "😒", emoji_x2: "💩", score_x1: -0.374, score_x2: -0.116 }, { img: "http://pbs.twimg.com/media/D_x_kVBXYAEhVVA.jpg", emoji_x1: "😒", emoji_x2: "😘", score_x1: -0.374, score_x2: 0.701 }, { img: "http://pbs.twimg.com/media/EAlnkZnXUAUps_5.jpg", emoji_x1: "😒", emoji_x2: "😚", score_x1: -0.374, score_x2: 0.71 }, { img: "http://pbs.twimg.com/media/EANZ5OHXoAEJnN8.jpg", emoji_x1: "👶", emoji_x2: "😿", score_x1: 0.434, score_x2: -0.372 }, { img: "http://pbs.twimg.com/media/EAGFABPXUAAtgX6.jpg", emoji_x1: "😠", emoji_x2: "😳", score_x1: -0.299, score_x2: 0.018 }, { img: "http://pbs.twimg.com/media/EA3NqitXkAAFZqS.jpg", emoji_x1: "👶", emoji_x2: "😠", score_x1: 0.434, score_x2: -0.299 }, { img: "http://pbs.twimg.com/media/EAnHssNXsAEV1i3.jpg", emoji_x1: "😍", emoji_x2: "😠", score_x1: 0.678, score_x2: -0.299 }, { img: "http://pbs.twimg.com/media/EAR4JFyX4AEYgO9.jpg", emoji_x1: "😚", emoji_x2: "😠", score_x1: 0.71, score_x2: -0.299 }, { img: "http://pbs.twimg.com/media/EBG4zsAXsAEO_bP.jpg", emoji_x1: "💀", emoji_x2: "😂", score_x1: -0.207, score_x2: 0.221 }, { img: "http://pbs.twimg.com/media/EAbGu4vWkAENB7n.jpg", emoji_x1: "💀", emoji_x2: "😀", score_x1: -0.207, score_x2: 0.568 }, { img: "http://pbs.twimg.com/media/EAvfSQFWwAAC-jF.jpg", emoji_x1: "😊", emoji_x2: "💀", score_x1: 0.644, score_x2: -0.207 }, { img: "http://pbs.twimg.com/media/EAvRoDxWkAEg9Fi.jpg", emoji_x1: "😡", emoji_x2: "👽", score_x1: -0.173, score_x2: 0.315 }, { img: "http://pbs.twimg.com/media/EBIY8COXUAAY4pj.jpg", emoji_x1: "😖", emoji_x2: "😱", score_x1: -0.155, score_x2: 0.19 }, { img: "http://pbs.twimg.com/media/EBRm6E2WkAMulH7.jpg", emoji_x1: "😔", emoji_x2: "😘", score_x1: -0.146, score_x2: 0.701 }, { img: "http://pbs.twimg.com/media/EA9b6fXX4AAfXkt.jpg", emoji_x1: "💩", emoji_x2: "😱", score_x1: -0.116, score_x2: 0.19 }, { img: "http://pbs.twimg.com/media/EA1f1UfXYAA0gij.jpg", emoji_x1: "😗", emoji_x2: "💩", score_x1: 0.611, score_x2: -0.116 }, { img: "http://pbs.twimg.com/media/D_35hYrWsAA3U7k.jpg", emoji_x1: "😈", emoji_x2: "😭", score_x1: 0.265, score_x2: -0.093 }, { img: "http://pbs.twimg.com/media/D__bIZ9XsAIXhlw.jpg", emoji_x1: "😌", emoji_x2: "😭", score_x1: 0.482, score_x2: -0.093 }, { img: "http://pbs.twimg.com/media/EBSQEOkXkAI0pma.jpg", emoji_x1: "😳", emoji_x2: "🌞", score_x1: 0.018, score_x2: 0.558 }, { img: "http://pbs.twimg.com/media/EAQzmwOXYAAsop4.jpg", emoji_x1: "😇", emoji_x2: "👽", score_x1: 0.587, score_x2: 0.315 } ]37:T63c,emojiInteractions = function ( selection, // the element being selected tooltip, // the tooltip element xGet, // x scale getter yGet, // y scale getter imageDims, // imageDims object with width/height attributes scaleFactor = 1.5 // how much to scale on hover ) { selection // MOUSEOVER .on("mouseover", function (e, d) { d3.select(this) .transition() .duration(250) .attr("x", xGet(d) - (imageDims.width * scaleFactor) / 2) .attr("y", yGet(d) - (imageDims.height * scaleFactor) / 2) .attr("width", imageDims.width * scaleFactor) .attr("height", imageDims.height * scaleFactor); }) // CLICK .on("click", function (e, d) { // display tooltip tooltip .style("top", e.pageY - 5 + "px") .style("left", e.pageX + 5 + "px") .append("div") .attr("id", "tweet-frame") .style("z-index", 1000) .node() .appendChild(tweet(d.id)); // transition tooltip tooltip.transition().duration(1500).style("opacity", "1"); }) // MOUSEOUT .on("mouseout", function (e, d) { // return emoji back to original size d3.select(this) .transition() .duration(250) .attr("x", xGet(d) - imageDims.width / 2) .attr("y", yGet(d) - imageDims.height / 2) .attr("width", imageDims.width) .attr("height", imageDims.height); // remove tooltip tooltip.transition().duration(1000).style("opacity", "0"); tooltip.transition().delay(1000).select("#tweet-frame").remove(); }); }38:[{"id":"5c689fae9576f8eef0a9fc79a7e52b41790cb01018eef2b98246c981d1c41088021f9e4cb07a20b12a34d262e174640b79db26fe178fe17040c82dfcdb1448fd","href":"https://static.observableusercontent.com/files/5c689fae9576f8eef0a9fc79a7e52b41790cb01018eef2b98246c981d1c41088021f9e4cb07a20b12a34d262e174640b79db26fe178fe17040c82dfcdb1448fd","name":"multiEmojiData.json","type":"application/json","lastModified":1670638257045.033,"size":4968}] 31:{"id":"abc691ad6a7fe089","slug":"visualizing-emoji-mashup-twitter-bot","title":"Makeover Monday: Visualizing the Emoji Mashup Twitter Bot","thumbnail":"1b6b6331bfd792231a7e3252c969dc711db08807777dd2161a8eded38d1aef96","access_level":"public","create_time":"$D2022-12-09T17:39:46.511Z","update_time":"$D2024-10-26T22:33:50.600Z","view_time":null,"first_public_time":"$D2022-12-09T17:39:46.511Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c66fdfa7ca0f9207","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/f64d42b424efb5f5b1856d6df2082b68771971c4df3edefcbb3ed749539c1cd6","tier":"starter_2024"},"version":1209,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"794b1c1eb3bbad78","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/a403af350ba2640c9aa5d23aab550636d49cb25b28cd9f0ca681324d3a33f611","tier":null}],"members":[{"type":"individual","id":"794b1c1eb3bbad78","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/a403af350ba2640c9aa5d23aab550636d49cb25b28cd9f0ca681324d3a33f611","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Makeover Monday: Visualizing the Emoji Mashup Twitter Bot","cells":[{"id":0,"value":"# Makeover Monday: Visualizing the Emoji Mashup Twitter Bot\n\n*This is a recreation of my 2019 Makeover Monday article using R and `ggplot2` to create a custom visualization of my favorite Twitter bot! Read on!*\n\n---\n\nFor this week’s Makeover Monday data visualization exercise, I downloaded tweets from the increasingly popular **Emoji Mashup Bot**. This Twitter bot takes two emojis and creates a mashup between the two every hour. The author, **Louan Bengmah**, uses the Processing programming language to extract features from each emoji and combine them to create emoji “mashups”.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"tweet(\"1154104147551109120\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":769,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"The above exploratory visual helps us understand some differences in sentiment score that make up a sample of the most popular mashups. To take this a step further toward analysis, let’s plot the difference in sentiment score by number of favorites using a slightly larger sample of the most popular mashups.\n\n*↓↓ A sample of mashups plotted by difference in source emoji sentiment and number of tweet favorites (# of favorites might differ from actual due to bots)\n\nClick on an emoji to view the tweet!\n*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":790,"value":"viewof replay2 = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"Although the difference in source emoji sentiment score does not seem to have a strong correlation with favorites, I’ve enjoyed using one of my favorite Twitter accounts as a data source for visualization!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"## Notes\n- All data cleaning and visualization completed in R\n- Tweets downloaded using the `twitteR` package\n- Data cleaned using the dplyr (tidyverse) package\n- Read more about how the Emoji Mashup Twitter Bot works here\n- Twemoji font library found here\n- Tweets filtered to include emojis found in the Sentiment of Emojis study","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"multiEmojiData = FileAttachment(\"multiEmojiData.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"emojiUnicode = (emoji) => {\n var comp;\n if (emoji.length === 1) {\n comp = emoji.charCodeAt(0);\n }\n comp =\n (emoji.charCodeAt(0) - 0xd800) * 0x400 +\n (emoji.charCodeAt(1) - 0xdc00) +\n 0x10000;\n if (comp < 0) {\n comp = emoji.charCodeAt(0);\n }\n // change to new cdn, maxcdn shut down\n //let result = \"https://twemoji.maxcdn.com/svg/\" + comp.toString(\"16\") + \".svg\";\n let result =\n \"https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/\" +\n comp.toString(\"16\") +\n \".png\";\n return result ? result : \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"transitionOpacity = function (selection, t = 1250, rest) {\n selection.attr(\"opacity\", 0).transition().duration(t).attr(\"opacity\", 1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"import { tweet } from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"