31: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); }32: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()}`; }33:T8b2,mtg_symbols = new Map([ [ 'colorless', html`

` ], [ 'white', html`

` ], [ 'green', html`

` ], [ 'red', html`

` ], [ 'blue', html`

` ], [ 'black', html`

` ], [ 'multicolor', html`

` ] ])34: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, {}); }35: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; }36: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; }37: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(); }38:[] 2f:{"title":"Innistrad: Midnight Hunt (MID) card performance in Limited","cells":[{"id":0,"value":"md`# Innistrad: Midnight Hunt (MID) card performance in Limited\nThis is a Data Playground update with the latest [17 Lands](https://www.17lands.com/) data available for the new released set. It is based on the performance ideas listed in the [original](https://observablehq.com/@ltostes/exploring-mtg-card-performance-in-limited) article written during the AFK set release.\n\n> _Disclaimer: This playground is meant to serve as a good friend and not as an absolute truth._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"data_playground_bullet = md`## Data Playground\n\nThis area is exactly for you, *MTG Player* and/or *Data Viz enthusiast*, to play around with the data from the latest set. 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: 300\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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2962,"value":"md`### Playground data tables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2911,"value":"$32","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 - MID Premier Draft public dataset. Play dates ranging from 2021-09-16 to 2021-10-03\"","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":"$33","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":"$34","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(\n \";\",\n \"https://gist.githubusercontent.com/ltostes/37e4809507df9d160e15c57e0c3cd12d/raw/1348b544d6bf5261b10e9fa2e57d8c190d21ce7f/MTG_MID_CardsWinrateDimensions.csv\",\n d3.autoType\n)","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-1vSBmrCPsPFWqLrDRtJ5K2uKFRgd-XuINN1xtONq7Iv-GvHeAIGnaJGapFppP6im2G7pnoLpwstQnHt_/pub?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 plays: d.int_won_count,\n wins: d.int_won_count * d.int_won_mean\n }))\n .filter((d) => [\"Drawn\", \"OpeningHand\", \"InDeck\"].includes(d.status))\n .filter(\n (d) =>\n card_details_map.get(d.card) &&\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":"$35","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":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":3346,"value":"$37","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":"$W38","stdlib":"1","titling":"auto"}