30:T583,viewof account_status_dp = vl.markBar({tooltip: {"content": "data"}, size:5}) .data(community_data) .transform( vl.groupby('community_type').aggregate(vl.sum('user_count').as('Users'), vl.sum('active_users').as('Active'),vl.sum('deleted_users').as('Deleted'),vl.sum('suspended_users').as('Suspended') ), vl.calculate("datum.Active/datum.Users * 100").as("Percentage of Active Users"), vl.calculate("datum.Deleted/datum.Users * 100").as("Percentage of Deleted Users"), vl.calculate("datum.Suspended/datum.Users * 100").as("Percentage of Suspended Users") ) .encode( vl.color().fieldN('community_type'), vl.x().fieldQ( vl.repeat("repeat") ).axis({grid: false, titleFontSize:"13", labelFontSize: "12"}), vl.y().fieldN('community_type').axis({grid: false, title: false, labelFontSize: "12"}), //vl.y().fieldN('community_type').axis({grid: false, title: "Community Type", titleFontSize:"12", labelFontSize: "12"}), //vl.tooltip().fieldT("date") //([vl.fieldT("date"), "total_cases", "total_hospitalizations"]) //vl.color( {"value": "teal"}) ) .width(width/5) .repeat([ "Percentage of Active Users", "Percentage of Deleted Users", "Percentage of Suspended Users" ]) .columns(1) //.title({text:"Total Cases, Hospitalizations, and Deaths in VA over Time", fontSize:"30", offset:"30"}) .padding("20") .render()31:T1c3e, dashboard = { reset // create an interval selection over an x-axis encoding const brush = vl.selectInterval().encodings('x'); // determine opacity based on brush const opacity = vl.opacity().if(brush, vl.value(0.9)).value(0.1); //Communities Chart const communities = vl.markBar() .data(community_data) .encode( vl.color().fieldN('community_type').legend({orient: 'right', title: "Community Type"}).scale( {"range": color }), vl.x().fieldN('community').title("Community").axis({titleFontSize:12}), vl.y().fieldQ('user_count').title("Number of Users").axis({titleFontSize:12}), //.sort(vl.sum('cases').order('descending'), vl.tooltip(['community','user_count']), opacity ) .title({text: "Number of Users in Each Community", color: "#ad6d9c", subtitle: "Drag out to select one or more communities" , subtitleColor: "#856a7e" , fontWeight: "bold", fontSize: "15"}) .select(brush) .height(0.28*height) .width(width/2.7) .padding("20") //Account Status Chart const account_status = vl.markBar({tooltip: {"content": "data"}, size:15}) .data(user_status_data) .transform( vl.groupby('community_type', 'user_status', 'community').aggregate(vl.sum('value').as('total')) ) .encode( vl.color().fieldN('community_type'), //.scale( {"range": ["#7aacb3", "#006666"]}), vl.x().fieldQ('total').title("Number of Users").axis({titleFontSize:12}), vl.y().fieldN('user_status').title("Status").axis({titleFontSize:12}), opacity ) .title({text: "Account Status of Users", subtitle: "Suspended and deleted users were found to be mostly promoters" , color: "#ad6d9c", subtitleColor: "#856a7e", fontWeight: "bold", fontSize: "15"}) .height(0.08*height) .width(width/2.7) .padding("20") //URL Promoters Chart const urls_promoters = vl.markBar({"yOffset": 1, "cornerRadiusEnd": 2, "height": {"band": 0.9}}) .data(promoters_top10) //promoters_top10 .encode( vl.color().value(color[1]), //vl.opacity().value(0.3), vl.x().fieldQ('RTs_promoters').title("Number of Retweets").scale({"domain": [0, 60000]}), //.scale({type: 'log'}) vl.y().fieldN('domain') .title("Top 10 Domains") .sort(vl.fieldQ('RTs_promoters') .order('descending')) .axis({ "bandPosition": 0, "grid": true, "domain": false, "ticks": false, "labelAlign": "right", "labelBaseline": "middle", "labelPadding": -530, "labelOffset": 1, "labelFontSize": 12, "titleX": -50, "titleY": 100, "titleAngle": 270, "titleOpacity": 0, "titleAlign": "left", "titlePadding": 100, }), vl.tooltip(['RTs_promoters'])) .title({text: "Top 10 domains shared by promoters",subtitle: "Top domains shared by promoters are of low-quality news media, streaming services, and YouTube" , color: "#0249a6", subtitleColor: "#4774ad", fontWeight: "bold", fontSize: "15"}) .height(height/5.6) .width(width/2.8) //URL Detractors Chart const urls_detractors = vl.markBar({"yOffset": 1, "cornerRadiusEnd": 2, "height": {"band": 0.9}}) .data(detractors_top10) .encode( vl.color().value(color[0]), //vl.opacity().value(0.3), vl.x().fieldQ('RTs_community0').title("Number of Retweets").scale({"domain": [0, 16500]}), //.scale({type: 'log'}) vl.y().fieldN('domain') .title("Top 10 Domains") .sort(vl.fieldQ('RTs_community0') .order('descending')) .axis({ "bandPosition": 0, "grid": true, "domain": false, "ticks": false, "labelAlign": "right", "labelBaseline": "middle", "labelPadding": -530, "labelOffset": 1, "labelFontSize": 12, "titleX": -20, "titleY": 100, "titleAngle": 270, "titleOpacity": 0, "titleAlign": "left" }), vl.tooltip(['RTs_promoters'])) .title({text: "Top 10 domains shared by detractors", subtitle: "Top domains shared by detractors are of mainstream news media sites", color: "#0249a6", subtitleColor: "#4774ad", fontWeight: "bold", fontSize: "15"}) .height(height/5.6) .width(width/2.8) //Collected tweets Chart const tweets = vl.markCircle({size: 80}) .data(tweet_data) .params(vl.selectInterval().bind("scales")) .encode( vl.color().fieldN('community_type'), //vl.color().value('grey').if(brush, vl.color().fieldN('community')), vl.x().fieldQ("RTs").axis({ title: "Number of Retweets", titleFontSize:"12", labelFontSize: "15", tickCount:15, grid: false}).scale({"domain": [T_RTsrangelimit[0]-100, T_RTsrangelimit[1] + 1000]}), //.scale({"type": "log"}) // .timeUnit('utcmonthdate'), vl.y().fieldQ("QTs").axis({title: "Number of Quote Tweets", titleFontSize:"12", labelFontSize: "15", grid: false}).scale({"domain": [T_QTsrangelimit[0] - 100,T_QTsrangelimit[1] + 1000]}), vl.tooltip([vl.fieldN("tweet_id"), "RTs", "QTs"]), //.fieldQ("cases") //vl.color( {"value": "teal"}) vl.href().fieldN('tweet_url'), opacity ) .title({text: "Tweets", subtitle: "Click and drag to pan, use the scroll wheel to zoom, and click on any point to view the tweet", color: "#0b4f6c" , subtitleColor: "#4488a6" , fontWeight: "bold", fontSize: "15"}) .height(height/1.9) .width(width/2.7) //Associated Users Chart const users = vl.markCircle({size: 80}) .data(user_data) .params(vl.selectInterval().bind("scales")) .encode( vl.color().fieldN('community_type'), //vl.color().value('grey').if(brush, vl.color().fieldN('community')), vl.x().fieldQ("RTs").axis({title: "Number of Retweets", titleFontSize:"12", labelFontSize: "15", tickCount:15, grid: false}).scale({"domain": [RTsrangelimit[0]-100, RTsrangelimit[1] + 1000]}), //.scale({"type": "log"}) // .timeUnit('utcmonthdate'), vl.y().fieldQ("QTs").axis({title: "Number of Quote Tweets", titleFontSize:"12", labelFontSize: "15", grid: false}).scale({"domain": [QTsrangelimit[0] - 100,QTsrangelimit[1] + 1000]}), vl.tooltip([vl.fieldN("user_id"), "RTs", "QTs"]), //.fieldQ("cases") //vl.color( {"value": "teal"}) vl.href().fieldN('user_url'), opacity ) .title({text: "Users", subtitle: "Click and drag to pan, use the scroll wheel to zoom, and click on any point to view the user", color: "#0b4f6c" , subtitleColor: "#4488a6", fontWeight: "bold", fontSize: "15" }) .height(height/1.9) .width(width/2.7) //Concatenating the Charts const top_left = vl.vconcat(communities,account_status) const top_right = vl.vconcat(urls_detractors, urls_promoters) //.title("Top 10 most shared domains by promoters and detractors"); const top = vl.hconcat(top_left, top_right ) //.title({text: "Drag out to select one or more communities.", color: "#fa6632"}); //, align: "right" const bottom = vl.hconcat(tweets, users) //.title({text: "Click and drag to pan, use the scroll wheel to zoom, and click on any point to explore the tweet/user on Twitter (shift + click to open in new tab).", color: "#fa6632"}); const full_view = vl.vconcat(bottom,top); return full_view .render(); } 32:[] 2e:{"title":"Part 2: Dashboard","cells":[{"id":0,"value":"md`# Part 2: Dashboard\n[CS 725/825, Spr21 - Final Project - Dashboard](https://github.com/cs725-infovis-master/public/blob/main/spr21/project.md) \n**Presented on:** Thursday, April 22, 2021\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"md`Himarsha Jayanetti - CS 825`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1424,"value":"md`### Basic Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"embed = require(\"vega-embed@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"import {table} from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1472,"value":"Inputs = require(\"@observablehq/inputs@0.7.21/dist/inputs.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":"Button = Inputs.Button","pinned":false,"hidden":false,"mode":"ojs"},{"id":1519,"value":"import {rangeSlider, themes} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"vegaEmbed = require(\"vega-embed@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1432,"value":"md`### From Data Notebook\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"import {community_data, user_status_data, tweet_data, user_data, url_data, promoters_top10, detractors_top10} from \"@himarshaj/part-1-data-manipulation-references\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1685,"value":"promoters_top10","pinned":true,"hidden":false,"mode":"ojs"},{"id":1687,"value":"detractors_top10","pinned":true,"hidden":false,"mode":"ojs"},{"id":1451,"value":"md`## New Variables\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1524,"value":"color = [\"#006666\", \"#7aacb3\"] \n// [\"#\", \"#\"] \n//royal blue and yellow [\"#012d78\", \"#fad644\"] \n// greenblue&twitterblue[\"#053A66\", \"#1DA1F2\"] \n// yellow&twitterblue [\"#FFD662FF\", \"#1DA1F2\"] \n// pink&purple [\"#3C1053FF\", \"#DF6589FF\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"user_url_prefix = \"https://twitter.com/intent/user?user_id=\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"tweet_url_prefix = \"https://twitter.com/user/status/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"updated_user_data = {\n user_data.forEach(function (arrayItem) {\n arrayItem.user_url = user_url_prefix + arrayItem.user_id;\n }); \n return user_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"updated_tweet_data = {\n tweet_data.forEach(function (arrayItem) {\n arrayItem.tweet_url = tweet_url_prefix + arrayItem.tweet_id;\n });\n \n return tweet_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1529,"value":"user_data_subset = user_data\n.filter(user => \n user.RTs >= RTsrangelimit[0] &&\n user.RTs <= RTsrangelimit[1])\n.filter(user => \n user.QTs >= QTsrangelimit[0] &&\n user.QTs <= QTsrangelimit[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"tweet_data_subset = tweet_data\n.filter(tweet => \n tweet.RTs >= RTsrangelimit[0] &&\n tweet.RTs <= RTsrangelimit[1])\n.filter(tweet => \n tweet.QTs >= QTsrangelimit[0] &&\n tweet.QTs <= QTsrangelimit[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"md`## Dashboard Components\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`### Communities\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof communities = vl.markBar()\n .data(community_data) \n .encode(\n vl.color().fieldN('community_type'), \n vl.x().fieldN('community').title(\"Community\").axis({titleFontSize:12}),\n vl.y().fieldQ('user_count').title(\"Number of Users\").axis({titleFontSize:12}), //.sort(vl.sum('cases').order('descending'),\n vl.tooltip(['user_count']))\n .height(height/3)\n .width(width/3) \n .padding(\"20\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1462,"value":"md`### User Account Status\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"viewof account_status = vl.markBar({tooltip: {\"content\": \"data\"}, size:5})\n .data(community_data)\n .encode(\n vl.color().fieldN('community_type'), \n vl.x().fieldQ(\n vl.repeat(\"repeat\")\n ).axis({grid: false, titleFontSize:\"13\", labelFontSize: \"12\"}), \n vl.y().fieldN('community').axis({grid: false, title: false, labelFontSize: \"12\"}), \n //vl.y().fieldN('community_type').axis({grid: false, title: \"Community Type\", titleFontSize:\"12\", labelFontSize: \"12\"}), \n //vl.tooltip().fieldT(\"date\") //([vl.fieldT(\"date\"), \"total_cases\", \"total_hospitalizations\"]) \n //vl.color( {\"value\": \"teal\"})\n )\n .height(height/9)\n .width(width/4)\n .repeat([\n \"active_users_p\", \n \"deleted_users_p\",\n \"suspended_p\"\n ])\n .columns(1) \n //.title({text:\"Total Cases, Hospitalizations, and Deaths in VA over Time\", fontSize:\"30\", offset:\"30\"}) \n .padding(\"20\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"viewof account_status_new = vl.markBar({tooltip: {\"content\": \"data\"}, size:5})\n .data(user_status_data)\n .transform(\n vl.groupby('community_type','user_status').aggregate(vl.sum('value').as('values')))\n .encode(\n vl.color().fieldN('user_status'),\n vl.x().fieldQ('values'),\n //vl.y().fieldN('user_status'),\n vl.y().fieldN('community_type'\n //vl.repeat(\"repeat\")\n )\n \n )\n // .repeat(['detractors',\n // 'promoters'])\n // .columns(1)\n .padding(\"20\")\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"viewof account_status_percent = vl.markBar({tooltip: {\"content\": \"data\"}, size:5})\n .data(user_status_data)\n .transform(\n vl.groupby('community_type','user_status').aggregate(vl.average('percentage').as('total')))\n .encode(\n vl.color().fieldN('user_status'),\n vl.x().fieldQ('total'),\n vl.y().fieldN('community_type'\n //vl.repeat(\"repeat\")\n )\n \n )\n // .repeat(['detractors',\n // 'promoters'])\n // .columns(1)\n .padding(\"20\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1133,"value":"viewof account_status_1 = vl.markBar({tooltip: {\"content\": \"data\"}, size:5})\n .data(user_status_data)\n .transform(\n vl.groupby('user_status').aggregate(vl.average('percentage').as('total')))\n .encode(\n vl.x().fieldQ('total'),\n vl.y().fieldN('user_status')\n \n )\n .padding(\"20\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1054,"value":"viewof account_status_new_repeat = vl.markBar({tooltip: {\"content\": \"data\"}, size:5})\n .data(user_status_data)\n .transform(\n vl.groupby('community_type','user_status').aggregate(vl.average('percentage').as('total_percentage')))\n .encode(\n vl.color().fieldN('user_status'),\n vl.x().fieldQ('total_percentage'),\n vl.y().fieldN('community_type'),\n vl.y().fieldN(\n vl.repeat(\"repeat\")\n )\n \n )\n .repeat(['detractors',\n 'promoters'])\n .columns(1)\n .padding(\"20\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1510,"value":"viewof account_status_percentage = vl.markBar({tooltip: {\"content\": \"data\"}, size:20})\n .data(user_status_data)\n .params('select')\n .transform(\n vl.groupby('community_type','user_status').aggregate(vl.average('percentage').as('total')))\n .encode(\n vl.color().fieldN('user_status'),\n vl.x().fieldQ('total'),\n vl.y().fieldN('community_type'))\n .height(height/6)\n .width(width/2)\n .padding(\"20\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1670,"value":"viewof account_status1 = vl.markBar({tooltip: {\"content\": \"data\"}, size:15})\n .data(user_status_data)\n .transform(\n vl.groupby('community_type', 'user_status', 'community').aggregate(vl.average('percentage').as('total_p')),\n vl.calculate('datum.total_p/5').as('total')\n )\n \n .encode(\n vl.color().fieldN('community_type'), //.scale( {\"range\": [\"#7aacb3\", \"#006666\"]}),\n vl.x().fieldQ('total').title(\"Number of Users\").axis({titleFontSize:12}),\n vl.y().fieldN('user_status').title(\"Status\").axis({titleFontSize:12}),\n \n ) \n .title({text: \"Account Status of Users\", subtitle: \"Suspended and deleted users were found to be mostly promoters\" , color: \"#ad6d9c\", subtitleColor: \"#856a7e\", fontWeight: \"bold\", fontSize: \"15\"})\n .height(0.08*height)\n .width(width/2.7) \n .padding(\"20\")\n.render()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`### Tweets\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof tweets = vl.markCircle({size: 50})\n .data(tweet_data)\n .params(vl.selectInterval().bind(\"scales\"))\n .encode(\n vl.color().fieldN('community_type'),\n vl.x().fieldQ(\"RTs\").axis({ title: \"Number of Retweets\", titleFontSize:\"12\", labelFontSize: \"15\", tickCount:15}).scale({\"domain\": [0,30000]}), //.scale({\"type\": \"log\"}) // .timeUnit('utcmonthdate'),\n vl.y().fieldQ(\"QTs\").axis({title: \"Number of Quote Tweets\", titleFontSize:\"12\", labelFontSize: \"15\"}).scale({\"domain\": [0,6000]}), \n vl.tooltip([vl.fieldN(\"tweet_id\"), \"RTs\", \"QTs\"]), //.fieldQ(\"cases\") \n //vl.color( {\"value\": \"teal\"})\n )\n //.title( {text:\"Total Cases Vs. Deaths Reported per Each Locality in VA\", fontSize:\"30\"})\n .height(height/3)\n .width(width/3) \n .padding(\"20\")\n //.background(\"#f5f7ff\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`### Users\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof users = vl.markPoint({size: 40})\n .data(user_data)\n .params(vl.selectInterval().bind(\"scales\"))\n .encode(\n vl.color().fieldN('community_type'),\n vl.x().fieldQ(\"RTs\").axis({title: \"Number of Retweets\", titleFontSize:\"12\", labelFontSize: \"15\", tickCount:15}).scale({\"domain\": [0,30000]}), //.scale({\"type\": \"log\"}) // .timeUnit('utcmonthdate'),\n vl.y().fieldQ(\"QTs\").axis({title: \"Number of Quote Tweets\", titleFontSize:\"12\", labelFontSize: \"15\"}).scale({\"domain\": [0,6000]}), \n vl.tooltip([vl.fieldN(\"user_id\"), \"RTs\", \"QTs\"]), //.fieldQ(\"cases\") \n vl.href().fieldN('user_url')\n //vl.color( {\"value\": \"teal\"})\n ) \n //.title( {text:\"Total Cases Vs. Deaths Reported per Each Locality in VA\", fontSize:\"30\"})\n .height(height/3)\n .width(width/3) \n .padding(\"20\")\n //.background(\"#f5f7ff\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`### Domains Shared\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof urls_detractors1 = vl.layer( \n vl.markBar() \n .encode(\n vl.color().value('#66b2b2'), \n vl.x().fieldQ('RTs_community0').title(\"Number of Retweets\"),\n vl.y().fieldN('domain').axis(null).title(\"Top 10 Domains\").sort(vl.fieldQ('RTs_community0').order('descending')),\n vl.tooltip(['RTs_community0']) \n ),\n vl.markText({align: 'left', x: 1}).encode(vl.text().fieldN('domain'))\n)\n .data(detractors_top10) \n .height(height/3)\n .width(width/3) \n .padding(\"20\")\n //.background(\"#f5f7ff\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"table(url_data, {\n sortable: true,\n columns: {\n Fare: {\n formatter(val, i) {\n // A formatter that changes its behavior based on the row index,\n // so we don’t repeat the $ for every row.\n return i === 0 ? d3.format('$.2f')(val) : d3.format('.2f')(val);\n }\n },\n Name: {\n formatter(val) {\n // Formatters can also return HTML values! Here’s\n // one that highlights first names.\n let parts = val.match(/([^,]*)\\,(.*)/);\n return html`${parts[1]}, ${parts[2]}`;\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"viewof layeredBar = vl\n .data(promoters_top10)\n .layer(\n vl.markBar()\n .encode(\n vl.y().fieldN(\"domain\").axis(null),\n vl.x().fieldQ(\"RTs_promoters\").axis({ grid: false }).scale({\"domain\": [0, 10000]})\n .sort(vl.fieldQ('RTs_promoters'))\n )\n ,\n vl.markText({ align: \"left\", dx: 2, dy: 1 })\n .encode(\n vl.y().fieldN(\"domain\"),\n vl.x().fieldQ(\"RTs_promoters\").title(\"Number of Retweets\"),\n vl.text().fieldN(\"domain\")\n )\n )\n.render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof urls_promoters = vl.markBar({\"yOffset\": 1, \"cornerRadiusEnd\": 2, \"height\": {\"band\": 0.9}})\n .data(promoters_top10) //promoters_top10\n .encode(\n vl.color().value('#f2972e'), \n //vl.opacity().value(0.3),\n vl.x().fieldQ('RTs_promoters').title(\"Number of Retweets\").scale({\"domain\": [0, 12000]}), //.scale({type: 'log'})\n vl.y().fieldN('domain')\n .title(\"Top 10 Domains\")\n .sort(vl.fieldQ('RTs_promoters')\n .order('descending'))\n .axis({\n \"bandPosition\": 0,\n \"grid\": true,\n \"domain\": false,\n \"ticks\": false,\n \"labelAlign\": \"right\",\n \"labelBaseline\": \"middle\",\n \"labelPadding\": -375,\n \"labelOffset\": 1,\n \"labelFontSize\": 12,\n \"titleX\": 5,\n \"titleY\": -5,\n \"titleAngle\": 0,\n \"titleAlign\": \"left\"\n }),\n vl.tooltip(['RTs_promoters']))\n .height(height/4.5)\n .width(width/2.5)\n .padding(\"20\")\n //.background(\"#f5f7ff\")\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"viewof urls_detractors = vl.markBar({\"yOffset\": 1, \"cornerRadiusEnd\": 2, \"height\": {\"band\": 0.9}})\n .data(detractors_top10) \n .encode(\n vl.color().value('#5176b0'), \n //vl.opacity().value(0.3),\n vl.x().fieldQ('RTs_community0').title(\"Number of Retweets\").scale({\"domain\": [0, 16500]}), //.scale({type: 'log'})\n vl.y().fieldN('domain')\n .title(\"Top 10 Domains\")\n .sort(vl.fieldQ('RTs_community0')\n .order('descending'))\n .axis({\n \"bandPosition\": 0,\n \"grid\": true,\n \"domain\": false,\n \"ticks\": false,\n \"labelAlign\": \"right\",\n \"labelBaseline\": \"middle\",\n \"labelPadding\": -375,\n \"labelOffset\": 1,\n \"labelFontSize\": 12,\n \"titleX\": 5,\n \"titleY\": -5,\n \"titleAngle\": 0,\n \"titleAlign\": \"left\"\n }),\n vl.tooltip(['RTs_promoters']))\n .height(height/4.5)\n .width(width/2.5)\n .padding(\"20\")\n //.background(\"#f5f7ff\")\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"{\n const button = html`

\nVoterFraud2020\n