31:T66a,md`# Exploring Magic the Gathering card performance in Limited This is an exploratory analysis for [Magic the Gathering](https://magic.wizards.com/) (MTG) individual card performance from the latest set: [Adventures in the Forgotten Realms](https://magic.wizards.com/en/articles/archive/card-image-gallery/adventures-in-the-forgotten-realms) (AFR), more specifically in the limited format. The source data is from [17 lands public datasets](https://www.17lands.com/public_datasets) and it was tweaked around in this [colab notebook](https://colab.research.google.com/drive/12NPk9FcjNGu5MG-TkhnACnPTaFOggx0n?usp=sharing) to become more fit for this visualization exercise (final result of the data tweaking is in this [gist](https://gist.github.com/ltostes/9ad08a063a26cc9948082939a9161ec3)). The approach used in this analysis was greatly inspired by the article [Using WR (Win Rate) Data](https://www.17lands.com/blog/using_wr_data) by [Sierkovitz](https://twitter.com/Sierkovitz?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor). Feel free to jump straight to the [Data Playground](https://observablehq.com/@ltostes/exploring-mtg-card-performance-in-limited#data_playground_bullet) session to play around with the data yourself if you'd like! > _Disclaimer: This analysis is meant to serve as a good friend and not as an absolute truth._ In the meantime if you have any ideias you would like to suggest or share: drop me a line in my twitter [@eltostes](https://twitter.com/eltostes). *Many thanks to [@diogueraT](https://twitter.com/diogueraT) who helped a lot with his insightful MTG mind and skills.* Now let's get to it! `32:Tac0,md` One of the major concepts we use when discussing MTG data is Win Rate (or WR, as a short hand). This number represents the percentage of games that were won when compared to the total number of games played. So when we are talking about a specific card's Win Rate, we mean the win rate of games in which this card was either in the deck or played. #### WR serves as a good performance indicator, but... In my view WR is one of the best indicators we have for performance. But when we are looking specifically towards a card's performance, this number might be affected by other factors rather than the pure value of the card itself. For instance, if the card's color is inherently stronger, it might mean that this card has a better chance of winning not because of its own power but because of the other cards that most often come with it in a deck. #### Lift Here we will borrow a concept often used when we talk about [causality](https://matheusfacure.github.io/python-causality-handbook/01-Introduction-To-Causality.html) and AB testing: *Lift*. In an oversimplified explanation, lift is the observed effect when we introduce our interest actor in an environment versus one environment where we don't introduce it. In practical terms our aim here is to have the environment *with* the actor to be as equivalent as possible to the environment *without* the actor we are comparing to. (You will find most commonly the wording *treatment* in replacement of the _actor_ we used here.) #### WR Lift In our case here, to calculate the Lift in terms of WR we want to isolate the performance difference of when we introduce the card in a game vs when it wasn't introduced. The most ideal situation would be to have a match-to-match comparison with the *exact same scenario* (meaning same deck and same opponent - deck and person) with the sole difference of having (vs not having) the card in your deck. Since we are not dealing with experiment-specific data that is not something we are able to have. One option we do have with his data is comparing the difference in WR when the card was made available in the game (you either drew it in the opening hand or later throughout the game) vs when it was in the deck but you didn't actually get a chance to play it (because it just wasn't drawn). The fact that we use the same deck containing the card as a baseline helps us get closer to a cleaner comparison, since the decks that fit this card are more likely to be similar among each other than decks that don't contain this card. With all this in mind, we will base this analysis in this perspective: > **Card WR Lift (Δ%)** = ***playable WR %*** *(when card was drawn)* - ***not playable WR %*** *(when card was in deck but wasn't drawn)* `33:T729,{ const example_data = [ { card: 'Example card name', wr_1: .52, wr_2: .61, plays: 1000, wins: 600 } ]; const tooltip = d => "Details\nYes, we will have details in the tooltip too! Including the card image :)"; const bottom_text = 'In this example, the WinRate lift is positive: +9%, which means the card improved the win rate when available'; const graph = Plot.plot({ marginLeft: 150, height: 120, grid: true, y: { label: null }, x: { label: 'Win rate %', tickFormat: '%', axis: 'top', domain: [.4, .75] }, color: { domain: [1], range: ["#00733e"] }, marks: [ , Plot.dot(example_data, { x: 'wr_1', r: 1, y: 'card', title: tooltip }), Plot.dot(example_data, { x: 'wr_2', r: 3, y: 'card', title: tooltip }), Plot.ruleY(example_data, { x1: 'wr_1', x2: 'wr_2', y: 'card', strokeOpacity: 0.3, title: tooltip }), Plot.text(example_data, { x: 'wr_1', y: 'card', dy: -7, text: d => `WR when in deck` }), Plot.text(example_data, { x: 'wr_1', y: 'card', dy: 14, text: d => `but not drawn` }), Plot.text(example_data, { x: 'wr_2', y: 'card', dy: -12, text: d => 'WR when drawn' }), Plot.text(example_data, { x: 'wr_2', y: 'card', fill: 'olivedrab', textAnchor: 'start', text: d => '+9%', dx: 7, fontWeight: 'bold' }), Plot.text(example_data, { x: 'wr_2', y: 'card', textAnchor: 'start', text: d => '-> and this is the WR Lift', dx: 35 }) ], caption: 'Explanation' }); return addTooltips(graph, {}); }34:T5f1,md` As usual, we see the **#1** most played for both colors being the strong call for any MTG Limited draft: *Removal*. The numbers seem to agree:**+3.9% WR Lift** when available for [Dragon's Fire](https://scryfall.com/card/afr/139/dragons-fire) and an amazing **+5.8%** for [Grim Bounty](https://scryfall.com/card/afr/106/grim-bounty). Relieving to see they're doing well in this perspective too, means their speed and power is likely compatible with the format. More to the bottom of the most played rank, we see two over-performers in both colors: - [Vampire Spawn](https://scryfall.com/card/afr/123/vampire-spawn) delivering a solid WR when made available at **60%** (just behind the black's favourite removal: [Grim Bounty](https://scryfall.com/card/afr/106/grim-bounty)) - [Price of Loyalty](https://scryfall.com/card/afr/159/price-of-loyalty) with an astounding WR Lift of **+4.4%** for red's #10 , boosting its *playable* WR to even higher than the solid [Dragon's Fire](https://scryfall.com/card/afr/139/dragons-fire) removal at **61%**. On the bad news side, we see red's #9 [Armory Veteran](https://scryfall.com/card/afr/130/armory-veteran) pushing the WR down **-2.5%** when available, a strong sign of over-ratedness. One thing that does come to mind is that it is not greatly synergetic with the so-called strongest archetype (in BR), as it fits better the WR equips archetype - which has considerably lower WR in general. Perhaps this number means we shouldn't use it as much in the BR archetype. `35:T88b,md` The first thing we can note is that although the ${mtg_symbols.get( 'white' )} **White** cards are more played than ${mtg_symbols.get( 'green' )} **Green** cards, they don't have the highest total card WR among the 2 (the vertical stripe illustrates the group's total card WR). *I won't mention ${mtg_symbols.get( 'blue' )} Blue's total card WR because it's not all that exciting*. Looking at each color's **WR Lift**, I get the feeling that the 17 Lands Arena players already kind of figured out the ${mtg_symbols.get( 'green' )} **Green** commons. The top most played 10 seem to be quite well performing and in a neat *WR & WR Lift* order. The only one that we could reflect a bit more about is #10 [Sylvan Shepherd](https://scryfall.com/card/afr/206/sylvan-shepherd) which is the only card with playable WR to the left of the color's average WR. Its WR Lift also shows it doesn't contribute a whole lot to its deck's gameplay. *Perhaps the attacking condition is not so favourable in its synergetic WG archetype?* White and Blue on the other hand have interesting behaviours. Their most played removals (${mtg_symbols.get( 'white' )} [Minimus Containment](https://scryfall.com/card/afr/24/minimus-containment) and ${mtg_symbols.get( 'blue' )} [Charmed Sleep](https://scryfall.com/card/afr/50/charmed-sleep)) don't seem to affect the gameplay as much as the other color's removals. My take would be the fact that they are enchantments so the flexible cards that allow to destroy an enchantment as an extra option (such as [Dawnbringer Cleric](https://scryfall.com/card/afr/9/dawnbringer-cleric), white's #9 in this list) might facilitate card disadvantage. It is interesting to see that both these colors have clear over-performers: ${mtg_symbols.get( 'blue' )}[Air-cult Elemental](https://scryfall.com/card/afr/45/air-cult-elemental) and ${mtg_symbols.get( 'white' )}[Veteran Dungeoneer](https://scryfall.com/card/afr/40/veteran-dungeoneer). They both deliver around **+5% WR Lift** which is an impressive figure given their position on the list. *I confess I haven't played all that much with them yet, so maybe you have some ideas of why that would be so?* `36:T42c,md`## #2: The Overrated and Underrated niches I recently came across an amazing [article](https://mtgazone.com/the-most-overrated-and-underrated-cards-in-forgotten-realms-draft/) (*by MTG Pro Player [Chris Kvartek](https://mtgazone.com/author/chris-kvartek/)*) in which he highlighted some *Overrated* and *Underrated* cards and themes in this set. I personally enjoy reading approaches using the well-known *Quadrant Theory*, (greatly revisited in [this article](https://strategy.channelfireball.com/all-strategy/mtg/quadrant-theory-revisited/) by [Pawel Sierocinski](https://strategy.channelfireball.com/all-strategy/category/mtg/channelmagic-articles/pawel-sierocinski/)). I was also amazed by the timing of its release since it was at the very same moment I was playing around with the data available in this notebook. After reading it I figured this is an amazing opportunity to use his findings to review the visualization method we're proposing here. So let's have a look at two different themes he pointed out in the article: **Equipment** and **Lands**. `37:T4b1,md` It doesn't take much to visualize that most of the equipment in this set is indeed **under-performing** (and quite a bit I'd say). The playable WR is in general below the total card's colors WR and most of them have a **negative WR Lift** causing the WR to drop much more often than to increase. The special mentions in the article do point out correctly that ${mtg_symbols.get( 'white' )}[Plate Armor](https://scryfall.com/card/afr/32/plate-armor) is a keeper (**+2.3% WR Lift**), but the data doesn't agree as much that ${mtg_symbols.get( 'red' )}[Goblin Morningstar](https://scryfall.com/card/afr/145/goblin-morningstar) can be considered a premium contributor. Although it is the best in its color and doesn't have a WR Lift as negative as the other ones: **-0.2%**. The ones that we see most difference than what was pointed out are the [+2 Mace](https://scryfall.com/card/afr/1/+2-mace) that under-delivers a lot at **-5.4% WR Lift**, and ${mtg_symbols.get( 'black' )} Black's premium [Reaper's Talisman](https://scryfall.com/card/afr/117/reapers-talisman) that shakes the game positively, incrementing WR at **+2.4%** reaching the highest WR when playable amongst all equipments. `38:T573,md` The creature lands, on the other hand, are clear **over-performers**. As you can see in the graph, all of them deliver a **positive WR Lift**. Great highlight to ${mtg_symbols.get( 'blue' )}[Hall of Storm Giants](https://scryfall.com/card/afr/257/hall-of-storm-giants) that punches its decks win rate in **+6.4%** and both ${mtg_symbols.get( 'red' )}[Den of the Bugbear](https://scryfall.com/card/afr/254/den-of-the-bugbear) & ${mtg_symbols.get( 'black' )}[Hive of the Eye Tyrant](https://scryfall.com/card/afr/258/hive-of-the-eye-tyrant) that even in a high WR environment (BR) manage to boost the WR when available by around **+3%**. ${mtg_symbols.get( 'green' )} [Lair of the Hydra](https://scryfall.com/card/afr/259/lair-of-the-hydra) doesn't fall behind, contributing with **+3.8%**. The least performing of them is ${mtg_symbols.get( 'white' )}[Cave of the Frost Dragon](https://scryfall.com/card/afr/253/cave-of-the-frost-dragon) but it still contributes to WR in **+1.6%** when available. As a base comparison for better picking, below there is a graph that includes rare cards from each color that have similar play amounts with its respective creature land. Of course there are similar rares that beat the creature lands in terms of WR and WR Lift, but I hand-picked these below as an example of picks where the data suggests they aren't as good as the creature lands. `39:T5eb,{ if (selected_rarities.length == 0) { return html`

Oh no! You kind of unselected all the data :(

`; } const dim_filters = [ d => (['Land'].includes(d.type_detail) & ['rare'].includes(d.rarity)) | [ 'Delina, Wild Mage', //https://scryfall.com/card/afr/138/delina-wild-mage 'Vorpal Sword', //https://scryfall.com/card/afr/124/vorpal-sword //'Forsworn Paladin', //https://scryfall.com/card/afr/104/forsworn-paladin //"Demogorgon's Clutches", //https://scryfall.com/card/afr/184/froghemoth "Froghemoth", //https://scryfall.com/card/afr/184/froghemoth "Blink Dog", //https://scryfall.com/card/afr/3/blink-dog "Dragon Turtle" //https://scryfall.com/card/afr/56/dragon-turtle ].includes(d.card) //d => ['rare'].includes(d.rarity) ]; const grouping_column = 'color'; const graph_data = graph_data_fun( [], // Base filters dim_filters, // Dimension Filters null, // Grouping column [], // Rank filters ['plays'], // Card sorting column 'plays' // Group sorting column ); // Data preparated outside const card_data = graph_data['cards_data']; //df_card_infos_with_rank.objects(); const group_data = graph_data['groups_data']; //df_color_wrs_with_graph_cards.objects(); const sorted_card_data = d3.permute(card_data, [ 1, 0, 2, 4, 3, 5, 6, 7, 8, 9 ]); const ret = base_graph_fun(sorted_card_data, group_data, 0); return ret; }3a:T4a7,new_data_playground_graph = { if ( (ft_colors.length == 0) | (ft_rarity.length == 0) | (ft_rank.length == 0) | (ft_type.length == 0) | (ft_removal.length == 0) ) { return html`

Oh no! You kind of unselected all the data :(

`; } const base_filters = [d => ft_rank.includes(d.rank_title)]; const dim_filters = [ d => ft_colors.includes(d.color), d => ft_rarity.includes(d.rarity), d => ft_type.includes(d.type), d => ft_removal.includes(d.removal), d => ft_min_plays <= d.plays, d => ft_cmc.includes(d.cmc) ]; const grouping_column = ft_groupby; const graph_data = graph_data_fun( base_filters, // Base filters dim_filters, // Dimension Filters grouping_column, // Grouping column [d => d.rank <= ft_max_rank], // Rank filters [ft_sortby], // Card sorting column 'plays', // Group sorting column ft_sortby_asc // Sorting order ); // Data preparated outside const card_data = graph_data['cards_data']; //df_card_infos_with_rank.objects(); const group_data = graph_data['groups_data']; //df_color_wrs_with_graph_cards.objects(); return base_graph_fun(card_data, group_data); }3b:T435,new_data_playground_data = { if ( (ft_colors.length == 0) | (ft_rarity.length == 0) | (ft_rank.length == 0) | (ft_type.length == 0) | (ft_removal.length == 0) ) { return html`

Oh no! You kind of unselected all the data :(

Cards

${aq.from(graph_data['cards_data']).view()}

Groups

${aq.from(graph_data['groups_data']).view()}`; }3c:T8e1,md`# What's next & Resources What an amazing journey it is to learn data visualization tools while using data from an environment I'm extremely passionate about: **Games**. MTG is one of the few games I play at an irresponsible level, and it was a breeze to work on finding ways to visualize and gather insight using its data. I'm happy to say this is also a tool suitable for recurrence, so you can wait the very same analysis available for any future sets (or datasets). My next step is to turn this post into a series of MTG and/or Gaming data viz articles. I do have some candidates in mind: 1. MTG Performance for combinations of cards instead of single cards, using genetic algorithms to find the most interesting combinations. 2. Overview of WR and disputes between combinations of colors (BG vs WUB, and so on). 3. Deep dive into in-game data for situational-insight: should you try to speed up a game, or try to make the most value out of each card in a given scenario? (Quadrant Theory based) And of course, I'd be glad to hear feedback and ideas for new topics! Special thanks to all these resources that were deeply insightful for the making of this article: - 17 Lands AFR Data from [Public Datasets](https://www.17lands.com/public_datasets) - [Using WR (Win Rate) Data](https://www.17lands.com/blog/using_wr_data) by [Sierkovitz](https://twitter.com/Sierkovitz?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) - [Quadrant Theory Revisited](https://strategy.channelfireball.com/all-strategy/mtg/quadrant-theory-revisited/) by [Pawel Sierocinski](https://strategy.channelfireball.com/all-strategy/author/pawel-sierocinski/) - [The Most Overrated and Underrated Cards in Forgotten Realms Draft](https://mtgazone.com/the-most-overrated-and-underrated-cards-in-forgotten-realms-draft/) by [Chris Kvartek](https://mtgazone.com/author/chris-kvartek/) - Lots and Lots of [Observable](https://observablehq.com/) examples and tutorials - [/plot-tooltip](https://observablehq.com/@mkfreeman/plot-tooltip#addTooltips) (which I used greatly) from [@mkfreeman](https://observablehq.com/@mkfreeman) - [Causal Inference for The Brave and True](https://matheusfacure.github.io/python-causality-handbook) by [Matheus Facure](https://matheusfacure.github.io) `3d:T8b2,mtg_symbols = new Map([ [ 'colorless', html`

` ], [ 'white', html`

` ], [ 'green', html`

` ], [ 'red', html`

` ], [ 'blue', html`

` ], [ 'black', html`

` ], [ 'multicolor', html`

` ] ])3e:Tf20,base_graph_fun = function( card_data, group_data, label_thresold = text_thresold, in_graph_caption = graph_caption ) { let ydomain = card_data.map(d => d.card); if (group_data.length > 0) { ydomain = aq .from(group_data) .unroll('cards') .select('cards') .objects() .map(d => d.cards); } const xdomain = [ d3.min(card_data, d => d3.min([d.playable_wr - .03, d.not_playable_wr - .03, .4]) ), .65 ]; const graph = Plot.plot({ marginLeft: 150, //marginTop: 75, height: 100 + 15 * card_data.length, grid: true, color: { domain: colordomain, range: colorpallet }, y: { domain: ydomain, label: null }, x: { label: 'Win rate %', tickFormat: '%', axis: 'top', domain: xdomain }, marks: [ // First the average WR of each color Plot.ruleX(group_data, { height: 100, x: 'total_wr', y1: d => d.cards[0], y2: d => d.cards[d.cards.length - 1], strokeOpacity: 0.25, strokeWidth: 8, stroke: d => d[d.grouping], title: group_tooltip_fun }), Plot.dot(group_data, { // For groups that only have one card x: 'total_wr', y: d => d.cards[0], r: 3, fillOpacity: 0.25, fill: d => d[d.grouping], title: group_tooltip_fun, filter: d => d.cards.length == 1 }), Plot.text(group_data, { x: 'total_wr', y: d => d.cards[d.cards.length - 1], text: d => label_dict.has(d[d.grouping]) ? label_dict.get(d[d.grouping]) : d[d.grouping], dy: 11, fill: d => d[d.grouping] }), // Now the WR and WR Lift for each color Plot.dot(card_data, { x: 'playable_wr', y: 'card', r: 3, stroke: 'color', title: card_tooltip_fun }), Plot.dot(card_data, { x: 'not_playable_wr', y: 'card', r: 2, fill: 'color', title: card_tooltip_fun }), Plot.ruleY(card_data, { x1: 'playable_wr', x2: 'not_playable_wr', y: 'card', strokeOpacity: 0.3, title: card_tooltip_fun }), // The lift text pointer Plot.text(card_data.filter(d => d.wr_lift > label_thresold / 100), { x: 'playable_wr', dx: 7, fontWeight: 'bold', text: d => d3.format('+.1%')(d.wr_lift), fill: 'olivedrab', textAnchor: 'start', y: 'card', title: card_tooltip_fun }), Plot.text(card_data.filter(d => d.wr_lift < -label_thresold / 100), { x: 'playable_wr', dx: -7, fontWeight: 'bold', text: d => d3.format('+.1%')(d.wr_lift), fill: 'lightcoral', textAnchor: 'end', y: 'card', title: card_tooltip_fun }), Plot.dot(card_data, { x: 'not_playable_wr', y: 'card', r: 7, opacity: 0, strokeOpacity: 0, fillOpacity: 0, title: card_tooltip_fun }), Plot.dot(card_data, { x: 'playable_wr', y: 'card', r: 7, opacity: 0, strokeOpacity: 0, fillOpacity: 0, title: card_tooltip_fun }) // This part is a background square for the tooltip // Plot.barX(card_data, { // x1: d => // d.wr_lift < 0.0 ? d.playable_wr - 0.01 : d.not_playable_wr - 0.0, // x2: d => // d.wr_lift > 0.0 ? d.playable_wr + 0.01 : d.not_playable_wr + 0.0, // y: 'card', // //r: 10, // opacity: 0, // strokeOpacity: 0, // fillOpacity: 0, // title: card_tooltip_fun // }) ], caption: in_graph_caption }); return addTooltipsv2(graph, {}); }3f:Td7f,graph_data_fun = { const fun = function( pre_card_filters = [], dimension_filters = [], grouping_column = 'card', rank_filters = [], card_sorting_columns = ['plays'], group_sorting_column = 'plays', sort_direction = true ) { let pre_card_data = base_data; // First step is to filter the base data by the pre-card filters pre_card_filters.forEach(function(pre_card_filter_fun) { pre_card_data = pre_card_data.filter(pre_card_filter_fun); }); // Now grouping into cards and measuring performance const cards_data_with_performance = agg_performance_metrics_fun( pre_card_data, 'card' ); // Adding card details dimensions after calculating performance const cards_data_with_performance_and_details = cards_data_with_performance.map( v => ({ ...v, ...card_details_map.get(v.card)[0] }) ); let pre_grouping_data = cards_data_with_performance_and_details; // Filtering the card data by the dimension filters dimension_filters.forEach(function(dim_filter_fun) { pre_grouping_data = pre_grouping_data.filter(dim_filter_fun); }); // ## Grouping // First calculating rank let pre_group_with_rank_df = aq.from(pre_grouping_data); console.log(pre_group_with_rank_df.objects()); if (grouping_column) { pre_group_with_rank_df = pre_group_with_rank_df .groupby(grouping_column) .orderby([ grouping_column, ...card_sorting_columns.map(d => (sort_direction ? aq.desc(d) : d)) ]) .derive({ rank: op.rank() //, perc_plays: d => d.plays / op.sum('plays') }) .ungroup() .params({ grouping_column: grouping_column }) .derive({ grouping: d => grouping_column }) .objects(); } else { pre_group_with_rank_df = pre_group_with_rank_df .orderby([ ...card_sorting_columns.map(d => (sort_direction ? aq.desc(d) : d)) ]) .derive({ rank: op.rank() }) .ungroup() .derive({ grouping: d => null }) .objects(); } // Cards df and filtering by rank_filters let cards_with_rank = pre_group_with_rank_df; rank_filters.forEach(function(rank_filter_fun) { cards_with_rank = cards_with_rank.filter(rank_filter_fun); }); // Returning without group performance if no grouping if (!grouping_column) { return { cards_data: cards_with_rank, groups_data: [] }; } // Now calculating group performance const pre_card_data_with_details = pre_card_data.map(v => ({ ...v, ...card_details_map.get(v.card)[0] })); const groups_performance_df = aq.from( agg_performance_metrics_fun(pre_card_data_with_details, grouping_column) ); // Now collecting the cards in each group and adding to groups infos df const groups_info_df = aq .from(cards_with_rank) .groupby(grouping_column) .rollup({ cards: op.array_agg_distinct('card') // perc_plays: d => d.plays / op.sum('plays') }) .ungroup() .join(groups_performance_df) .orderby(aq.desc(group_sorting_column)) .params({ grouping_column: grouping_column }) .derive({ grouping: d => grouping_column }); return { cards_data: cards_with_rank, groups_data: groups_info_df.objects() }; }; return fun; }40:Tb00,addTooltipsv2 = (chart, hover_styles = { fill: "blue", opacity: 0.5 }) => { // Add the hover g // Workaround if it's in a figure const type = d3.select(chart).node().tagName; const wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); wrapper.style("overflow", "visible"); // to avoid clipping at the edges wrapper.selectAll("path").style("pointer-events", "visibleStroke"); // only trigger hover for lines in visible area const tip = wrapper .selectAll(".hover-tip") .data([""]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "middle"); // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart) .classed(id, true) // using a class selector so that it doesn't overwrite the ID .selectAll("title") .each(function() { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text().split(';')[0]; const img = title.text().split(';')[1]; if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("mousemove", function(event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n"), img); else tip.selectAll("*").remove(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width / 2}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width / 2 > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width / 2}, ${pointer[1] + 7})` ); }) .on("mouseout", event => { tip.selectAll("*").remove(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => tip.selectAll("*").remove()); // Add styles const style_string = Object.keys(hover_styles) .map(d => { return `${d}:${hover_styles[d]};`; }) .join(""); // Define the styles const style = html``; chart.appendChild(style); return chart; }41:T556,// Function to position the tooltip hover = (tip, pos, text, img) => { const side_padding = 10; const vertical_padding = 5; const vertical_offset = 25; const image_x_offset = 15; const image_y_offset = 15; // Empty it out tip.selectAll("*").remove(); // Append the text tip .style("text-anchor", "middle") .style("pointer-events", "none") .attr("transform", `translate(${pos[0]}, ${pos[1] + 7})`) .selectAll("text") .data(text) .join("text") .style("dominant-baseline", "ideographic") .text(d => d) .attr("y", (d, i) => (i - (text.length - 1)) * 15 - vertical_offset) .style("font-weight", (d, i) => (i === 0 ? "bold" : "normal")); const bbox = tip.node().getBBox(); // Append the image tip .append("svg:image") .attr('x', bbox.width / 2 + image_x_offset) .attr("y", d => -img_parameters.height - image_y_offset) .attr('width', img_parameters.width) .attr('height', img_parameters.height) .attr('text-align', 'center') .attr("xlink:href", img); // Add a rectangle (as background) tip .append("rect") .attr("y", bbox.y - vertical_padding) .attr("x", bbox.x - side_padding) .attr("width", bbox.width + side_padding * 2) .attr("height", bbox.height + vertical_padding * 2) .style("fill", "white") .style("stroke", "#d3d3d3") .lower(); }42:[] 2f:{"title":"Exploring Magic the Gathering card performance in Limited","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3308,"value":"md`## Win Rate and 'Lift'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3317,"value":"{\n if (selected_rarities.length == 0) {\n return html`

Oh no! You kind of unselected all the data :(

`;\n }\n\n const dim_filters = [d => d.color === 'multicolor'];\n\n const grouping_column = 'color';\n\n const graph_data = graph_data_fun(\n [], // Base filters\n dim_filters, // Dimension Filters\n 'color', // Grouping column\n [], // Rank filters\n ['plays'], // Card sorting column\n 'plays' // Group sorting column\n );\n\n // Data preparated outside\n const card_data = graph_data['cards_data']; //df_card_infos_with_rank.objects();\n const group_data = graph_data['groups_data']; //df_color_wrs_with_graph_cards.objects();\n\n const ret = base_graph_fun(\n card_data,\n group_data,\n 2,\n 'Spoiler alert!! How is the multi-colors impact in this set?'\n );\n\n return md`${ret}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"md`\n#### Visualizing WR Lift\nThis is not a simple concept to grasp so we'll use a new approach to represent it visually. The larger circle is the Win Rate of the card when it was drawn and the smaller one is when it was in the deck but it was not drawn. The connecting line represents the WR Lift, which tells us how much the card actually impacted (positively or negatively) the deck when it was made available. Here below you can see an example to better translate the concept to visual.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3617,"value":"md`\n### *Terminology note*\nFor those familiar with the [17 Lands Card Performance Metrics Definition](https://www.17lands.com/metrics_definitions), it is important to note that they're different than the terminology used here. So to make sure there's minimal confusion, here are their terms respectives:\n- **WR Lift** = Improvement When Drawn (IWD)\n- **Playable WR** = Games in Hand Win Rate (GIH WR)*\n- **Not Playable WR** = Games Not Drawn Win Rate (GND WR)\n\n\\** In this analysis we do not weight the amount of cards that showed up in a single game. So regardless of the number of cards drawn, the game is considered only once in the metric *\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`# So let's dive into the data!\n There's a lot to discover with this perspective, but although being a big fan I'm not a pro MTG player so here I will do my best to illustrate some interesting findings as we go along.\n\n## #1: Most played commons (or per rarity)\nAs a limited player, the first thing that comes to my mind is having a look at how the top most played commons perform. \n\nIn MTG common rarity cards are usually not the strongest, but in Limited they are extremely important since they are the ones that show up most often when you're drafting and they will most likely be the numerous chunk of your deck.\n\nLet's have a look at an overview WR lift perspective for the top 10 most played commons in each color.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"value":"viewof selected_rarities = Inputs.checkbox(\n new Map([\n [\"Mythic\", \"mythic\"],\n [\"Rare\", \"rare\"],\n [\"Uncommon\", \"uncommon\"],\n [\"Common\", \"common\"]\n ]),\n {\n label: \"Rarity\",\n value: [\"common\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3029,"value":"viewof commons_sortby = Inputs.radio(\n new Map([\n [\"Number of plays\", 'plays'],\n [\"Total WR\", 'total_wr'],\n [\"WR Lift\", 'wr_lift']\n ]),\n {\n label: \"Sort by\",\n value: 'plays'\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2895,"value":"viewof max_rank = Inputs.range([1, 50], {\n value: 10,\n step: 1,\n label: html`Top n`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"commons_review = {\n if (selected_rarities.length == 0) {\n return html`

Oh no! You kind of unselected all the data :(

`;\n }\n\n const graph_data = graph_data_fun(\n [], // Base filters\n [d => selected_rarities.includes(d.rarity)], // Dimension Filters\n 'color', // Grouping column\n [d => d.rank <= max_rank], // Rank filters\n [commons_sortby], // Card sorting column\n commons_sortby // Group sorting column\n );\n\n return base_graph_fun(graph_data['cards_data'], graph_data['groups_data']);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1776,"value":"md`\n*Ouch! Colorless which I love are really suffering in this set... Oh well...*\n\nBut... I do see some interesting things to note... Let's have a look\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"{\n if (selected_rarities.length == 0) {\n return html`

Oh no! You kind of unselected all the data :(

`;\n }\n\n const dim_filters = [\n d => ['R', 'B'].includes(d.color),\n d => ['common'].includes(d.rarity)\n ];\n\n const grouping_column = 'color';\n\n const graph_data = graph_data_fun(\n [], // Base filters\n dim_filters, // Dimension Filters\n grouping_column, // Grouping column\n [d => d.rank <= 10], // Rank filters\n [commons_sortby], // Card sorting column\n commons_sortby // Group sorting column\n );\n\n // Data preparated outside\n const card_data = graph_data['cards_data']; //df_card_infos_with_rank.objects();\n const group_data = graph_data['groups_data']; //df_color_wrs_with_graph_cards.objects();\n\n const ret = base_graph_fun(card_data, group_data);\n\n return md`### ${mtg_symbols.get(\n 'red'\n )} Red and his dear friend ${mtg_symbols.get('black')} Black${ret}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1801,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3009,"value":"{\n if (selected_rarities.length == 0) {\n return html`

Oh no! You kind of unselected all the data :(

`;\n }\n\n const dim_filters = [\n d => ['W', 'U', 'G'].includes(d.color),\n d => ['common'].includes(d.rarity)\n ];\n\n const grouping_column = 'color';\n\n const graph_data = graph_data_fun(\n [], // Base filters\n dim_filters, // Dimension Filters\n grouping_column, // Grouping column\n [d => d.rank <= 10], // Rank filters\n [commons_sortby], // Card sorting column\n commons_sortby // Group sorting column\n );\n\n // Data preparated outside\n const card_data = graph_data['cards_data']; //df_card_infos_with_rank.objects();\n const group_data = graph_data['groups_data']; //df_color_wrs_with_graph_cards.objects();\n\n const ret = base_graph_fun(card_data, group_data);\n\n return md` ### The Runner-ups: ${mtg_symbols.get(\n 'white'\n )} White, ${mtg_symbols.get('green')} Green and ${mtg_symbols.get(\n 'blue'\n )} Blue ${ret}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3023,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3091,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1846,"value":"{\n if (selected_rarities.length == 0) {\n return html`

Oh no! You kind of unselected all the data :(

`;\n }\n\n const dim_filters = [d => d.type_detail === 'Artifact — Equipment'];\n\n const grouping_column = 'color';\n\n const graph_data = graph_data_fun(\n [], // Base filters\n dim_filters, // Dimension Filters\n 'color', // Grouping column\n [], // Rank filters\n ['plays'], // Card sorting column\n 'plays' // Group sorting column\n );\n\n // Data preparated outside\n const card_data = graph_data['cards_data']; //df_card_infos_with_rank.objects();\n const group_data = graph_data['groups_data']; //df_color_wrs_with_graph_cards.objects();\n\n const ret = base_graph_fun(card_data, group_data, 2);\n\n return md` ### Equipment: Overrated? ${ret}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3124,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3126,"value":"{\n if (selected_rarities.length == 0) {\n return html`

Oh no! You kind of unselected all the data :(

`;\n }\n\n const dim_filters = [\n d =>\n ['Land'].includes(d.type_detail) &\n ![\n 'Dungeon Descent',\n 'Evolving Wilds',\n 'Temple of the Dragon Queen'\n ].includes(d.card)\n ];\n\n const grouping_column = 'color';\n\n const graph_data = graph_data_fun(\n [], // Base filters\n dim_filters, // Dimension Filters\n 'type', // Grouping column\n [], // Rank filters\n ['plays'], // Card sorting column\n 'plays' // Group sorting column\n );\n\n // Data preparated outside\n const card_data = graph_data['cards_data']; //df_card_infos_with_rank.objects();\n const group_data = graph_data['groups_data']; //df_color_wrs_with_graph_cards.objects();\n\n const ret = base_graph_fun(card_data, group_data, 0);\n\n return md` ### Creature Lands: Underrated? ${ret}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3180,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3225,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3247,"value":"md`\n*With all these observations and visualizations, I hope you are now inspired to have your **own** look at the data we made available here. Let's get to it!*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"data_playground_bullet = md`## #3: Data Playground\n\nThis area is exactly for you, *MTG Player* and/or *Data Viz enthusiast*, to play around with the data. We have some filters made available below so use them at will and reach your own conclusions!\n\n*Don't forget to share it, and keep me posted with your insights [@eltostes](https://twitter.com/eltostes)! :)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2783,"value":"md`### Data filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"viewof ft_rank = Inputs.checkbox([\"Mythic\"\n , \"Diamond\"\n ,\"Platinum\"\n , \"Gold\"\n , \"Silver\"\n ,\"Bronze\"\n ], {\n label: \"Player Ranks\"\n ,value: [\"Mythic\",\"Platinum\",\"Diamond\",\"Platinum\",\"Gold\",\"Silver\",\"Bronze\"]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"viewof ft_min_plays = Inputs.range([0, 10000], {\n step: 20,\n label: \"Minimum plays\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2787,"value":"md`### Card filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof ft_colors = Inputs.checkbox(\n new Map([\n [\"White\", \"W\"],\n [\"Blue\", \"U\"],\n [\"Green\", \"G\"],\n [\"Black\", \"B\"],\n [\"Red\", \"R\"],\n [\"Colorless\", \"colorless\"],\n [\"Multi-color\", \"multicolor\"]\n ]),\n {\n label: \"Colors\",\n value: [\"W\", \"U\", \"G\", \"B\", \"R\", \"colorless\", \"multicolor\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"viewof ft_rarity = Inputs.checkbox(new Map([[\"Mythic\",\"mythic\"]\n ,[\"Rare\",\"rare\"]\n ,[\"Uncommon\",\"uncommon\"]\n ,[\"Common\",\"common\"]\n ]), {\n label: \"Rarity\"\n ,value: [\"mythic\",\"rare\",\"uncommon\",\"common\"]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"viewof ft_type = Inputs.checkbox(\n [\n \"Artifact\",\n \"Creature\",\n \"Enchantment\",\n \"Instant/Sorcery\",\n \"Land\",\n \"Planeswalker\"\n ],\n {\n label: \"Card Type\",\n value: [\n \"Artifact\",\n \"Creature\",\n \"Enchantment\",\n \"Instant/Sorcery\",\n \"Land\",\n \"Planeswalker\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2854,"value":"viewof ft_cmc = Inputs.checkbox([\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7+\"], {\n label: \"CMC\",\n value: [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7+\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"viewof ft_removal = Inputs.checkbox(\n new Map([[\"Removals\", true], [\"Non removals\", false]]),\n {\n label: \"Removal\",\n value: [true, false]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2793,"value":"md`### View parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2737,"value":"viewof ft_groupby = Inputs.radio(\n new Map([\n [\"Color\", 'color'],\n [\"Rarity\", 'rarity'],\n [\"Type\", 'type'],\n [\"CMC\", 'cmc'],\n [\"None\", null]\n ]),\n {\n label: \"Group by\",\n value: 'color'\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"viewof ft_sortby = Inputs.radio(\n new Map([\n [\"Total WR\", 'total_wr'],\n [\"Number of plays\", 'plays'],\n [\"WR Lift\", 'wr_lift']\n ]),\n {\n label: \"Sort by\",\n value: 'wr_lift'\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2807,"value":"viewof ft_sortby_asc = Inputs.radio(\n new Map([[\"Descending\", true], [\"Ascending\", false]]),\n {\n label: 'Order',\n value: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2771,"value":"viewof ft_max_rank = Inputs.range([1, 300], {\n value: 20,\n step: 1,\n label: html`Top n cards of each group`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2796,"value":"md`### Playground: the graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2672,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2962,"value":"md`### Playground data tables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2911,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":2860,"value":"md`# Technical backend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"md`## Auxiliary functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"colordomain = [\n 'W',\n 'U',\n 'G',\n 'B',\n 'R',\n 'colorless',\n 'multicolor',\n 'mythic',\n 'rare',\n 'uncommon',\n 'common',\n // Now for the colorless categories I will reproduce it here\n ...Array.from(d3.group(card_details_map.values(), d => d[0].cmc).keys()),\n ...Array.from(d3.group(card_details_map.values(), d => d[0].type).keys())\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"colorpallet = [\n //'#f8e7b9',\n '#cfc19d', // Colors\n '#0e67ab',\n '#00733e',\n '#363433',\n '#d3202a',\n '#b8afad',\n '#bfa249',\n '#ff5100',\n '#ffd900', // Rarities\n '#76aeb5',\n '#000000',\n // Now for the colorless categories I will reproduce it here\n ...Array.from(d3.group(card_details_map.values(), d => d[0].cmc).keys()).map(\n d => '#b8afad'\n ),\n ...Array.from(d3.group(card_details_map.values(), d => d[0].type).keys()).map(\n d => '#b8afad'\n )\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1527,"value":"label_dict = new Map([\n ['G', 'Green'],\n ['U', 'Blue'],\n ['B', 'Black'],\n ['R', 'Red'],\n ['W', 'White'],\n ['colorless', 'Colorless'],\n ['multicolor', 'Multi-color'],\n ['0', 'Lands'],\n ['1', 'CMC 1'],\n ['2', 'CMC 2'],\n ['3', 'CMC 3'],\n ['4', 'CMC 4'],\n ['5', 'CMC 5'],\n ['6', 'CMC 6'],\n ['7+', 'CMC 7+'],\n ['mythic', 'Mythic'],\n ['rare', 'Rare'],\n ['uncommon', 'Uncommon'],\n ['common', 'Common']\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"accum_wr = g => d3.sum(g, d => d.wins) / d3.sum(g, d => d.plays);","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"accum_wr_x1 = g => d3.sum(g.filter(d => d.status_2 === 'Playable'), d => d.wins) / \n d3.sum(g.filter(d => d.status_2 === 'Playable'), d => d.plays)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"playable_plays = g =>\n d3.sum(g.filter(d => d.status_2 === 'Playable'), d => d.plays)","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"not_playable_plays = g =>\n d3.sum(g.filter(d => d.status_2 === 'Not Playable'), d => d.plays)","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"accum_wr_x2 = g => d3.sum(g.filter(d => d.status_2 === 'Not Playable'), d => d.wins) / \n d3.sum(g.filter(d => d.status_2 === 'Not Playable'), d => d.plays)","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"neg_accum_wr = g => - accum_wr(g)","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"graph_caption = 'Source: 17 Lands - AFR Premier Draft public dataset. Play dates ranging from 2021-07-08 to 2021-07-25'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1741,"value":"viewof text_thresold = Inputs.range([0, 10], {\n value: 2.5,\n step: 0.1,\n label: 'Label threshold(%)'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"mutable commons_review_data = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2620,"value":"// Function for the tooltip in graph from section #1\ncard_tooltip_fun = function(d) {\n return `${\n label_dict.has(d[d.grouping]) ? label_dict.get(d[d.grouping]) : ''\n } #${d.rank}: ${d.card}\\n${d.plays} total plays\\n${d3.format(\".1%\")(\n d.total_wr\n )} total WR\\n${d3.format(\".1%\")(d.playable_wr)} playable WR\\n${d3.format(\n \".1%\"\n )(d.not_playable_wr)} not playable WR\\n${d3.format(\"+.2%\")(\n d.wr_lift\n )} WR Lift ; ${d.medium_img}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2622,"value":"// Function for the tooltip in graph from section #1\ngroup_tooltip_fun = function(d) {\n const title = label_dict.has(d[d.grouping])\n ? label_dict.get(d[d.grouping])\n : d[d.grouping];\n\n return `${title}\\n${d.plays} total plays\\n${d3.format(\".1%\")(\n d.total_wr\n )} total WR\\n${d3.format(\".1%\")(d.playable_wr)} playable WR\\n${d3.format(\n \".1%\"\n )(d.not_playable_wr)} not playable WR\\n${d3.format(\"+.2%\")(\n d.wr_lift\n )} WR Lift`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2674,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"md`### Notebook Flow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2137,"value":"dot`digraph { node [fontname=\"var(--sans-serif)\" fontsize=12];\n edge [fontname=\"var(--sans-serif)\" fontsize=12];\n\n \n subgraph cluster_0 {\n color=lightgrey; \n \"Card Base\" -> \"Pre-grouping\" [label = \"Dimensions filters\"];\n \"Pre-grouping\" -> \"Base with Rank\";\n \"Pre-grouping\" -> \"Groups Performance\" [label = \"Grouped by\"];\n\n \"Base with Rank\" -> \"Final graph data\" [label = \"Rank filter\"];\n label = \"Inside graph data function\";\n } \n\n \"Performance\" -> \"Total Base\" ; \n \"Card details\" -> \"Total Base\"; \n \"Total Base\" -> \"Card Base\" [label = \"+Calculated dimensions -Precard Filters\"]; \n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"md`### Performance data\nCollected from this [gist](https://gist.githubusercontent.com/ltostes/9ad08a063a26cc9948082939a9161ec3/raw/c8107cd5e7deedd681e619c16a82702d9a199b8c/202107_17Lands_AFR_PremierData_CardWRSummaries_DetailDimensions_withImage.csv) and pre-processed in this [Colab notebook](https://colab.research.google.com/drive/12NPk9FcjNGu5MG-TkhnACnPTaFOggx0n)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"performance_data = d3.dsv(\";\",\"https://gist.githubusercontent.com/ltostes/9ad08a063a26cc9948082939a9161ec3/raw/c8107cd5e7deedd681e619c16a82702d9a199b8c/202107_17Lands_AFR_PremierData_CardWRSummaries_DetailDimensions_withImage.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"md`### Card Details\n\nI included new dimensions to cards in this [sheet](https://docs.google.com/spreadsheets/d/1Wwz5oNh4zF-0-wEzmt7Aj_UuWzWCTh_WEXurZTbmtOg/edit?usp=sharing). Feel free to have a look into it and suggest new dimensions for analysis here :)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"card_details_source = d3.csv(\n 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQUcMWqXuhIblIGuRYF50xnBbgu9-SWBqv08v8wAiP9j1dbM77BckSIak85YcX2S6C0r-5a8VA0FPIB/pub?gid=0&single=true&output=csv',\n d => ({\n card: d.name,\n color: d.color,\n cmc: d.cmc > 6 ? '7+' : d.cmc,\n type: d.simple_type_2,\n type_detail: d.type_line,\n removal_detail: d.removal,\n removal: [\n 'Diminish',\n 'Damage',\n 'Lasting Tap',\n 'Exile',\n 'Destroy',\n 'Punch',\n 'Invalidate',\n 'Gain Control'\n ].includes(d.removal),\n rarity: d.rarity,\n legendary: d.legendary,\n small_img: d.image_uris.substring(11, 122),\n medium_img: d.image_uris.substring(136, 248)\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2130,"value":"card_details_map = d3.group(card_details_source, d => d.card)","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"md`### Base\nHere is where we combined the performance and card dataframes and increment it with calculated dimensions (for the time being just one: a *Playable* or a *Not Playable*).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2572,"value":"base_data = performance_data\n .map(d => ({\n ...d,\n status_2: ['Drawn', 'OpeningHand'].includes(d.status) // Creating a new status column\n ? 'Playable'\n : 'Not Playable'\n }))\n .filter(d => ['Drawn', 'OpeningHand', 'InDeck'].includes(d.status))\n .filter(\n d =>\n !(\n card_details_map.get(d.card)[0]['type_detail'].split(' — ')[0] ===\n 'Basic Land'\n )\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":2216,"value":"md`### Per graph data\n\nSince this will be used differently in every graph we will build them as functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2284,"value":"md`### Card based performance\nTo calculate the card base performance a function is created to aggregate the base into a certain dimension (as rows), calculating the interest extra dimensions. This will be useful later on when we want to calculate performance of groups.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2464,"value":"agg_performance_metrics_fun = function(bdata, group_by) {\n const bdata_withperformance = d3.rollups(\n bdata,\n v => ({\n [group_by]: v[0][group_by],\n plays: d3.sum(v, d => d.plays),\n wins: d3.sum(v, d => d.wins),\n total_wr: accum_wr(v),\n wr_lift: accum_wr_x1(v) - accum_wr_x2(v),\n playable_wr: accum_wr_x1(v),\n playable_plays: playable_plays(v),\n not_playable_wr: accum_wr_x2(v),\n not_playable_plays: not_playable_plays(v)\n }),\n d => d[group_by]\n );\n return [...bdata_withperformance].map(v => v[1]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2351,"value":"md`### Graph data Fun\n\nThis is where we calculate the base data for each graph:\n- Cards information with respective rank (based on sorting and grouping parameters)\n- Groups aggregate data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2228,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1067,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"d3_arr = require(\"d3-array@^3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3340,"value":"md`### addTooltips with image implementation\nI tweaked a little bit the great work from [@mkfreeman](https://observablehq.com/@mkfreeman)'s [/plot-tooltip](https://observablehq.com/@mkfreeman/plot-tooltip#addTooltips), to include the card image in the tooltips.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3473,"value":"img_parameters = {\n const img_proportion = 1.4;\n const ref_width = 146;\n const ref_height = 204;\n return {\n x: (+ref_width * img_proportion) / 2,\n width: ref_width * img_proportion,\n height: ref_height * img_proportion\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3344,"value":"$40","pinned":true,"hidden":false,"mode":"ojs"},{"id":3346,"value":"$41","pinned":true,"hidden":false,"mode":"ojs"},{"id":3349,"value":"// To generate a unique ID for each chart so that they styles only apply to that chart\nid_generator = () => {\n var S4 = function() {\n return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);\n };\n return \"a\" + S4() + S4();\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W42","stdlib":"1","titling":"auto"}