26:null 27:["$","title",null,{"children":"The Netflix Nexus - Deprecated | Amrutavarsh Kinagi | Observable"}] 2c:T4ae,

Country of Interest
${Inputs.bind(dependent_f, viewof dependent_country)}

${Inputs.bind(key_source_f1, viewof key_source)}

Co-Producers

${Inputs.bind(key_source_f2, viewof vs_key_source)}

2d:T18c0,arc_key_player = { d3.select("#legend1").html("") d3.select("#arc1").html("") var margin = { top: 0, right: 30, bottom: 90, left: 60 }, width = 900 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var legend = d3 .select("#legend1") .append("svg") .attr("width", 400) .attr("height", 150) .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // append the svg object to the body of the page var svg = d3 .select("#arc1") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const continents = [ "Africa", "Asia", "Europe", "North America", "Oceania", "South America", ]; const key_players = ["United States", "United Kingdom", "Japan","South Korea", "Canada", "Spain", "Colombia", "Germany", "New Zealand", "Ireland", "Romania", "Sweden"] // use a color to denote continents const color = d3.scaleOrdinal().domain(continents).range(d3.schemeSet2); const widthScale = d3.scaleLinear().domain([...new Set(links_data.map(d => d.no_links))]).range([1,5]) var continentColors = legend .selectAll("colors") .data(continents) .enter() .append("circle") .attr("cx", 30) .attr("cy", (c, i) => 50 + i * 15) .attr("r", 5) .style("fill", (c) => color(c)); var continentText = legend .selectAll("text") .data(continents) .enter() .append("text") .text((c) => c) .style("font", "15px arial") .attr("x", 37) .attr("y", (c, i) => 51 + i * 16); // sort the data var dataGroupByContinent = links_data.sort(function (a, b) { if (a.destination_continent > b.destination_continent) { return 1; } else if (a.destination_continent < b.destination_continent) { return -1; } // Else go to the 2nd item if (a.destination_country < b.destination_country) { return -1; } else if (a.destination_country > b.destination_country) { return 1; } else { // nothing to split them return 0; } }); // // List of node names var allNodes = [ ...new Set( dataGroupByContinent.map(function (d) { return d.destination_country; }) ), ]; // A linear scale to position the nodes on the X axis var x = d3.scalePoint().range([0, width]).domain(allNodes); var links = svg .selectAll("links") .data(dataGroupByContinent) .enter() .append("path") .attr("d", function (d) { var start = x(d.destination_country); // X position of start node on the X axis var end = x(d.source_country); // X position of end node return [ "M", start, height - 30, // the arc starts at the coordinate x=start, y=height-30 (where the starting node is) "A", // This means we're gonna build an elliptical arc (start - end) / 2, ",", // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance (start - end) / 2, 0, 0, ",", start < end ? 1 : 0, end, ",", height - 30, ] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down. .join(" "); }) .style("fill", "none") .attr("stroke", (d) => key_players.includes(d.source_country) ? color(d.source_continent) : "#aaa") .attr("stroke-opacity", 0.3) .style("stroke-width", (d)=> widthScale(d.no_links)); // Add the circle for the nodes var nodes = svg .selectAll("mynodes") .data(dataGroupByContinent) .enter() .append("circle") .attr("cx", function (d) { return x(d.destination_country); }) .attr("cy", height - 30) .attr("r", 5) .style("fill", function (d) { return color(d.destination_continent); }) .attr("stroke", "white"); // And give them a label var labels = svg .selectAll("mylabels") .data(allNodes) .enter() .append("text") .attr("x", 0) .attr("y", 0) .text(d=>d) .style("text-anchor", "end") .attr("transform", function (d) { return ( "translate(" + x(d) + "," + (height - 15) + ")rotate(-45)" ); }) .style("font-size", 6); // node highlighting nodes .on("mouseover", function (d) { var country = invertXScale(d3.select(this).attr('cx'),x); console.log(country); nodes.style("opacity", 0.2); d3.select(this).style("opacity", 1); // Highlight the connections links .style("stroke", function (link_d) { return link_d.source_country === country ? color(link_d.source_continent) : "#aaa"; }) .style("stroke-opacity", function (link_d) { return link_d.source_country === country ? 0.7 : 0.2; }) .style("stroke-width", function (link_d) { return link_d.source_country === country ? widthScale(link_d.no_links) : 0.5; }); labels .style("font-size", function (label_d) { return label_d === country ? 10 : 4; }) }) .on("mouseout", function (d) { console.log("mouseout"); console.log(d); nodes.style("opacity", 1); links .style("stroke", (d) => key_players.includes(d.source_country) ? color(d.source_continent) : "#aaa") .style("stroke-opacity", 0.3) .style("stroke-width", (d)=> widthScale(d.no_links)); labels.style("font-size", 6); }); function invertXScale(xPos, xScale){ var domain = xScale.domain(); var range = xScale.range(); var rangePoints = d3.range(range[0], range[1], xScale.step()) var label = domain[d3.bisect(rangePoints, xPos) -1]; return label; } }2e:[{"id":"2778837a3ae3371561f0df498f1b3a8d20755cf8548a9458b8aed4d0ce70c2a15fc5cc197d4cae3d1321d5054afa2ab4ef53b9b139d5992e3cb9ef5b3c737925","href":"https://static.observableusercontent.com/files/2778837a3ae3371561f0df498f1b3a8d20755cf8548a9458b8aed4d0ce70c2a15fc5cc197d4cae3d1321d5054afa2ab4ef53b9b139d5992e3cb9ef5b3c737925","name":"number_links_dataset_9-26-2021@1.csv","type":"text/csv","lastModified":1651093626314.818,"size":41437},{"id":"7ae7f6bb05950f3a5b085948dc341aeac153ebd84d42a65870a6c80f3c8d2f53aa743e264c8c817de224498810b8495f9600681b4ec0a22bbd92aa684e521c10","href":"https://static.observableusercontent.com/files/7ae7f6bb05950f3a5b085948dc341aeac153ebd84d42a65870a6c80f3c8d2f53aa743e264c8c817de224498810b8495f9600681b4ec0a22bbd92aa684e521c10","name":"mega_ultimate_god_data_arg_max_avg_weekly_rank_with_delta.csv","type":"text/csv","lastModified":1651061229891.028,"size":952693}] 2a:{"id":"245fe77b339c3d44","slug":"netflix-gatekeeping-exploratory/2","title":"The Netflix Nexus - Deprecated","thumbnail":"be31f13cd458a8959b179823996c958c745ec01e2e960d64f15afaad4e436c40","access_level":"public","create_time":"$D2022-04-25T18:50:41.710Z","update_time":"$D2022-05-08T21:20:59.096Z","view_time":null,"first_public_time":"$D2022-04-26T04:17:51.776Z","fork":{"id":"336f1541df6c6761","slug":"netflix-gatekeeping-exploratory","title":"Netflix gatekeeping exploratory","owner":{"id":"a0518cd4a93bd4f2","login":"205e184174312240","name":"Amrutavarsh Kinagi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a0518cd4a93bd4f2","login":"205e184174312240","name":"Amrutavarsh Kinagi","avatar_url":"https://avatars-next.observableusercontent.com/c236b7f0d2dc06594e0f3071128e7a9962367ba42205a398ddc5a14867d3e599","tier":"starter_2024"},"version":1604,"publish_version":1604,"role":null,"authored":false,"authors":[{"type":"individual","id":"205e184174312240","login":"205e184174312240","name":"Amrutavarsh Kinagi","avatar_url":"https://avatars-next.observableusercontent.com/c236b7f0d2dc06594e0f3071128e7a9962367ba42205a398ddc5a14867d3e599","tier":null}],"members":[{"type":"individual","id":"09bb7f7328cf8a74","login":"09bb7f7328cf8a74","name":"Audrey Leong","avatar_url":"https://avatars-next.observableusercontent.com/c236b7f0d2dc06594e0f3071128e7a9962367ba42205a398ddc5a14867d3e599","tier":null,"role":"editor"},{"type":"individual","id":"205e184174312240","login":"205e184174312240","name":"Amrutavarsh Kinagi","avatar_url":"https://avatars-next.observableusercontent.com/c236b7f0d2dc06594e0f3071128e7a9962367ba42205a398ddc5a14867d3e599","tier":null,"role":"editor"},{"type":"individual","id":"54999bcfeed37795","login":"jcha0621","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e039a601a9d06b2180a6094ab608130b2a18a48e9adb175ca7ca92afabd8bf47","tier":null,"role":"editor"},{"type":"individual","id":"3fe772c1c0190bbd","login":"yva2002","name":"Yamini Ananth","avatar_url":"https://avatars-next.observableusercontent.com/c10c0b7518abe08dda3fa8d8075d87e76017ba08601ac9a91442fe331c86eea9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"The Netflix Nexus - Deprecated","cells":[{"id":0,"value":"# The Netflix Nexus - Deprecated\n## Discovering Key Players that influence Global Media on Netflix ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":788,"value":"Yamini Ananth, Audrey Leong, Amrutavarsh Kinagi, Jenny Cha","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1585,"value":"[Add an intro here]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":608,"value":"## What does it mean to be a key player?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":615,"value":"In the arc diagram below, we’ve visualized how countries export their media to other countries. *(Feel free to hover your mouse over nodes to see interesting patterns!)*\n\nKey players are the denser nodes; for example, we see tons of pink, as the US exports to almost every in the world. We can also see a lot of Japanese exports in orange, and purple from the UK. Within Latin America, Colombia is a major exporter of media as well. \n\nKey players have a global impact! But, is this impact all their own?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":629,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":403,"value":"## Case Study - Mexican Media in Europe\n\nMost weeks from July 2021 to March 2022, Mexico has produced media trending in Europe that ranked in the top 10.\nYou might not be super surprised - Spanish shows might be trending in European Spanish speaking countries.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":472,"value":"Plot.plot({\n height:350,\n width:800,\n marginBottom:100,\n y: {\n label: \"↑ Popularity\",\n domain: [0,10],\n grid: true\n },\n x: {\n tickFormat: d3.utcFormat(\"%d-%b-%Y\"),\n tickRotate: -90,\n },\n marks: [\n Plot.barY(filtered_mexico_in_europe.filter(d => d.measure_name.match(\"sole_producer\")),{x: \"week\", y: d => Math.abs(d.weekly_rank), fill: \"#73d3ff\", title: (d) => `Popularity: ${Math.abs(d.weekly_rank).toFixed(2)}`}),\n ],\n tooltip: {\n fill: \"#FFBF00\",\n stroke: \"#FFBF00\",\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1183,"value":"But, is that what’s really happening? \nPlenty of shows around the world aren’t produced in (or by) just one country. Is Mexico generating all of this media that gets super popular in Europe by itself?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":385,"value":"

Does US backing improve Mexican media popularity in Europe?

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1196,"value":"Here, we’ve split up shows that were created by Mexico from shows that were jointly created by Mexico and the US. \nWe can see that, actually, a lot of the most popular media (ranked the highest) are actually co-produced with the US!\nThough this may not be entirely surprising, it gives us this concept that our key player countries from before could, in fact, provide a boost for certain geographic regions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":509,"value":"Purple indicates US backed Mexican media popularity in Europe.
\nBlue shows solely Mexican produced shows","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":483,"value":"Plot.plot({\n width:800,\n marginBottom:100,\n y: {\n label: \"↑ Popularity\",\n domain: [-10,10],\n grid: true\n },\n x: {\n tickFormat: d3.utcFormat(\"%d-%b-%Y\"),\n tickRotate: -90,\n },\n color: {\n range: [\"#73d3ff\", \"#9173ff\"]\n },\n marks: [\n Plot.barY(filtered_mexico_in_europe,{x: \"week\", y: \"weekly_rank\", fill: d=> Math.sign(d.weekly_rank), title: (d) => `Popularity: \\n ${d.weekly_rank.toFixed(2)}`})\n ],\n tooltip: {\n fill: \"#FFBF00\",\n stroke: \"#FFBF00\",\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":496,"value":"

To gauge improvement in popularity, we can look at a delta graph instead.

\nGreen indicates how much better US backed Mexican media performs in Europe.
\nRed shows Mexican shows perform great by themselves","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1226,"value":"What we’ve done here is subtract the US-backed Mexican media from the purely Mexican media to see what remains.

\n\nThe more green you see, the more a US backing makes a difference; more red, and Mexico doesn't need the US backing for its media to succeed.

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1478,"value":"Plot.plot({\n width:800,\n marginBottom:100,\n y: {\n label: \"↑ Popularity Delta\",\n domain: [-10,10],\n grid: true\n },\n x: {\n tickFormat: d3.utcFormat(\"%d-%b-%Y\"),\n tickRotate: -90,\n },\n color: {\n range: [\"#e15759\", \"#45c421\"]\n },\n marks: [\n Plot.barY(filtered_data_Mexico_US.filter(d => d.destination_continent == \"Europe\"),{x: \"week\", y: \"val\", fill: d => Math.sign(d.val), title: (d) => `Popularity Delta:\\n ${Number(d.val).toFixed(2)}`})\n ],\n tooltip: {\n fill: \"#FFBF00\",\n stroke: \"#FFBF00\",\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1369,"value":"You can see that, for the most part, like we saw earlier, the US-backed Mexican media is doing better in Europe, by a significant margin. But, is this effect equal across all continents? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":409,"value":"## Does the boosting effect of US-backed Mexican media percolate to the rest of the world?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"We can see this effect across all continents to an extent. Purely Mexican shows do better in North and South America, but in Europe, and to some extent Asia, having the US as a backer really improves popularity. \nThis is pretty interesting, and gives us a cool framework for understanding how a key player might boost another country’s media around the world.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":413,"value":"Plot.plot({\n height: 650,\n width: 800,\n marginBottom:100,\n y: {\n label: \"↑ Popularity Delta\",\n domain: [-10,10],\n grid: true\n },\n x: {\n tickFormat: d3.utcFormat(\"%d-%b-%Y\"),\n tickRotate: -90,\n },\n facet: {\n data: filtered_data_Mexico_US,\n y: \"destination_continent\",\n marginRight: 90 \n },\n color: {\n range: [\"#e15759\", \"#45c421\"]\n },\n marks: [\n Plot.frame(),\n Plot.barY(filtered_data_Mexico_US,{x: \"week\", y: \"val\", fill: d => Math.sign(d.val), title: (d) => `Popularity Delta:\\n ${Number(d.val).toFixed(2)}`})\n ],\n tooltip: {\n fill: \"#FFBF00\",\n stroke: \"#FFBF00\",\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"## Now let's see if this \"boosting\" effect is generalizable!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1295,"value":"In order to really compare the effects, we expand our delta graph from before for side-by-side comparison.\nThe graph allows you to select two investing sources and see how that impacts a country of interest. If you see more green, this means that the investing source helps boost a country. On the other hand, if you see more red, that means the origin country is doing well by itself.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":647,"value":"Let's take a specific example to illustrate this visualization. Australia is producing media that goes viral around the world every week.\nBut from graph below, we can see that Australia gets a huge boost from the US in every single continent. In addition, we can see that content they produce by themselves doesn’t do nearly as well. Now if we set Japan as a co-producer instead of the US, we say that unlike the US, Japan doesn’t offer much help at all. Instead, purely Australian media does better, even in Japan’s home continent, Asia.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":986,"value":"$2c","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":543,"value":"Plot.plot({\n height: 650,\n width: 1200,\n marginBottom:100,\n y: {\n label: \"↑ Popularity Delta\",\n domain: [-10,10],\n grid: true\n },\n x: {\n tickFormat: d3.utcFormat(\"%d-%b-%Y\"),\n tickRotate: -90\n },\n facet: {\n data: filtered_rank_data_delta,\n y: \"destination_continent\",\n x: \"key_source\",\n marginRight: 90,\n label: \"\"\n },\n color: {\n range: [\"#e15759\", \"#45c421\"]\n },\n marks: [\n Plot.frame(),\n Plot.barY(filtered_rank_data_delta,{x: \"week\", y: \"val\", fill: d => Math.sign(d.val), title: (d) => `Popularity Delta:\\n ${Number(d.val).toFixed(2)}`})\n ],\n tooltip: {\n fill: \"#FFBF00\",\n stroke: \"#FFBF00\",\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1325,"value":"For nearly any country of interest, selecting the US as a co-producer provides a boost across most continents. South Korea, Colombia, and India are exceptions to this rule, but their content is also mostly exported within their continent. Many interesting intra-regional dynamics are also at play here!\n

Now, feel free to test out different combinations of countries to see what interesting key players and co-producers you can discover!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":80,"value":"## Data manipulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":532,"value":"rank_data = FileAttachment(\"mega_ultimate_god_data_arg_max_avg_weekly_rank_with_delta.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"filtered_mexico_in_europe = { \n let filtered_data = rank_data.filter(function (d){\n return d.key_source.match(\"United States\") && d.dependent_country.match(\"Mexico\") && d.destination_continent.match(\"Europe\") && !(d.measure_name.match(\"delta\"))\n})\n let data = []\n for (const d of filtered_data) {\n for (const w of weeks) {\n if(d.measure_name.match(\"sole_producer\")){\n data.push({week:new Date(w), weekly_rank: d[w] - 11, measure_name: d.measure_name})\n }\n else{\n data.push({week:new Date(w), weekly_rank: 11 - d[w], measure_name: d.measure_name})\n }\n }\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"filtered_data_Mexico_US = {\n let filtered_data = rank_data.filter(function (d){\n return d.key_source.match(\"United States\") && d.dependent_country.match(\"Mexico\") && d.measure_name.match(\"delta\")\n})\n return data_unroll(filtered_data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"filtered_rank_data_delta = { \n let filtered_data = rank_data.filter(function (d){\n return (d.key_source.match(key_source) || d.key_source.match(vs_key_source)) && d.dependent_country.match(dependent_country) && d.measure_name.match(\"delta\")\n})\n return data_unroll(filtered_data)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"links_data = FileAttachment(\"number_links_dataset_9-26-2021@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"viewof key_source = new Inputs.input(\"United States\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"viewof vs_key_source = new Inputs.input(\"South Korea\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"viewof dependent_country = new Inputs.input(\"Australia\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"weeks = ['7/4/21',\n '7/11/21',\n '7/18/21',\n '7/25/21',\n '8/1/21',\n '8/8/21',\n '8/15/21',\n '8/22/21',\n '8/29/21',\n '9/5/21',\n '9/12/21',\n '9/19/21',\n '9/26/21',\n '10/3/21',\n '10/10/21',\n '10/17/21',\n '10/24/21',\n '10/31/21',\n '11/7/21',\n '11/14/21',\n '11/21/21',\n '11/28/21',\n '12/5/21',\n '12/12/21',\n '12/19/21',\n '12/26/21',\n '1/2/22',\n '1/9/22',\n '1/16/22',\n '1/23/22',\n '1/30/22',\n '2/6/22',\n '2/13/22',\n '2/20/22',\n '2/27/22',\n '3/6/22',\n '3/13/22',\n '3/20/22']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":896,"value":"all_dependent_countries =[\"Brazil\",\"Turkey\",\"Philippines\",\"Thailand\",\"Malaysia\",\"Belgium\",\"Finland\",\"Norway\",\"Ireland\",\"Hong Kong\",\"Israel\",\"Canada\",\"Mexico\",\"Colombia\",\"Spain\",\"France\",\"Germany\",\"Italy\",\"Nigeria\",\"India\",\"China\",\"Japan\",\"New Zealand\",\"South Korea\",\"Australia\",\"United Kingdom\",\"United States\"].sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":626,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"data_unroll = function(dataset) {\n let data = []\n for (const d of dataset) {\n for (const w of weeks) {\n data.push({week: new Date(w), val: d[w], destination_continent: d.destination_continent, key_source: d.key_source})\n }\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":893,"value":"dependent_f = select({\n title: \"\",\n options: all_dependent_countries,\n selected: \"Australia\",\n selectStyle: {\n background: \"#ff9c9d\",\n \"font-size\": \"15px\",\n height: \"30px\"\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1202,"value":"key_source_f1 = select({\n title: \"\",\n options: [\"United States\", \"United Kingdom\", \"Japan\",\"South Korea\", \"Canada\", \"Spain\", \"Colombia\", \"Germany\", \"New Zealand\"],\n selected: \"South Korea\",\n selectStyle: {\n background: \"#b2f2a0\",\n \"font-size\": \"15px\",\n height: \"30px\"\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1061,"value":"key_source_f2 = select({\n title: \"\",\n options: [\"United States\", \"United Kingdom\", \"Japan\",\"South Korea\", \"Canada\", \"Spain\", \"Colombia\", \"Germany\", \"New Zealand\"],\n selected: \"United States\",\n selectStyle: {\n background: \"#b2f2a0\",\n \"font-size\": \"15px\",\n height: \"30px\"\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1498,"value":"graph_selector = select({\n title: \"\",\n options: [\"Sole Producer\", \"Absolute value Graph\", \"Delta Graph\"],\n selected: \"Sole Producer\",\n selectStyle: {\n background: \"linear-gradient(#e66465, #9198e5)\",\n \"font-size\": \"15px\",\n height: \"30px\"\n },\n onchange: ({ select, value }) =>d3.select(select).style(\"background\", graph_selector_color[value])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":907,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":911,"value":"import { select } from \"@bartok32/diy-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":921,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1075,"value":"bootstrap = require('bootstrap')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1173,"value":"html`css `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1397,"value":"## Testing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1495,"value":"viewof graph_type = new Inputs.input(\"Sole Producer\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1405,"value":"bars = barY(animated_graph_data.filter(d => d.gType.match(\"Sole Producer\")), { x: \"week\", fill: d => get_color(d)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1404,"value":"{\n graph_type\n yield graph_type\n const updated = animated_graph_data.filter(d => d.gType.match(graph_type))\n await bars\n .transition({ Y: updated.map(d => d.val), C: updated.map(d => get_color(d)) }, { duration: 750 })\n .end();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1401,"value":"barY = function (data, options) {\n const B = Plot.barY(data, options);\n const { render } = B;\n const G = [];\n let c;\n let that;\n\n B.render = function (I, scales, channels, dimensions) {\n c = { scales, dimensions };\n that = this;\n\n const g = render.apply(this, arguments);\n G.push(g);\n\n return g;\n };\n\n B.transition = ({ Y, C }, { delay = 0, duration = 1000 } = {}) => {\n const y1 = Array.from(Y, () => c.scales.y(0));\n const y2 = Array.from(Y, c.scales.y);\n\n // here's how bars dimensions are controlled within Plot.BarY:\n const y = that._y(c.scales, { y1, y2 }, c.dimensions);\n const height = that._height(c.scales, { y1, y2 }, c.dimensions);\n\n return d3\n .selectAll(G)\n .selectAll(\"rect\")\n .transition()\n .delay(delay)\n .duration(duration)\n .attr(\"height\", height)\n .attr(\"fill\", (i) => c.scales.color(C[i]))\n .attr(\"y\", y);\n };\n\n return B;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1500,"value":"Select to transform between graphs:
${Inputs.bind(graph_selector, viewof graph_type)}
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":345,"value":"barchart = bars.plot({\n width:800,\n marginBottom:100,\n y: {\n label: \"↑ Popularity\",\n domain: [-10,10],\n grid: true\n },\n x: {\n tickFormat: d3.utcFormat(\"%d-%b-%Y\"),\n tickRotate: -90,\n },\n color: {\n domain: [1,2,3,4],\n range: [\"#73d3ff\", \"#9173ff\",\"#e15759\", \"#45c421\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1488,"value":"get_color = function(d){\n if(graph_type == \"Sole Producer\"){\n return 1\n }\n if(graph_type == \"Absolute value Graph\"){\n if(d.val <= 0){\n return 1\n }\n return 2\n }\n if(graph_type == \"Delta Graph\"){\n if(d.val <= 0){\n return 3\n }\n return 4\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1534,"value":"animated_graph_data = {\n let data = []\n for (const d of filtered_mexico_in_europe) {\n data.push({gType: \"Absolute value Graph\", week:d.week, val: d.weekly_rank})\n }\n for (const d of filtered_data_Mexico_US.filter(d => d.destination_continent == \"Europe\")) {\n data.push({gType: \"Delta Graph\", week:d.week, val: d.val})\n }\n for (const w of weeks) {\n data.push({gType: \"Delta Graph\", week:new Date(w), val: 0})\n }\n for (const d of filtered_mexico_in_europe) {\n if(d.measure_name == \"sole_producer\"){\n data.push({gType: \"Sole Producer Graph\", week:d.week, val: -1 * d.weekly_rank})\n }\n else{\n data.push({gType: \"Sole Producer Graph\", week:d.week, val: 0})\n }\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1558,"value":"graph_selector_color = ({\"Sole Producer\":\"#a6e3ff\",\"Absolute value Graph\": \"linear-gradient(#c7b8fc,#a6e3ff)\",\"Delta Graph\": \"linear-gradient(#b2f2a0,#ff9c9d)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2b:"$2a:body"