31:T4d8,plotHeroBox = (attr, showLegend = false) => { const data = heroBaseAttrsLong.filter(d => d["attribute"] === attr) const dataMean = [ d3.mean( d3.map(data, d => d["value"])) ] const dataMax = [ d3.max( d3.map(data, d => d["value"])) ] return Plot.plot({ marks: [ Plot.frame({ strokeOpacity: 0.35 }), // Average marker Plot.ruleX(dataMean, { stroke: "green" }), Plot.textX(dataMean, { x: dataMean, dx: 5, dy: -60, text: d => "Ave.: " + Math.round(dataMean), textAnchor: "start", fill: "green", }), // Max. marker Plot.ruleX(dataMax, { stroke: "red" }), Plot.textX(dataMax, { x: dataMax, dx: -5, dy: -60, text: d => "Max.: " + Math.round(dataMax), textAnchor: "end", fill: "red", }), Plot.image(data, Plot.dodgeY("middle", { fy: "class", x: "value", src: "portrait", r: 7, fill: "class", title: d => d["hero_name"] + " (" + d["value"] + ") ", padding: -0.5 })), ], color: { legend: showLegend }, marginLeft: 100, height: 1000, width: 1200, grid: true, }) }32:T429,plotItems = (valType, hasLegend = false) =>{ const data = itemsClean.filter(d => d.val_type === valType) const attrLength = [...new Set(Object.keys(data.map(d => d["attributes"])))].length const height = attrLength/3 + 50 return Plot.plot({ marks: [ Plot.dotX(data, Plot.dodgeY({ x: "value", fy: "attributes", fill: "item_category", title: "item_name", r: d => d.item_name === selectItemHighlight ? 10 : 3, opacity: d => d.item_name === selectItemHighlight ? 1 : 0.15, stroke: d => d.item_name === selectItemHighlight ? "#000000" : "transparent", anchor: "middle" })), Plot.text(data, Plot.dodgeY({ x: "value", fy: "attributes", text: "value", filter: d => d.item_name === selectItemHighlight, textAnchor: "middle", dy: -20, fontSize: 14 })), ], marginTop: 30, marginRight: 30, marginLeft: 150, width: 1000, height, color: { legend: hasLegend }, x: { grid: true }, }) }33:[] 2f:{"title":"⚔️ Does Your Hero Has The Edge: Exploring Mobile Legends Dataset","cells":[{"id":0,"value":"# ⚔️ Does Your Hero Has The Edge: Exploring Mobile Legends Dataset","pinned":false,"hidden":false,"mode":"md"},{"id":1351,"value":"Exploring Mobile Legends Bang Bang - Heroes and Equipment Attributes ","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"### Goals for this exploration\n1. General overview of the heroes, items and their respective stats\n2. How does the combination of items and their stats would look like\n3. Visualize the stats per items and how does it improve hero stats","pinned":false,"hidden":false,"mode":"md"},{"id":1044,"value":"Disclaimer: Some heroes and items have missing data. Attributes displayed were based on available data and may get outdated as of the moment you were reading this note.","pinned":false,"hidden":false,"mode":"md"},{"id":1113,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":969,"value":"## Base attributes comparison between hero classes","pinned":false,"hidden":false,"mode":"md"},{"id":1121,"value":"Hero classes has some advantages compared to other classes. The chart below will help you identify patterns where Tank class have more base HPSs than Marksman class. Explore and identify other patterns as you see fit.","pinned":false,"hidden":false,"mode":"md"},{"id":961,"value":"viewof selectHeroValAttr = Inputs.select(heroValAttrs.filter(attr => !attrsGroups[\"group_zero\"].includes(attr)), {label: \"Select attribute\", value: \"physical_attack\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"plotHeroBox(selectHeroValAttr, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"## Base hero stats","pinned":false,"hidden":false,"mode":"md"},{"id":1052,"value":"Heroes have base values for their attributes that defines how strong or fast your hero is the moment you start playing. For the charts below, only those base stats that have varying values between heroes are shown.","pinned":false,"hidden":false,"mode":"md"},{"id":659,"value":"heroStats = aq.from(heroBaseAttrsData.find(d => d[\"hero_name\"] === selectHero))\n .rename({\n key: \"attribute\"\n })\n .filter(aq.escape(d => heroValAttrs.includes(d[\"attribute\"])))\n .derive({ \n hero: d => \"heroCurrent\",\n groupAttr: aq.escape(d => heroRefAttrs.find(attr => attr[\"attribute\"] === d[\"attribute\"]).group)\n })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"heroStatsCombined = aq.from(heroMax)\n // aq.from(heroStats)\n // .concat(aq.from(heroMax))\n .concat(aq.from(heroMean))\n .relocate(\"hero\", { before: \"attribute\" })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"viewof selectHeroClass = Inputs.select(heroClasses, {label: \"Select hero class\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"viewof selectHero = Inputs.select(heroesFiltByClass.map(d => d[\"hero_name\"]), {label: \"Select hero\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"html`\n

d[\"hero_name\"] === selectHero)[\"portrait\"]}\" alt=\"${selectHero}\" style=\"border-radius: 100%; width: 120px;\"/>\n

${selectHero}

Class: ${selectHeroClass}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"plotHeroStats(\"group_vital\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"plotHeroStats(\"group_base\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"plotHeroStats(\"group_regen\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"plotHeroStats(\"group_speed\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"

\n \n

Max (among heroes)

\n \n

Ave. (all heroes)

\n \n

Lower than average

\n \n

Higher than average

","pinned":false,"hidden":false,"mode":"html"},{"id":678,"value":"plotHeroStats = (group) => Plot.plot({\n marks: [\n Plot.tickX(heroStatsCombined.filter(d => d[\"groupAttr\"] === group), {\n x: \"value\",\n y: \"attribute\",\n stroke: \"black\",\n strokeWidth: d => d[\"hero\"] === \"heroMax\" ? 2 : 1,\n sort: {y: \"x\", reverse: false}\n }),\n Plot.barX(heroStats.filter(d => d[\"groupAttr\"] === group), { \n x: \"value\", \n y: \"attribute\",\n fill: d => {\n const meanVal = heroMean.find(attrObj => attrObj[\"attribute\"] === d[\"attribute\"])[\"value\"]\n console.log(meanVal)\n return d[\"value\"] > meanVal ? \"green\" : \"orange\"\n },\n fillOpacity: 0.5\n }),\n Plot.text(heroStats.filter(d => d[\"groupAttr\"] === group), {\n x: \"value\", \n y: \"attribute\",\n text: \"value\",\n dx: 5,\n textAnchor: \"start\"\n }),\n Plot.frame({ strokeOpacity: 0.25 })\n ],\n color: { legend: true },\n marginLeft: 150,\n marginRight: 50,\n grid: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"## Items basic stats","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"Picking the right equipment for your hero in Mobile Legends can be confusing and it is hard to visualize how it improves a hero's stats.","pinned":false,"hidden":false,"mode":"md"},{"id":1047,"value":"The chart below shows the distribution of the items and their base or percentage values. An item may have one or more modifiers that improves the attributes of your hero.","pinned":false,"hidden":false,"mode":"md"},{"id":550,"value":"viewof selectItemCategory = Inputs.select(itemNamesCategories, {label: \"Select category\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"viewof selectItemHighlight = Inputs.select(itemNames, {label: \"Highlight item\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"selectItemCategory !== \"All categories\" ? itemsClean.find(d => d.item_name === selectItemHighlight).summary : \" Select item\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"plotItems(\"base\", true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"plotItems(\"number\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"plotItems(\"rate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"selectAttrCat = \"modifiers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"## Exploration did not turn out as expected\n\nInitial plan was to create an item explorer. Due to unavailability of data and formulas to compute the values, the exploration focused more on hero and item attributes but not the combination of two.\n\nFor the moment, it would be useful for comparing heroes an items. It would definitely worth to push for an item + hero explorer in the future once needed data would be available.","pinned":false,"hidden":false,"mode":"md"},{"id":1115,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"## Data processing and preview","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"Thanks for the incredible work by p3hndrx for compiling and maintaining this dataset. Here's a link to the [Github page](https://github.com/p3hndrx/MLBB-API)","pinned":false,"hidden":false,"mode":"md"},{"id":1125,"value":"There seems to have outliers from the dataset above. Some corrections were sourced from the [Mobile Legends Fandom Site](https://mobile-legends.fandom.com/)","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"### Items data","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"statsCategories = Object.keys(itemsData.data[0].data[0]).slice(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"itemsFlat = itemsData.data\n.map(({data, ...d}) => { return {...d, ...data[0] }})\n.map(d => {\n return {\n ...d,\n ...statsCategories.reduce((statsObj, statsAttr) => {\n return {...statsObj, ...d[statsAttr].reduce((attrObj, item, i) => {\n return {...attrObj, ...Object.entries(item).reduce((itemObj, [itemKey, value]) => {\n if(Array.isArray(value)) {\n return {...itemObj, ...value.reduce((modObj, modItem, j) => {\n return {...modObj, ...Object.entries(modItem).reduce((modAttrObj, [modAttrKey, modAttrVal]) => {\n return {...modAttrObj, [statsAttr + \"_\" + i + \"_\" + itemKey + \"_\" + j + \"_\" + modAttrKey]: modAttrVal}\n }, {})}\n }, {})}\n }\n return {...itemObj, [statsAttr + \"_\" + i + \"_\" + itemKey]: value}\n }, {}) }\n }, {}) }\n }, {})\n }\n })\n.map(({modifiers, active, passive, unique_passive, build_path, ...d}) => {\n return {...d}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"infoAttrs = Object.keys(itemsFlat[0]).slice(0, 7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"setAttrs = [...new Set(itemsFlat.flatMap(d => Object.keys(d)))]\n .filter(attr => !infoAttrs.includes(attr))\n .sort((a, b) => a.localeCompare(b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"setAttrsCats = [...new Set(setAttrs.map(attr => attr.split(\"_\")[0]))].filter(attr => ![\"active\", \"build\", \"unique\"].includes(attr))","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"baseAttrs = [\"hp\", \"mana\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"rateSuffixes = [\"speed\", \"reduction\", \"chance\", \"rate\", \"lifesteal\", \"penetration\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"itemsFilled = itemsFlat.map(d => {\n return [...infoAttrs, ...setAttrs].reduce((obj, attr) => {\n return {...obj, [attr]: d[attr] ? d[attr] : \"null\" }\n }, {})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"itemsClean = aq.from(itemsFilled)\n .fold(setAttrs).rename({ key: \"attributes\" })\n .derive({ \n value: aq.escape(d => d.value === \"null\" && null || parseInt(d.value)),\n attr_category: aq.escape(d => d.attributes.split(\"_\")[0]),\n val_type: aq.escape(d => {\n const dArr = d.attributes.split(\"_\")\n return rateSuffixes.some(suffix => d.attributes.includes(suffix)) && \"rate\" || \n baseAttrs.some(attr => dArr[dArr.length - 1] === attr) && \"base\" ||\n \"number\"\n }),\n })\n .filter(aq.escape(d => d.attributes.includes(selectAttrCat)))\n .derive({\n attributes: aq.escape(d => d[\"attributes\"]\n .replace(\"modifiers_0_\", \"\")\n .replace(\"passive_0_\", \"\"))\n })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"itemsClean","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"itemNamesCategories = [...new Set(itemsClean.map(d => d.item_category)), \"All categories\"]\n .sort((a, b) => a.localeCompare(b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"itemNames = [...new Set(itemsClean\n .filter(d => d.item_category === selectItemCategory)\n .map(d => d.item_name))]\n .sort((a, b) => a.localeCompare(b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"### Heroes data","pinned":false,"hidden":false,"mode":"md"},{"id":461,"value":"heroBaseAttrsData = {\n const hdata = heroesData.data.slice(1)\n .map(({ base_attributes, ...d }) => {\n if(base_attributes) return { ...d, ...base_attributes[0] }\n }).filter(d => d)\n\n return aq.from(hdata)\n .derive(heroValAttrs.reduce((attrsObj, attr) => {\n return {...attrsObj, [attr]: aq.escape(d => d[attr] !== \"null\" ? parseFloat(d[attr]) : 0 ) }\n }, {}))\n // Corrections:\n // Hylos attack speed is exceeding to 400, should be 1.03\n // Faramis Physical Attack is around 222, updated to 143\n // Source: mobile-legends.fandom.com\n .derive({\n [\"attack_speed\"]: aq.escape(d => d[\"hero_name\"] === \"Hylos\" ? 1.03 : d[\"attack_speed\"]),\n [\"physical_attack\"]: aq.escape(d => d[\"hero_name\"] === \"Faramis\" ? 143 : d[\"physical_attack\"])\n })\n .objects()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"heroBaseAttrsData","pinned":true,"hidden":false,"mode":"ojs"},{"id":832,"value":"heroBaseAttrsLong = aq.from(heroBaseAttrsData)\n .fold(heroValAttrs)\n .rename({\n key: \"attribute\"\n })\n .derive({\n groupAttr: aq.escape(d => heroRefAttrs.find(attr => attr[\"attribute\"] === d[\"attribute\"]).group)\n })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"heroBaseAttrs = Object.keys(heroBaseAttrsData[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"heroValAttrs = Object.keys(heroesData.data[1][\"base_attributes\"][0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"attrsGroups = ({\n [\"group_vital\"]: [\"hp\", \"mana\"],\n [\"group_regen\"]: [...heroValAttrs.slice(14, 16)],\n [\"group_base\"]: [...heroValAttrs.slice(1, 3)],\n [\"group_speed\"]: [\"movement_speed\", \"attack_speed\"],\n // [\"group_cd\"]: [...heroValAttrs.slice(16, 20)],\n // [\"group_monster\"]: [...heroValAttrs.slice(21)],\n [\"group_zero\"]: [...heroValAttrs.slice(3, 10), \"healing_effect\", \"magic_resistance\", ...heroValAttrs.slice(16, 20), ...heroValAttrs.slice(21)]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"heroRefAttrs = heroValAttrs.map(attr => {\n const group = Object.keys(attrsGroups).find(g => attrsGroups[g].includes(attr))\n return { attribute: attr, group }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"heroMean = aq.from(heroBaseAttrsData.slice(1))\n .derive(heroValAttrs.reduce((attrsObj, attr) => {\n return {...attrsObj, [attr]: aq.escape(d => d[attr] !== \"null\" ? parseFloat(d[attr]) : 0 ) }\n }, {}))\n .rollup(heroValAttrs.reduce((attrsObj, attr) => {\n return {...attrsObj, [attr]: op.mean(attr)}\n }, {}))\n .fold(heroValAttrs)\n .rename({\n key: \"attribute\"\n })\n .filter(aq.escape(d => heroValAttrs.includes(d[\"attribute\"])))\n .derive({ \n hero: d => \"heroMean\",\n groupAttr: aq.escape(d => heroRefAttrs.find(attr => attr[\"attribute\"] === d[\"attribute\"]).group)\n })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"heroMax = aq.from(heroBaseAttrsData.slice(1))\n .derive(heroValAttrs.reduce((attrsObj, attr) => {\n return {...attrsObj, [attr]: aq.escape(d => d[attr] !== \"null\" ? parseFloat(d[attr]) : 0 ) }\n }, {}))\n .rollup(heroValAttrs.reduce((attrsObj, attr) => {\n return {...attrsObj, [attr]: op.max(attr)}\n }, {}))\n .fold(heroValAttrs)\n .rename({\n key: \"attribute\"\n })\n .filter(aq.escape(d => heroValAttrs.includes(d[\"attribute\"])))\n .derive({ \n hero: d => \"heroMax\",\n groupAttr: aq.escape(d => heroRefAttrs.find(attr => attr[\"attribute\"] === d[\"attribute\"]).group)\n })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"heroMin = aq.from(heroBaseAttrsData.slice(1))\n .derive(heroValAttrs.reduce((attrsObj, attr) => {\n return {...attrsObj, [attr]: aq.escape(d => d[attr] !== \"null\" ? parseFloat(d[attr]) : 0 ) }\n }, {}))\n .rollup(heroValAttrs.reduce((attrsObj, attr) => {\n return {...attrsObj, [attr]: op.min(attr)}\n }, {}))\n .fold(heroValAttrs)\n .rename({\n key: \"attribute\"\n })\n .filter(aq.escape(d => heroValAttrs.includes(d[\"attribute\"])))\n .derive({ \n hero: d => \"heroMin\",\n groupAttr: aq.escape(d => heroRefAttrs.find(attr => attr[\"attribute\"] === d[\"attribute\"]).group)\n })\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"heroClasses = [...new Set(heroBaseAttrsData\n .map(d => d[\"class\"]))]\n .sort((a, b) => a.localeCompare(b))\n .filter(hClass => hClass !== \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"heroesFiltByClass = heroBaseAttrsData\n .filter(d => d[\"class\"] === selectHeroClass)\n .sort((a, b) => (a[\"hero_name\"])\n .localeCompare(b[\"hero_name\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"Quick check to see all the possible list of abilities/skills types","pinned":false,"hidden":false,"mode":"md"},{"id":1360,"value":"heroBaseAttrsData.map(hero => hero.skills)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1066,"value":"### Raw Datasets","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"itemsData = fetch(\"https://raw.githubusercontent.com/p3hndrx/MLBB-API/main/v1/item-meta-final.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"heroesData = fetch(\"https://raw.githubusercontent.com/p3hndrx/MLBB-API/main/v1/hero-meta-final.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"emblemData = fetch(\"https://raw.githubusercontent.com/p3hndrx/MLBB-API/main/v1/emblem-meta-final.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"### Utility Functions","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"### Styles","pinned":false,"hidden":false,"mode":"md"},{"id":1070,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}