31:T5ea,md `On Oct. 6, 2019, Hong Kong-based professional Hearthstone player Ng "Blitzchung" Wai Chung, expressed solidarity with anti-government protestors on a live Esports tournament stream. The video was quickly removed by organizers. However, early the next morning, links to Blitzchung's statement began appearing in posts around various subcommunities on Reddit. Blizzard, Hearthstone's developer, announced the next day that they had suspended Blitzchung from competitive play for a year and would deduct his tournament winnings. Protest posts against the company quickly appeared and spread far throughout the Reddit ecosystem. The Blizzard/Hong Kong controversy dominated various large subreddits for several days and quickly evolved from simple text and links to elaborate memes. In one notable case, users adopted "Mei," a playable cannonically Chinese character from Blizzard's Overwatch game, as a symbol of the Hong Kong protesters. The "Pro-Hong Kong Mei" meme was iterated upon many times and posts featuring her were among the most upvoted of all posts related to the controversy. We decided to use this incident as a test case for tracking proliferation of a movement on Reddit. Using an individual "seed" post we performed a breadth first search of crossposts and user activity to find subsequent posts related to the controversy. Unrelated posts were removed using a SVM classifier. A full description of our methods and code can be found [here](https://github.com/bhsgsh10/hongkongmei). `32:T4f9,md`The graph below represents a large number of revelant posts submitted over three days across Reddit. The exact time frame is 4:02:02 AM EST on Oct. 7, 2019 to 4:02:02 AM EST on Oct. 10, 2019. Each circle represents a specific post. The position of the circle is determined by the subreddit it was submitted to (y-axis) and the time that it was submitted (x-axis). The area of the cirlce is proportional on a logarithmic scale to the score of the post. According to Reddit's [faq](https://www.reddit.com/wiki/faq#wiki_how_is_a_submission.27s_score_determined.3F) score is the number of upvotes (likes) minus the number of downvotes (dislikes). If a subreddit appears to not have any posts in it, it is likely that those posts had a score of zero. Mousing over a specific post activates a tooltip that provides information about the post. If an image link was included in the post, that is displayed as well. The subreddits are also sorted vertically by the the time of their first post in our database. Our seed post is the first submission you see in the Hong Kong subreddit. Either click on the post to in the graph to view it or follow the direct link [here](https://www.reddit.com/r/HongKong/comments/degek8/hearthstone_grandmasters_winners_interview_with/). ` 33:Tc6d,chart = { const svg = DOM.svg(SVGwidth, SVGheight) const svgobj = d3.select(svg) const graphGroup = svgobj.append("g") .attr("class", "graphGroup") .attr("transform", `translate(${margin.left},${margin.top})`) //Tooltip format lifted (which much thanks) from https://observablehq.com/@muqeet/artsed-bubble const toolTip = d3.select("body").selectAll('div.tool-tip') .data([1]).join("div") .attr("class", "tool-tip").style("opacity", 0); graphGroup.append("g") .attr("class", "axis xAxis") .attr("transform", `translate(0,0)`) //No transform now, but maybe later .call(xAxis) graphGroup.append("g") .attr("class", "axis yAxis") .call(yAxis); graphGroup.selectAll(".delimeter") //creates a series of dotted lines to seperate the subreddits .data(subreddit_data) .enter().append("line") .attr("class", "delimeter") .style("stroke-dasharray", ("2, 2")) .attr("stroke-width", 1) .attr("stroke", "grey") .attr('x1', x(date(created_utc_to_datetime(1570435322)))) .attr('y1', function(d){ return y(d.subreddit)}) .attr('x2', x(date(created_utc_to_datetime(1570694522)))) .attr('y2', function(d){ return y(d.subreddit)}) graphGroup.selectAll(".subredditRect") // creates a series of rectangles that will highlight when moused over .data(subreddit_data) .enter().append("rect") .attr("class", function(d){ return `subredditRect ${d.subreddit}` // }) .attr("x", x(date(created_utc_to_datetime(1570435322)))) .attr("y", function(d) {return y(d.subreddit)}) .attr("width", x(date(created_utc_to_datetime(1570694522)))) .attr("height", 17.736549165119868) .style("opacity", 0) .attr("fill", "#FF5700") .on("mouseover", function(d){ d3.select(this).style("opacity", 1) }) .on("mouseout", function(d){ d3.select(this).style("opacity", 0) }) graphGroup.selectAll(".post") // adds posts as circles to the graph .data(data_with_datetime) .enter().append("a").attr("xlink:href", function(d) {return d.full_link}).append("circle") .attr("class", "post") .attr("cx", function(d) {return x(date(d.created_datetime))}) .attr("cy", function(d) {return y(d.subreddit)+9}) .attr("r", function(d) {return score_to_radius(d.score)}) .on("mouseover", function(d) { //console.log("mouseover") d3.select(this).attr("fill", "#ffffff") d3.selectAll(`.subredditRect.${d.subreddit}`).style("opacity", 1) buildToolTip(d,toolTip); toolTip.style("opacity", 1); }) .on("mouseout", function(d){ //console.log("Mouseout"); d3.select(this).attr("fill", "black") toolTip.transition().duration(500).style('opacity', 0); d3.selectAll(`.subredditRect.${d.subreddit}`).style("opacity", 0) }) .on("mousemove", function(d) { // console.log("Mousemover"); d3.select(this).attr("fill", "#ffffff") d3.selectAll(`.subredditRect.${d.subreddit}`).style("opacity", 1) buildToolTip(d,toolTip); }) return svg }34:T65c,md`We can identify several notable posts and high-level trends from this graph. First, we see that one of the earliest posts about the Blizzard/Hong Kong issue to gain significant traction was in the r/KotakuInAction subreddit. This is a right-wing community with its roots in the [gamergate](https://en.wikipedia.org/wiki/Gamergate_controversy) controversy. The original founder of the community called the subreddit ["one of the many cancerous growths that have infiltrated reddit."](https://www.reddit.com/r/Drama/comments/8yh18h/righting_a_wrong/) Further analysis on user data could be leveraged to see if users who interacted with the post helped spread it ouside their community. The next item that is immediately apparent is how many subreddits engaged in the conversation around this topic. We discovered hundreds of subreddits where users discussed the suspension of Blitzchung and protests in Hong Kong. We also see a small collection of subreddits where the protest appears to be most active. Those are r/HongKong, r/Hearthstone and r/Blizzard. r/worldnews looks like it should be included, but that is because or classifier ended up scooping a large number of general China-related posts for that subreddit. We also see a notable amount of posting on related subreddits such as r/pcgaming and r/competitiveoverwatch. This protest also appears to have fostered the birth of at least two completely new subreddits, r/FuckBlizzard and r/ProtestBlizzcon, the latter established specifically for a Comic Con-like event. Notable in the latter community is that most of the posts are from one user: u/Kazemel89. ` 35:T85b,md`A critical creative moment was the emergence of the playable Overwatch hero "Mei" as a symbol for the Hong Kong Protestors. Mei is a cannonically Chinese in the game. The [most popular of these posts](https://www.reddit.com/r/HongKong/comments/dfdqf8/if_we_are_gonna_do_it_we_are_gonna_do_it_big_mei/) was a gif depicting Mei adopting the demands of the movement. This post by u/omegalulit achieved a score over 135,000. The following image first appeared on the r/HongKong subreddit at 12:57:12 p.m. EST on Oct. 8th with the caption _"It would be such a shame if Mei from Overwatch became a pro-democracy symbol and got Blizzard's games banned in China"_. Mei Meme

The image posted by u/batture garnered a score over 15,000. The idea was quickly adopted by posters in the r/HongKong subreddit. Three and a half hours later, user u/FloL00L posted the first image explicitly using Mei as a political icon. mei

This meme combines a series of symbols and other images used by the Hong Kong protestors. This includes the umbrella, the Bauhinia × blakeana flower and "Five demands. Not one less" slogan. From there, users including u/FloL00L began iterating on the "Pro-Hong Kong Mei" meme concept. We see protesters producing their own drawings: mei

The latter includes a reference to a [protestor who was appear to have been shot in the eye by a police beanbag round](https://www.theguardian.com/world/2019/aug/16/an-eye-for-an-eye-hong-kong-protests-get-figurehead-in-woman-injured-by-police). Some even combine Mei with other Blizzard intellectual property: mei

Here we see Mei's image, combined with the gas mask used by Blitzchung and other Hong Kong protesters, being used as an insert to a Hearthstone card.`36:T705,md`The data displayed here is not a comprehensive list of all posts pertaining to Blizzard/Hong Kong controversy. While performing our search, we radiated out using posts that our classifier deemed relevant. As with any classifier, it is occasionally wrong, excluding posts that should be added, and including posts that should not be. You will see unrelated posts in the graph above. One way to improve this visualization would be to improve the success rate of the classifier. It is also likely that our Breadth First Search did not reach every relevant post on Reddit as we did not find the bottom of the proverbial tree. The graph also suffers from a few issues with visualizing this large categorical dataset. These are obivious in the scales of the x-axis (too compressed) and y-axis (too long). The x-axis may be fixable with a zoom/brush function that allows the user to scrub through the graph with more granularity. The y-axis asks a more editorial question. We could theoretically limit the data set by setting a threshold on the number of posts or the total score achieved over our time frame. The exact strategy would depend on the goal of the visualization -- what specific information it wants to highlight. There is an unseen, but significant issue where a post on the timeline can be potentially obscured by larger, higher-score submission. We populate the graph in date order, meaning the posts are added as they were submitted to reddit, independant of which subreddit they were submitted to. If two objects overlap in D3, the more recently added one (read: later post) is placed on top of the older one. This means that a large post (with a large circle area) could potentially obscure a small post on the same subreddit if they were posted close in time to eachother. `37:[] 2f:{"title":"Hong Kong, Blizzard, gamers and a fight waged on Reddit","cells":[{"id":0,"value":"md`# Hong Kong, Blizzard, gamers and a fight waged on Reddit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md `[Aaron Brezel](https://github.com/aaronbrezel) and [Bhaskar Ghosh](https://github.com/bhsgsh10) at the Columbia Graduate School of Journalism\n\nSVM classifier and data analysis by [Shuai Hao](https://github.com/haoshuai999)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"md`**[Github Repository](https://github.com/bhsgsh10/hongkongmei/)**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`## Graph Explanation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`## Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`## Mei Memes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`## Limitations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`## Final Thoughts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"md`The dataset we collected is large and multidimentional. This graph provides a high level look at Reddit activity divided by subreddit. It could be improved by the addition of filters that could allow users to look for specific activity. This could include the ability to limit posts by specific authors, filter by a certain keyword in the title (e.g. \"Mei\") or by outbound link. We could even allow users to change the encoding of the post circles. Area could represent the number of comments, for example. \n\n\nThere are also other ways to more effectively visualize specific dimensions of our collected data. We could watch for coordinated user activity by using a multi-line time-series chart to view posts by hour for each user. We could also cluster memes using pHashing to understand how the visual language of the protest changed over time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"function buildIframe(d){ //This is not used\n var iframe = ``\n \n return iframe \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"function buildToolTip(d, toolTip){\n var rows = []\n rows.push([\"Post Title\", d.title])\n rows.push([\"Time posted\", d.created_datetime])\n rows.push([\"user\", d.author])\n rows.push([\"score\", d.score])\n rows.push([\"# Comments\", d.num_comments])\n \n if (d.url.substring(0, 18) == \"https://v.redd.it/\"){ //Unusued for now\n console.log(\"video!\")\n }\n else if (d.url.substring(0, 18) == \"https://i.redd.it/\"){\n rows.push([\"Media\", ` $\"Media$ `])\n }\n \n \n \n\n// rows.push([Image])\n \n \n toolTip.html(rows.map(row => `${row[0]}:${row[1]}`).join(''))\n .transition().duration(200)\n .style('opacity', 0.9)\n \n if (1000 - d3.event.pageX < 450){\n toolTip.style(\"left\", (d3.event.pageX - toolTip.node().offsetWidth - 28) + \"px\").style(\"top\", (d3.event.pageY - 28) + \"px\")\n }\n else {\n toolTip.style(\"left\", (d3.event.pageX + 28) + \"px\").style(\"top\", (d3.event.pageY - 28) + \"px\")\n }\n \n\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"function score_to_radius (score) {\n var frac = Math.log(score)/Math.log(195117) //Right now, posts with small score will be basically invisible, we can fix this later\n var fracArea = frac * 3.14 * 8\n \n var radius = (fracArea/3.14)^(0.5)\n\n return radius \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"x = d3.scaleTime()\n .range([0,graphWidth])\n .domain(d3.extent(data_with_datetime.map(d => date(d.created_datetime))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"y = d3.scaleBand()\n .range([0, graphHeight])\n .domain(data.map( d => d.subreddit)) //maps y scale to categorical variable of the subreddit that appeareds","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"xAxis = d3.axisTop(x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"yAxis = d3.axisLeft(y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"SVGwidth = 1000\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"SVGheight = 9600","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"margin = ({top: 20, right: 40, bottom: 20, left: 120})","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"graphWidth = SVGwidth - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"graphHeight = SVGheight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"function created_utc_to_datetime (created_utc) {\n var utc_to_epoch = parseInt(created_utc) * 1000\n var formatTime = d3.timeFormat(\"%Y-%m-%d %H:%M:%S\")\n var date = new Date(utc_to_epoch)\n return formatTime(date)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"date = d3.timeParse(\"%Y-%m-%d %H:%M:%S\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"data = d3.csv(\"https://raw.githubusercontent.com/bhsgsh10/hongkongmei/master/post_table_example_filtered.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"data_with_datetime = {\n const data = await d3.csv(\"https://raw.githubusercontent.com/bhsgsh10/hongkongmei/master/post_table_example_filtered.csv\")\n \n for (var i = 0; i < data.length; i++){\n data[i]['created_datetime'] = created_utc_to_datetime(data[i]['created_utc']) //Converts created_utc epoch time e.g. 1570516640 to a datetime format e.g. \"2019-10-08 02:37:20\"\n }\n \n \n return data\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"subreddit_data = d3.csv(\"https://raw.githubusercontent.com/bhsgsh10/hongkongmei/master/subreddit_post_counts.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}