2b:null 2c:["$","title",null,{"children":"CS5764 Final Project--DR. VIS | Tang Xuxin | Observable"}] 31:T85f,## Use Pokemon Dataset to play! ### Pokemon Overview The pokemon images are displayed in the UI 2d space by applying UMAP algorithm to the original high-dimensional data. #### Filter Data * The full dataset includes all more than 800 pokemons. * Brush from the "Filter data" rectangle, select a subset of the data, you can click on the attribute name to sort. #### Search * Type in pokemon name in the search box, click "submit" to search. The pokemon will be highlighted if found. #### Select pokemon to see detail info * Click the Background Color Circle (not the image in the center of the circle) to select a pokemon. (Here we used to enable click image to select, which need to bound circles with image and the process becomes very slow for some reason. We have to switch to select circle instead) * After selection, the detailed info will display in the right side. The text will only show the current selection, yet the radar chart will have all selected pokemons' info for comparison purpose. Click "reset map" button if you would like to clean the radar chart. * Select different attribute for "Attribute for Color" to apply color legend by different attribute. (default one would be type) * Adjust "image size" bar to adjust the size for images. #### Find "similar" pokemons assisted by KNN * Use the "k for KNN" slider to decide number of neighbors to highlight for selected pokemon. ### Type Matching When matching different types, the original attack will be multiplied by the weight which can be 0, 0.5, 1 or 2. The bold-font pokemons are the active attacking ones. For example, when a normal type of pokemon attack a ghost type of pokemon, the attack will be attack_score * 0 => 0. ### Pokemon Selection The 7 parameters have been normalized, and then multiple the following weights to get the final score. You can use the sliders to adjust the weights as you want. The scores are also normalized to 0~100. The scores are sorted descendingly. The names of the leaves are abbreviated and when hovering over them, you can see the full name. When hovering the legend, this range of pokemons will be highlighted. 32:T261a,UIchart = { // const brush = vl.selectInterval().encodings(["x", "y"]); const embedding = umapStatus.embedding; const svg = d3 .create("svg") .attr("width", width) .attr("height", chart_height) .style("border", "1px solid black"); const xScale = d3 .scaleLinear() .range([margin.left, chart_width - margin.right]) .domain(d3.extent(embedding.map((d) => d[0]))); const yScale = d3 .scaleLinear() .range([chart_height - margin.bottom, margin.top]) .domain(d3.extent(embedding.map((d) => d[1]))); const dimensions = [ "hp", "attack", "sp_attack", "defense", "sp_defense", "speed" ]; // Line generator for radial lines const radialLine = d3.lineRadial(); const r = chart_width / 5; const radar_yScale = d3.scaleLinear().range([0, r]).domain([0, 255]); // The default tick marks is not ideal, override it with a customized one const ticks = [50, 100, 150, 200, 255]; let circle = svg .selectAll("circle") .data(xy_data) .join("circle") .attr("id", (d) => "pokemon" + d.pokedex_number) .attr("r", show_size) .attr("opacity", 0.5) .attr("cx", (r, i) => xScale(embedding[i][0]) + 10) .attr("cy", (r, i) => yScale(embedding[i][1])) // .attr("fill", (d) => scaleColor(d.type1)); .attr("fill", (d) => colorScales.get(colorCol)(d[colorCol])); let img = svg .selectAll("image") .data(xy_data) .join("image") .attr("x", (r, i) => xScale(embedding[i][0]) + 10 - show_size / 2) .attr("y", (r, i) => yScale(embedding[i][1]) - show_size / 2) // .attr("transform", (d) => `translate(-${show_size}/2, -${show_size}/2)`) .attr("width", show_size) .attr("height", show_size) .attr("xlink:href", (r, i) => getPokemonPNG(r.pokedex_number)); // add a mask svg .append("rect") .attr("width", "50%") .attr("height", "100%") .attr("transform", `translate(${chart_width - 30}, 0)`) .attr("fill", "white"); svg .append("g") .selectAll("path") .data(ticks) .enter() .append("path") .attr("d", (d) => radialLine( _.range(7).map((v, i) => [(Math.PI * 2 * i) / 6, radar_yScale(d)]) ) ) .attr( "transform", `translate(${chart_width + r}, ${(chart_height / 3) * 2})` ) .attr("stroke", "grey") .attr("opacity", 0.5) .attr("fill", "none"); // One axis for each dimension dimensions.forEach((dimension, i) => { const g = svg .append("g") .attr( "transform", `translate(${chart_width + r}, ${(chart_height / 3) * 2}) rotate(${ i * 60 })` ); g.append("g").call( d3.axisLeft(radar_yScale).tickFormat("").tickValues(ticks) ); g.append("g").call( d3.axisRight(radar_yScale).tickFormat("").tickValues(ticks) ); g.append("text") .text(dimension) .attr("text-anchor", "middle") .attr("transform", `translate(0, -${r + 10})`); }); let current_circle = undefined; //////// search///// if ( filteredData.map((d) => d.name.toLowerCase()).includes(search.toLowerCase()) ) { let pokemon = filteredData.filter( (d) => d.name.toLowerCase() == search.toLowerCase() )[0]; // let search_circle = svg.select("#pokemon" + pokemon.pokedex_number); current_circle = svg.select("#pokemon" + pokemon.pokedex_number); current_circle .attr("fill", `#${randomColour()}`) .attr("r", show_size * 1.5) .call(animate); // circle.attr( // "transform", // "translate(" + // (chart_width / 2 - current_circle.attr("cx")) + // "," + // (chart_height / 2 - current_circle.attr("cy")) + // ")" // ); // img.attr( // "transform", // `translate( // ${chart_width / 2 - current_circle.attr("cx")}, // ${chart_height / 2 - current_circle.attr("cy")} // )` // ); } ////////Click event///////// circle.on("click", selectPokemon); img.on("click", selectPokemon); function selectPokemon(event, d) { // cleanup previous selected circle if (current_circle !== undefined) { current_circle .attr("fill", (d) => colorScales.get(colorCol)(d[colorCol])) .attr("opacity", 0.5) .attr("stroke", "none"); //.attr("stroke", (d) => colorScales.get(colorCol)(d[colorCol])); //image click svg.selectAll("#details-popup").remove(); d3.select("#detail-image").remove(); } // select the circle const pokedex_number = d3.select(this)._groups?.[0]?.[0]?.__data__?.pokedex_number; // find the correct pokedex number console.log("the selected pokedex_number: ", pokedex_number); current_circle = d3.select("#pokemon" + pokedex_number); // not this, set id for the circle and img current_circle // .attr("fill", "red") // .attr("stroke-opacity", 1) .attr("opacity", 0.8) .attr("stroke", "lightgreen") .attr("stroke-width", 10); // find px py of the selected pokemon let nn = undefined; let loc = [d.x, d.y]; nn = getNNN(embedding, current_circle, loc, k, xScale, yScale); console.log("test nn", nn); // // select the most similar k pokemons and change the style svg .selectAll("circle") .style("fill", function (d, i) { // console.log("print i", i); if (nn.includes(d.pokedex_number)) { return "green"; } }) .style("opacity", function (d, i) { if (nn.includes(d.pokedex_number)) { return 1; } }); // div line let textblock = svg .selectAll("#details-popup") .data([d]) .enter() .append("g") .attr("id", "details-popup") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .attr("transform", (d) => `translate(${chart_width}, 30)`); let detail_img = svg .append("image") .attr("id", "detail-image") .attr("x", width - 150) .attr("y", 0) .attr("width", 150) .attr("height", 150) .attr( "xlink:href", getPokemonPNG(current_circle.attr("id").replace(/[^0-9]/g, "")) ); textblock .append("text") .text("Detail Info:") .attr("font-size", 20) .attr("font-weight", "bold"); textblock .append("text") .text((d, i) => "Pokedex number: " + d.pokedex_number) .attr("y", "16"); textblock .append("text") .text((d, i) => "Name: " + d.name) .attr("y", "32"); textblock .append("text") .text((d, i) => "Type 1: " + d.type1) .attr("y", "48"); textblock .append("text") .text((d, i) => "Type 2: " + d.type2) .attr("y", "64"); textblock .append("text") .text((d, i) => "Speed: " + d.speed) .attr("y", "80"); textblock .append("text") .text((d, i) => "Generation: " + d.generation) .attr("y", "96"); textblock .append("text") .text((d, i) => "Base Total: " + d.base_total) .attr("y", "112"); // textblock // .append("text") // .text((d, i) => "Abilities: " + d.abilities) // .attr("y", "128"); svg .append("g") .selectAll("path") .data([d]) .enter() .append("path") .attr("d", (d, i) => radialLine( [ d.hp, d.attack, d.sp_attack, d.defense, d.sp_defense, d.speed, d.hp // hp again to close the loop ].map((v, i) => [ (Math.PI * 2 * i) / 6 /* radian */, radar_yScale(v) /* distance from the origin */ ]) ) ) .attr( "transform", `translate(${chart_width + r}, ${(chart_height / 3) * 2})` ) .attr("stroke", (d, i) => scaleColor(d.type1)) // .attr("stroke-opacity", 2) .attr("stroke-width", 5) .attr("fill", "none"); // .attr("fill", "rgba(70, 130, 180, 0.3)"); // .attr("opacity", 0.3); } ////////zoom and panning event///////// setupZoom(svg, xScale, yScale); svg.node().update = function (xScaleNew, yScaleNew) { circle .attr( "cx", (r, i) => // xScaleNew(xScale.invert(force_embedding[i].x + 10 - show_size / 2)) + // 10 xScaleNew(embedding[i][0]) + 10 ) .attr("cy", (r, i) => // yScaleNew(yScale.invert(force_embedding[i].y - show_size / 2)) yScaleNew(embedding[i][1]) ); img .attr( "x", (r, i) => // xScaleNew(xScale.invert(force_embedding[i].x + 10 - show_size / 2)) + // 10 - // show_size / 2 xScaleNew(embedding[i][0]) + 10 - show_size / 2 ) .attr( "y", (r, i) => // yScaleNew(yScale.invert(force_embedding[i].y - show_size / 2)) - // show_size / 2 yScaleNew(embedding[i][1]) - show_size / 2 ); }; //////collision force/////// // const simulation = d3 // .forceSimulation(force_embedding) // .force("collide", d3.forceCollide().radius(show_size + collisionR)) // .force( // "x", // d3.forceX((d) => xScale(d.px)) // ) // .force( // "y", // d3.forceY((d) => yScale(d.py)) // ) // .on("tick", ticked); // function ticked() { // circle // .attr("cx", (d, i) => force_embedding[i].x + 10) // .attr("cy", (d, i) => force_embedding[i].y); // img // .attr("x", (d, i) => force_embedding[i].x + 10 - show_size / 2) // .attr("y", (d, i) => force_embedding[i].y - show_size / 2); // } return svg.node(); resetbutton; }33:T5a0,{ const svg = d33.create("svg").attr("viewBox", [-padding, 0, width1, width1]); svg .append("style") .text(`circle.hidden { fill: #000; fill-opacity: 1; r: 0.4px; }`); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const cell = svg .append("g") .selectAll("g") .data(d33.cross(d33.range(columns1.length), d33.range(columns1.length))) .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); cell .append("rect") .attr("fill", "none") .attr("stroke", "#aaa") .attr("x", padding / 2 + 0.5) .attr("y", padding / 2 + 0.5) .attr("width", size - padding) .attr("height", size - padding); cell.each(function ([i, j]) { d33 .select(this) .selectAll("circle") .data(dataS) .join("circle") .attr("cx", (d) => x[i](d[columns1[i]])) .attr("cy", (d) => y[j](d[columns1[j]])); }); const circle = cell .selectAll("circle") .attr("r", 1.5) .attr("fill-opacity", 0.8) .attr("fill", (d) => z(d.type1)); cell.call(brush, circle); svg .append("g") .style("font", "bold 12px sans-serif") .style("pointer-events", "none") .selectAll("text") .data(columns1) .join("text") .attr("transform", (d, i) => `translate(${i * size},${i * size})`) .attr("x", padding) .attr("y", padding) .attr("dy", "0.71em") .text((d) => d); return svg.node(); }34:T445,demo = { const root = d34.select(DOM.svg(W, H)) root .append('g') .attr('class', 'plots') const stats = data4.map(function(d) {return d34.boxplotStats(d);}) const vertical = options.indexOf('vertical') !== -1 const colors=colors2 const scale = d34.scaleLinear() .domain([-1, +1]) .range(vertical ? [H - M.T - M.B, M.T] : [M.L, W - M.L - M.R]) const band = d34.scaleBand() .domain(d34.range(stats.length)) .range(vertical ? [M.L, W - M.L - M.R] : [M.T, H - M.T - M.B]) const plot = d34.boxplot() .scale(scale) .showInnerDots(options.includes('showInnerDots')) .bandwidth(band.bandwidth()) .vertical(vertical) .key(d => d) root.select('g.plots') .attr('transform', 'translate(' + [M.L, M.T] + ')') .selectAll('.plot').data(stats) .join('g') .attr('class', 'plot') .attr('transform', (_, i) => `translate(${vertical ? [band(i), 0] : [0, band(i)]})`) .attr('color', (_, i) => options.includes('color') ? colors[i]: '#000') .call(plot) return root.node() }35:T6f8,chart = { const svg = d3.select(DOM.svg(w, h)) // const g = svg.append("g") // .attr("transform", `translate(${margin.left}, ${margin.top})`) const typeLabels = svg .selectAll(".typeLabels") .data(row) .enter().append("text") .text(function (d) { return d; }) .attr("x", 0) .attr("y", function (d, i) { return i * gridHSize; }) .attr("font-size", "9pt") // .attr("font-weight", 700) .attr("transform", "translate(0," + (marginT.left+ gridHSize / 1.5) + ")") .attr("class", "typeLabels attack axis"); const typeBeLabels = svg .selectAll(".typeBeLabels") .data(row) .enter().append("text") .text(function(d) { return d; }) .attr("x", function(d, i) { return i * gridWSize; }) .attr("y", 0) .attr("font-size", "9pt") .attr("font-weight", 700) // .style("color", "SteelBlue") .style("text-anchor", "middle") .attr("transform", "translate(" + (50 + gridWSize / 2) + ", 12)") // .attr("font-size", "9pt") .attr("class", "typeLabels attack axis"); const cards = svg .selectAll(".column") .data(grid); const cardsEnter = cards .enter().append("rect") .attr("x", function(d) { return d.col * gridWSize; }) .attr("y", function(d) { return d.row * gridHSize; }) .attr("transform", "translate(50,20)") .attr("rx", 4) .attr("ry", 4) .attr("class", "hour bordered") .attr("width", gridWSize) .attr("height", gridHSize) .style("fill", colorsT[0]); cardsEnter.append("title"); cardsEnter .transition() .duration(1000) .style("fill", function(d) { return colorScaleT(d.val); }); cardsEnter .select("title") .text(function(d) { return d.val; }); cards.exit().remove(); return svg.node(); }36:T817,chartPs = { const svg = d3.create("svg").attr("cursor", "default") .attr("font-size", "11pt").attr("viewBox", [0, 0, psWidth, psHeight]); const map = new Heatmap() .size(psWidth, 640).padding(2).mapHeight(10).data(d3.hierarchy(jsonData)); const cells = svg.selectAll("g") .data(map.populate()) .join("g") .attr("opacity", 0) .attr("fill", d => d.color) .attr("transform", d => `translate(${d.x0}, 0)`) .call(g => g.append("title").text(d => d.data ? `${d.data.name}\n${d.data.value}` : "")); // cells.filter(d => options.shape === "square" ? true : d.height > 0) cells .append("rect") .attr("rx", 6).attr("ry", 6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); // if (options.shape === "circle") { // cells.filter(d => d.height === 0) // .append("circle") // .attr("cx", d => d.cx).attr("cy", d => d.cy) // .attr("r", d => d.r); // } cells.append("g") .attr("text-anchor", "middle") .attr("transform", d => `translate(${(d.x1 - d.x0) / 2},${(d.y1 - d.y0) / 2})`) .call(g => g.append("text") .attr("fill", "white") .text(d => d.data ? (d.height === 0 ? d.data.name.slice(0, 3) : d.data.name) : "")) .call(g => g.append("text") .attr("dy", "1em") .attr("fill", "white") .text(d => d.data ? d3.format(".2s")(d.data.value) : "")); cells.transition().duration(d => d.depth * 250) .ease(d3.easeBounce) .attr("opacity", 1) .attr("transform", d => `translate(${d.x0},${d.y0})`) .transition().delay(1000) .on("end", () => { cells.on("mouseover", (e, d) => { if (d.data) { const a = d.ancestors(); cells.transition().duration(100) .attr("opacity", c => a.includes(c) ? 1 : 0.5); }}) .on("mouseout", () => cells.transition().duration(100).attr("opacity", 1)); }); svg.append("g").call(g => drawLegend(g, map.legend(10), cells)); return svg.node(); }37:T7d3,function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }38:T119c,function Legend(color, { title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }39:T411,drawLegend = (g, ld, cells) => { g.attr("font-weight", "bold") .attr("transform", `translate(${psWidth - ld.width},660)`) .call(g => g.append("text") .attr("dy", "-0.3em") .attr("font-size", "9pt") .attr("text-anchor", "end") .attr("transform", `translate(${ld.width},0)`) .text("Pokemon Score")) .selectAll("g") .data(ld.cells) .join("g") .attr("font-size", "8pt") .attr("transform", d => `translate(${d.x},0)`) .call(g => g.append("rect") .attr("width", d => d.width).attr("height", "1.5em") .attr("fill", d => d.color)) .call(g => g.append("text") .attr("dy", "2.7em") .text(d => d.label)) .on("mouseover", (e, d) => cells.filter(c => c.height === 0 && c.data && (c.data.value < d.floor || c.data.value >= d.ceiling)) .transition().duration(500).attr("opacity", 0.2)) .on("mouseout", () => cells.transition().duration(500).attr("opacity", 1)); }3a:T2557,class Heatmap { constructor() { this._width = 0; this._height = 0; this._actualHeight = 0; this._padding = 0; this._legendCellWidth = 30; this._mapHeight = 5; this._minHeaderHeight = 45; this._data = null; this._groupColors = ["#107bab", "#3f95bb"]; // this._groupColors = ["#165493", "#7AD1E4"]; this._cellColors = ["#F3ECDD", "#F46C68"]; // this._cellColors = d3.quantize(d3.interpolateHcl("#d66000", "#a9a9b4"), 10); this._emptyColor = "#eee"; this._groupScale = null; this._cellScale = null; } size(width, height) { return arguments.length ? (this._width = width, this._height = height, this) : [this._width, this._height]; } padding(_) { return arguments.length ? (this._padding = _, this) : this._padding; } legendCellWidth(_) { return arguments.length ? (this._legendCellWidth = _, this) : this._legendCellWidth; } mapHeight(_) { return arguments.length ? (this._mapHeight = _, this) : this._mapHeight; } groupColors(color) { if (arguments.length) { if (typeof color === "string") { const c = d3.color(color); this._groupColors = [c, c.brighter(1.5)]; } else { this._groupColors = color; } return this; } else return this._groupColors; } cellColors(color) { if (arguments.length) { if (typeof color === "string") { const c = d3.color(color); this._cellColors = [c, c.brighter(2)]; } else { this._cellColors = color; } return this; } else return this._cellColors; } emptyColor(_) { return arguments.length ? (this._emptyColor = _, this) : this._emptyColor; } data(_) { return arguments.length ? (this._data = _, this) : this._data; } get actualHeight() { return this._actualHeight; } populate() { const { d, m, columns, slns } = this._align(); // Leaf nodes are arranged vertically, all nodes at other levels are horizontally arranged // The height of a node at other levels is half of a leaf node const unitHeight = this._height / ((d - 1) / 2 + this._mapHeight); const unitWidth = this._width / slns.length; var cellHeight, mapCellHeight; const mapCellWidth = unitWidth / columns; var uh = unitWidth < unitHeight ? unitWidth : unitHeight; // Header cells require a minimum height for properly displaying its content. // If the calculated unit height is less then the threshold, // it will be limited to the requirement and the mapCellHeight will be calulated based on this limitation if (uh < this._minHeaderHeight * 2) { cellHeight = this._minHeaderHeight * 2; // Calculate mapCellHeight based on new available height const mh = (this._height - (d - 1) * cellHeight / 2) / this._mapHeight; mapCellHeight = mapCellWidth < mh ? mapCellWidth : mh; } else { // Normal situation cellHeight = unitWidth < unitHeight ? unitWidth : unitHeight; mapCellHeight = mapCellWidth < unitHeight ? mapCellWidth : unitHeight; } // Update actualHeight this._actualHeight = (d - 1) * cellHeight / 2 + mapCellHeight * this._mapHeight; // only leaf nodes use full cellHeight var x = 0; slns.forEach(p => { p.children.forEach((n, i) => { const y = (d - 1) * cellHeight / 2 + i % this._mapHeight * mapCellHeight; // d - 1 => leaf level const cellX = x + mapCellWidth * Math.floor(i / this._mapHeight); this._setPos(n, cellX, cellX + mapCellWidth, y, y + mapCellHeight); }); const y = (d - 2) * cellHeight / 2; // d - 2 => the 2nd to last level this._setPos(p, x, x + unitWidth, y, y + cellHeight / 2); x += unitWidth; }); // all other levels except leaf and the 2nd to last for (var i = d - 3; i >= 0; i--) { x = 0; this._getNodes(i).forEach(n => { const w = n.children.reduce((a, b) => a + (b.x1 - b.x0), 0), y = i * cellHeight / 2; this._setPos(n, x, x + w, y, y + cellHeight / 2); x += w; }); } this._updateScales(); this._finalize(d); return this._data; } legend(segments, format) { const dataset = this._data.leaves().filter(d => d.data).map(d => parseFloat(d.data.value)); const s = this._sample(d3.extent(dataset), segments) .filter(s => dataset.find(d => d >= s.floor && d < s.ceiling)); // console.log('dataset', dataset) // console.log('legend', s) format = format || ".2s"; return { width: s.length * this._legendCellWidth, cells: s.map((d, i) => ({ x: i * this._legendCellWidth, width: this._legendCellWidth, label: d3.format(format)(d.floor), color: d3.color(this._cellScale(d.floor)).formatHex(), floor: d.floor, ceiling: d.ceiling })) }; } // color sampling _sample(ext, segments) { const min = ext[0], max = ext[1], gap = (ext[1] - ext[0]) / segments; var curr = { floor: min, ceiling: 0 }; const s = [curr]; for (var i = min + gap; i < max - gap; i += gap) { // const p = Math.pow(10, Math.round(i).toString().length - 2); // const v = Math.floor(i / p) * p; const v = i; curr.ceiling = v; curr = { floor: v, ceiling: 0 }; s.push(curr); } curr.ceiling = max; s.push({ floor: max, ceiling: Number.MAX_VALUE }); return s; } _align() { const d = this._getDepth(); // Nodes at the second to last level const slns = this._getNodes(d - 2); // Maximum number of children at the second to last level const m = Math.max.apply(null, slns.map(d => d.children.length)); // the mapHeight cannot exceed m if (this._mapHeight > m) this._mapHeight = m; // Calculate maximum number of columns based on m then get a unified number of cells const columns = Math.ceil(m / this._mapHeight); const cells = columns * this._mapHeight; // Align based on the unified number of cells slns.forEach(n => { for (var i = n.children.length; i < cells; i++) { n.children.push({ data: null, height: 0, depth: n.depth + 1, parent: n }); } }); return { d, m, columns, slns }; } _setPos(node, x0, x1, y0, y1) { node.x0 = x0; node.x1 = x1; node.y0 = y0; node.y1 = y1; } _finalize(depth) { this._data.descendants().forEach(n => { this._setPos(n, n.x0 + this._padding, n.x1 - this._padding, n.y0 + this._padding, n.y1 - this._padding); const c = !n.data ? this._emptyColor : n.depth <= depth - 2 ? this._groupScale(n.depth) : this._cellScale(parseFloat(n.data.value)); n.color = d3.color(c).formatHex(); }); // circle const leaves = this._data.leaves(); if (leaves && leaves.length > 0) { const sample = leaves[0]; const x = sample.x1 - sample.x0, y = sample.y1 - sample.y0; const hx = x / 2, hy = y / 2; const r = hx < hy ? hx : hy; leaves.forEach(n => { n.cx = hx; n.cy = hy; n.r = r; }); } } _updateScales() { this._groupScale = this._scale(this._groupColors) .domain(this._data.height === 1 ? [0, 0] : this._seq(this._data.height)); //.range(seq(map.height).map(i => d3.interpolatePuBu((10 - i * 1) * 0.1))) this._cellScale = this._scale(this._cellColors) .domain(d3.extent(this._data.leaves().filter(d => d.data).map(d => parseFloat(d.data.value)))) // console.log('mark', d3.extent(this._data.leaves().filter(d => d.data).map(d => parseFloat(d.data.value)))) } _scale(range) { if (typeof range === "function") { return d3.scaleSequential(range);} else { return d3.scaleSequential().range(range); } } _seq(length) { return Array.apply(null, { length: length }).map((d, i) => i); } _walkthrough(n, f) { f(n); if (n.children) n.children.forEach(d => this._walkthrough(d, f)); } _getDepth() { if (this._data.height) return this._data.height + 1; else { var depth = this._data.depth; this._walkthrough(this._data, n => { if (n.depth > depth) depth = n.depth; }); return depth + 1; } } _getNodes(level) { const nodes = []; this._walkthrough(this._data, n => { if (n.depth === level) nodes.push(n); }); return nodes; } }3b:T6a3,calculateData = { let data = []; let attack = []; let defense = []; let sp_attack = []; let sp_defense = []; let hp = []; let speed = []; let wr = []; let originalData = dataCombat; // for (let r of dataCombat) { for (let r of originalData) { attack.push(parseFloat(r.attack)); defense.push(parseFloat(r.defense)); sp_attack.push(parseFloat(r.sp_attack)); sp_defense.push(parseFloat(r.sp_defense)); speed.push(parseFloat(r.speed)); hp.push(parseFloat(r.hp)); wr.push(parseFloat(r.winning_rate)); } let extentAttack = d3.extent(attack); let extentDefense = d3.extent(defense); let extentSa = d3.extent(sp_attack); let extentSd = d3.extent(sp_defense); let extentSpd = d3.extent(speed); let extentHp = d3.extent(hp); let extentWn = d3.extent(wr); // Start filling up the data grid. // let i = 0; for (let r of originalData) { // let type = r.type1; let id = r.pokedex_number; // console.log(norm(r.winning_rate, minWn, maxWn), r.winning_rate, minWn, maxWn); let score = d3.format(".0f")(norm(r.attack, extentAttack[0], extentAttack[1]) * attackPara + norm(r.defense, extentDefense[0], extentDefense[1]) * defensePara + norm(r.sp_attack, extentSa[0], extentSa[1]) * spAttackPara + norm(r.sp_defense, extentSd[0], extentSd[1]) * spDefensePara + norm(r.speed, extentSpd[0], extentSpd[1]) * speedPara + norm(r.hp, extentHp[0], extentHp[1]) * hpPara + norm(r.winning_rate, extentWn[0], extentWn[1]) * wnPara); // console.log(norm(r.winning_rate, minWn, maxWn)); let tmp = {id: r.pokedex_number, name: r.name, type: r.type1, score: score}; data.push(tmp) // i++; } return data; }3c:[{"id":"7296d5a111681d90ca4fe968986393e2e2b65748844ebc9661898ea0217902e303f21ab25c936302ee605734c24ff9043c6f5249ae10c49d3ebbcb0eb26b1ee0","href":"https://static.observableusercontent.com/files/7296d5a111681d90ca4fe968986393e2e2b65748844ebc9661898ea0217902e303f21ab25c936302ee605734c24ff9043c6f5249ae10c49d3ebbcb0eb26b1ee0","name":"image.png","type":"image/png","lastModified":1698952372435.346,"size":293395},{"id":"0fa482df89b61cface4c49708c96f764a18e07dcabb17c5eb01b9436d0a2b8aeb432575f2bff309f1fa4f5be9792f2912a1fcd33021497403eb95fbe8ecbc85b","href":"https://static.observableusercontent.com/files/0fa482df89b61cface4c49708c96f764a18e07dcabb17c5eb01b9436d0a2b8aeb432575f2bff309f1fa4f5be9792f2912a1fcd33021497403eb95fbe8ecbc85b","name":"Combat_final2.csv","type":"text/csv","lastModified":1698952372435.346,"size":32128},{"id":"39dd3796f50017e56d039d8fff04d3ffdf51b377ed9fcf7448dffdbca8d5f9b8afdf4555d7de32c71d3f2503200c007ddf774316a59368c94a0e528f6e8d8bb2","href":"https://static.observableusercontent.com/files/39dd3796f50017e56d039d8fff04d3ffdf51b377ed9fcf7448dffdbca8d5f9b8afdf4555d7de32c71d3f2503200c007ddf774316a59368c94a0e528f6e8d8bb2","name":"pokemon_stat.csv","type":"text/csv","lastModified":1698952372435.346,"size":160616},{"id":"52556a281c38d32b1929f402a6c5c1a5aff2e9a1da4f4c772e70535c8a5d8278825b9c90766bca904e7c4278795e67e156bd6c353348fa6d78aafd3b9dc05eda","href":"https://static.observableusercontent.com/files/52556a281c38d32b1929f402a6c5c1a5aff2e9a1da4f4c772e70535c8a5d8278825b9c90766bca904e7c4278795e67e156bd6c353348fa6d78aafd3b9dc05eda","name":"typing_chart.csv","type":"text/csv","lastModified":1698952372435.346,"size":824},{"id":"f3d32d7eca54ca07bf0c851aa8af4a6c53efaa59f4a2ded71ec92ec44ce95dc9fd3372327705323e67f4ae843d422ae3778779871f39b8c64d9c12092a0e5ef1","href":"https://static.observableusercontent.com/files/f3d32d7eca54ca07bf0c851aa8af4a6c53efaa59f4a2ded71ec92ec44ce95dc9fd3372327705323e67f4ae843d422ae3778779871f39b8c64d9c12092a0e5ef1","name":"Combat_final.csv","type":"text/csv","lastModified":1698952372435.346,"size":196460}] 2f:{"id":"af20a75bb5149079","slug":null,"title":"CS5764 Final Project--DR. VIS","thumbnail":"b78b0c8ade5026e45043054d17a79f5ee8b2bb42d31a1adb206a9aad56f7474b","access_level":"public","create_time":"$D2023-11-02T19:12:52.435Z","update_time":"$D2023-11-02T19:12:52.435Z","view_time":null,"first_public_time":"$D2023-11-02T19:12:52.435Z","fork":{"id":"1ee6bb7c3290e3f3","slug":null,"title":"CS5764 Final Project--DR. VIS","owner":{"id":"390adb84a297e322","login":"b3c1d31e147bc5d4","name":"Huimin Han"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f64cc81d543718cf","login":"f034483735918189","name":"Tang Xuxin","avatar_url":"https://avatars-next.observableusercontent.com/1b0724c3f2007b662ef3c3655f969f660c33b14ada2b2469e50362f813e4dff4","tier":"starter_2024"},"version":3469,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f034483735918189","login":"f034483735918189","name":"Tang Xuxin","avatar_url":"https://avatars-next.observableusercontent.com/1b0724c3f2007b662ef3c3655f969f660c33b14ada2b2469e50362f813e4dff4","tier":null}],"members":[{"type":"individual","id":"f034483735918189","login":"f034483735918189","name":"Tang Xuxin","avatar_url":"https://avatars-next.observableusercontent.com/1b0724c3f2007b662ef3c3655f969f660c33b14ada2b2469e50362f813e4dff4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CS5764 Final Project--DR. VIS","cells":[{"id":0,"value":"# CS5764 Final Project--DR. VIS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2448,"value":"# Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1879,"value":"## Link to google doc:\nhttps://docs.google.com/document/d/15rPZBTpPwMTcOcmQ6LNXL0N3KXA8corI6Hh2dAU4zHM/edit#","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2451,"value":"## Umap Algorithms\n• Graph Construction\n1. Construct a weighted k-neighbour graph\n2. Apply some transform on the edges to ambient local distance.\n3. Deal with the inherent asymmetry of the k-neighbour graph.\n \n• Graph Layout\n1. Define an objective function that preserves desired characteristics of this k-neighbour graph.\n2. Find a low dimensional representation which optimizes this objective function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2587,"value":" $\"UMAP\"$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2614,"value":"\nAs described in Algorithm 1, the UMAP algorithm takes four hyper-parameters:\n1. nNeighbors, the number of neighbors to consider when approximating the local\nmetric;\n2. nComponents, the target embedding dimension, here we set to 2;\n3. minDist, the desired separation between close points in the embedding space;\n4. Spread, the effective scale of embedded points, used with minDist to control the clumped/dispersed nature of the embedding. \n\nAll the hyper-parameters are set to a slider bar to play with.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2162,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"## UMAP Parameters (Task 1 - 4)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"viewof show_dynamic = checkbox({\n options: [\"Show dynamic\"],\n value: \"Show dynamic\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`### Choose which attributes to feed to UMAP`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof selectedColumns = checkbox({\n title: \"Select Attributes\",\n options: [\n \"attack\",\n \"defense\",\n \"hp\",\n \"sp_attack\",\n \"sp_defense\",\n \"speed\",\n \"base_total\",\n \"base_happiness\",\n \"capture_rate\",\n \"experience_growth\",\n \"height_m\",\n \"weight_kg\",\n \"percentage_male\",\n \"generation\",\n \"is_legendary\"\n ], // remove against___\n // value: this?.value\n value: [\n \"attack\",\n \"defense\",\n \"hp\",\n \"sp_attack\",\n \"sp_defense\",\n \"speed\",\n \"base_total\",\n \"base_happiness\",\n \"capture_rate\",\n \"experience_growth\",\n \"height_m\",\n \"weight_kg\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof minDist = slider({\n title:\"minDist\",\n value: 0.1,\n description: \"The effective minimum distance between embedded points, used with spread to control the clumped/dispersed nature of the embedding (defaults to 0.1)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof spread = slider({\n title:\"spread\",\n value: 1,\n min:0,\n max:3, \n step: 0.01,\n description: \"The effective scale of embedded points, used with minDist to control the clumped/dispersed nature of the embedding (defaults to 1)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof nNeighbors = slider({\n title: \"Number of Neighbors (nNeighbors, hyperparameter for UMAP)\",\n // title: \"nNeighbors\",\n value: 15,\n min: 1,\n max: 50,\n step: 1,\n description:\n \"The number of nearest neighbors to construct the fuzzy manifold (defaults to 15)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"viewof seed = number({\n description: \"random seed\",\n value: 46\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2308,"value":"## Visualization Parameters (Task 2 - 4)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"// viewof filterData = checkbox([\"Filter data?\"], { value: [\"Filter data?\"] })\nviewof filterData = Inputs.checkbox([\"Filter data?\"], {\n value: [\"Filter data?\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"viewof navioData = {\n if (filterData.length !== 0) {\n return navio(dataCombat, {\n height: 500,\n attribs: dataCombat.columns.slice(20),\n attribWidth: 30,\n maxNumDistictForCategorical: 100,\n defaultColorCategorical: d3.schemeCategory10\n .concat(d3.schemeAccent)\n .concat(d3.schemePastel1)\n .concat(d3.schemeSet2)\n .concat(d3.schemeSet3)\n });\n }\n const div = html``;\n div.value = dataCombat;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"layout = html`\n\n\n

\n ${viewof show_size}\n

\n ${viewof k}\n

\n ${viewof colorCol}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"Swatches(scaleColor, {\n columns: \"100px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1812,"value":"### Click background circle to select a pokemon to show details!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3064,"value":"layout1 = html`\n\n

\n ${viewof search}\n

\n ${viewof resetbutton}\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2202,"value":"### Correlation (Analysis for winning rate) (Task 5)\nThe pairwise correlation matrix allows studying the relationship between the attributes of pokemon and their winning rate.
It also supports the brushable function that when selecting a certain region of data points in one cell, the selected points are highlighted in all other cells at the same time. This helps identify patterns for a specific portion of the data.\n\n${textcolor('Note: how to read the plot - the third cell in the first row shows the correlation between attack and hp of pokemon', 'darkgreen')}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2209,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2403,"value":"Swatches(scaleColor, {\n columns: \"100px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2333,"value":"### Find Extreme (Analysis for winning rate) (Task 6)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2564,"value":"The multiple box plots and scatterplots show the distribution of winning rates with the different types of pokemon.\nHere are instructions for checkbox options:\n1.\t “Vertical”: choose the layout direction of the boxplot (vertical vs horizontal). \n2.\t “Show inner dots”: choose either to visualize both boxplot and scatterplot at the same time or visualize only boxplot. \n3.\t “Use color”: apply different colors to different types of pokemon.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2398,"value":"viewof options = checkbox({\n title: \"Options\",\n options: [\n {value: \"vertical\", label: \"Vertical\"},\n {value: \"showInnerDots\", label: \"Show inner dots\"},\n {value: \"color\", label: \"Use color\"},\n ],\n value: [\"showInnerDots\", \"color\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2395,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"Swatches(d34.scaleOrdinal([\"grass\", \"fire\", \"water\", \"bug\", \"normal\", \"poison\", \"electric\", \"ground\", \"fairy\", \"fighting\", \"psychic\", \"rock\", \"ghost\", \"ice\", \"dragon\", \"dark\", \"steel\", \"flying\"], colors2), {\n columns: \"200px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"## Complex task (Task 7, 8)\nWhen I know the type of a Pokemon Gym or even the lineup, which Pokemons should I bring to the battle?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1840,"value":"### Type Matching (Task7, Task 8-Subtask 1)\nWhen matching different types, the original attack will be multiplied by the weight which can be 0, 0.5, 1 or 2.
\nThe **bold-font** pokemons (X-axis) are the ones actively attacking, and the non-bond-font pokemons are being attacked.
\nFor example, when an **electric** type of pokemon attack a **ground** type of pokemon, the attack will be **attack_score * 0 => 0**.
\nWhen an **electric** type of pokemon attack a **water** type of pokemon, the attack will be **attack_score * 2**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1848,"value":"Legend(d3.scaleOrdinal([0,0.5,1,2], [\"#a5eacf\", \"#fff4f2\", \"#fcdcc8\", \"#ffa286\"]), {\n title: 'Heatmap of Pokemon attack matching',\n width: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"### Pokemon Selection (Subtask 2)\nThe 7 parameters have been normalized, and then multiple the following weights to get the final score. The scores are also normalized to 0~100. The scores are sorted descendingly.
\nThe names of the leaves are abbreviated and when hovering over them, you can see the full name.
\nWhen hovering the legend, this range of pokemons will be highlighted.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2086,"value":"#### Choose the weight of 7 parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2069,"value":"layoutPs = html`\n\n

\n ${viewof attackPara}\n

\n ${viewof defensePara}\n

\n ${viewof spAttackPara}\n

\n ${viewof spDefensePara}\n

\n ${viewof speedPara}\n

\n ${viewof hpPara}\n

\n ${viewof wnPara}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2073,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2214,"value":"function brush(cell, circle) {\n const brush = d33.brush()\n .extent([[padding / 2, padding / 2], [size - padding / 2, size - padding / 2]])\n .on(\"start\", brushstarted)\n .on(\"brush\", brushed)\n .on(\"end\", brushended);\n\n cell.call(brush);\n\n let brushCell;\n\n \n function brushstarted() {\n console.log(\"brushstarted\", brushCell === this);\n if (brushCell !== this) {\n d33.select(brushCell).call(brush.move, null);\n brushCell = this;\n }\n }\n\n \n function brushed([i, j]) {\n if (d33.event.selection === null) return;\n const [[x0, y0], [x1, y1]] = d33.event.selection; \n circle.classed(\"hidden\", d => {\n return x0 > x[i](d[columns1[i]])\n || x1 < x[i](d[columns1[i]])\n || y0 > y[j](d[columns1[j]])\n || y1 < y[j](d[columns1[j]]);\n });\n }\n\n \n function brushended() {\n if (d33.event.selection !== null) return;\n circle.classed(\"hidden\", false);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`---\n## Data\nFormat data for UMAP, it expects a matrix of numbers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2379,"value":"data4 = Object.values(data2.reduce((group, i) => { const {type1} = i;\n group[type1] = group[type1] ?? [];\n group[type1].push(i.winning_rate);\n return group;\n}, {}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2374,"value":"data2=dataS\n .map((d) => [\"type1\", \"winning_rate\"].map((c) => d[c]))\n .map((d) => ({\n type1: d[0],\n winning_rate: d[1]\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2903,"value":"filteredData = {\n if (navioData.length === 801) {\n return data.filter((d) => d.pokedex_number <= 50);\n } else {\n return navioData;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3283,"value":"xy_data = filteredData.map((obj, i) => ({\n ...obj,\n x: umapStatus.embedding[i][0],\n y: umapStatus.embedding[i][1]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2166,"value":"dataS = await FileAttachment(\"Combat_final2.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2172,"value":"columns1 = dataS.columns.filter(d => d !== \"type1\" && d !== \"type2\" && d !== \"pokedex_number\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"data = FileAttachment(\"pokemon_stat.csv\")\n .text()\n .then((res) => d32.csvParse(res, d32.autoType))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"dataAsMatrix = {\n return filteredData.map(d => selectedColumns.map(c => d[c]))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"numericColumns = columns.filter((c) => typeof data[0][c] === \"number\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"columns = data.length > 0 ? Object.keys(data[0]) : []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1717,"value":"colorColumns = numericColumns.slice().concat(\"type1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"// new\npokemonBaseStats = d3.csv(\n // \"https://raw.githubusercontent.com/HannahHan3/DR.VIS/main/Data/pokemon_stat.csv\"\n \"https://raw.githubusercontent.com/HannahHan3/DR.VIS/main/Data/Combat_final.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"//new\nbattle = d3.csv(\n \"https://raw.githubusercontent.com/HannahHan3/DR.VIS/main/Data/pokemon_battle_combats.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1868,"value":"//Type Matching\ndataT = FileAttachment(\"typing_chart.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1870,"value":"//Type Matching\ncolumn = dataT.columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"//Type Matching\nrow = dataT.columns.slice(1,)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1874,"value":"//Type Matching\ngrid = {\n let grid = [];\n \n // Start filling up the data grid.\n let i = 0;\n for (let r of dataT) {\n let id = r.Types;\n\n for (var j=0; j d[col]))\n // .range([\"green\", \"yellow\", \"red\"]);\n\n .scaleSequential(d3.interpolateBlues)\n .domain(d3.extent(dataCombat, (d) => d[col]));\n }\n\n scales.set(col, scale);\n });\n return scales;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"mutable transform = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"function setupZoom(svg, xscale, yscale) {\n // D3 Zoom API\n const extent = [\n [margin.left, margin.top],\n // [100, 100]\n [chart_width - margin.right, chart_height - margin.top]\n ];\n const zoom = d3\n .zoom()\n .extent(extent) // Where the interaction occurs\n .translateExtent(extent) // Limits panning to the original extent\n .scaleExtent([1, 8]) // Sets the maximum zoom factor\n .on(\"zoom\", zooming);\n svg.call(zoom);\n\n // Zoom event callback\n function zooming(event) {\n mutable transform = event.transform;\n // Do zooming here, event.transform expresses the pan+zoom from original x & y scales\n\n // update the scales\n const xzoom = event.transform.rescaleX(xscale); // Apply zoom to xscale\n const yzoom = event.transform.rescaleY(yscale); // Apply zoom to yscale\n // update the plot\n svg.node().update(xzoom, yzoom);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"scaleColor = d3.scaleOrdinal()\n .domain(Object.keys(colors))\n .range(Object.values(colors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2382,"value":"colors2 = [\n 'green',\n 'red',\n 'darkcyan',\n 'lightgreen',\n 'lightslategray',\n 'orchid',\n 'gold',\n 'burlywood',\n 'pink',\n 'darkred',\n 'rebeccapurple',\n 'dimgray',\n 'midnightblue',\n 'lightblue',\n 'darkorange',\n 'black',\n 'silver',\n 'cornflowerblue']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"colors = ({\n normal: 'lightslategray',\n fire: 'red',\n water: 'darkcyan',\n grass: 'green',\n electric: 'gold',\n ice: 'lightblue',\n poison: 'orchid',\n psychic: 'rebeccapurple',\n fighting: 'darkred',\n ground: 'burlywood',\n rock: 'dimgray',\n bug: 'lightgreen',\n flying: 'cornflowerblue',\n ghost: 'midnightblue',\n dragon: 'darkorange',\n steel: 'silver',\n dark: 'black', \n fairy: 'pink',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"getPokemonPNG = (pokedex) =>\n `http://raw.githubusercontent.com/HannahHan3/DR.VIS/main/Data/pokemon/${pokedex}.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3175,"value":"dist = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3070,"value":"function getNNN(data, current_circle, loc, n, xScale, yScale) {\n let dists = [];\n for (let i = 0; i < data.length; i++) {\n // let tempPoint = [xScale(data[i][0]) + 10, yScale(data[i][1])];\n let tempPoint = [data[i][0], data[i][1]];\n let pokedex = xy_data.slice(i, i + 1).map((d) => d.pokedex_number)[0];\n\n dists.push([pokedex, i, dist(tempPoint, loc), tempPoint, loc]);\n }\n // 2. sort those points to the test data in ascending order\n dists.sort((a, b) => a[2] - b[2]);\n console.log(\"dist\", dists);\n // 3. Keep the indices of the top n-nearest neighbors\n let nnn = [];\n for (let i = 0; i < n + 1; i++) {\n nnn.push(dists[i][0]);\n }\n // nnn.shift();\n return dists.slice(1, n + 1).map((d) => d[0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3300,"value":"function animate(circle) {\n circle\n .transition()\n .duration(200)\n .attr(\"fill\", `#${randomColour()}`)\n .on(\"end\", () => circle.call(animate));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3302,"value":"function randomColour() {\n return Math.floor(Math.random() * 16777215).toString(16);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"viewof show_size = slider({\n min: 10,\n max: 80,\n step: 5,\n value: 35,\n title: \"image Size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2638,"value":"viewof search = text({\n placeholder: \"Type in Pokemon Name\",\n description: \"Search Pokemon by name, remember to hit submit button\",\n submit: \"Submit\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1583,"value":"// viewof collisionR = slider({\n// min: -show_size,\n// max: +show_size,\n// value: -show_size,\n// title: \"Collision R\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof colorCol = select({\n title: \"Attribute for Color\",\n options: colorColumns,\n // value: colorColumns.indexOf(\"group\") !== -1 ? \"group\" : numericColumns[0]\n value: \"type1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"viewof resetbutton = Inputs.button(\"Reset Map\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3079,"value":"viewof k = slider({\n min: 1,\n max: 6,\n step: 1,\n value: 3,\n width: 50,\n title: \"Top k most similar pokemons colored as green (k for KNN)\"\n // description: \"Number of nearest neighbors (0-50) used for classification\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2359,"value":"### Statistics: Find Extremum","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2366,"value":"W = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2364,"value":"H = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2361,"value":"M = ({L: 5, R: 5, T: 5, B: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2143,"value":"### Statistics: Correlation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2191,"value":"z = d33.scaleOrdinal() \n .domain(Object.keys(colors))\n .range(Object.values(colors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2186,"value":"y = x.map(x => x.copy().range([size - padding / 2, padding / 2]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2184,"value":"x = columns1.map(c => d33.scaleLinear()\n .domain(d33.extent(dataS, d => d[c]))\n .rangeRound([padding / 2, size - padding / 2]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2182,"value":"yAxis = {\n const axis = d33.axisLeft()\n .ticks(5)\n .tickSize(-size * columns1.length);\n return g => g.selectAll(\"g\").data(y).join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * size})`)\n .each(function(d) { return d33.select(this).call(axis.scale(d)); })\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#ddd\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2180,"value":"xAxis = {\n const axis = d33.axisBottom()\n .ticks(5)\n .tickSize(size * columns1.length);\n return g => g.selectAll(\"g\").data(x).join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * size},0)`)\n .each(function(d) { return d33.select(this).call(axis.scale(d)); })\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#ddd\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2155,"value":"width1 = 963","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2153,"value":"size = (width1 - (columns1.length + 1) * padding) / columns1.length + padding","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2147,"value":"padding = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"### Type Matching","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1865,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"colorsT = ({\n 0: \"#a5eacf\",\n 0.5: \"#fff4f2\",\n 1: \"#fcdcc8\",\n 2: \"#ffa286\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1876,"value":"colorScaleT = d3.scaleOrdinal([0,0.5,1,2], [\"#a5eacf\", \"#fff4f2\", \"#fcdcc8\", \"#ffa286\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1885,"value":"marginT = ({ top: 20, right: 20, bottom:30, left: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"w = width - marginT.left - marginT.right ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"h = (row.length * gridHSize) + marginT.top ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1889,"value":"gridWSize = Math.floor( (w - 100) / 17 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1891,"value":"gridHSize = gridWSize / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2019,"value":"### Pokemon Selection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2075,"value":"psWidth = 1024","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"psHeight = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2021,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2023,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2030,"value":"dataCombat = FileAttachment(\"Combat_final.csv\")\n .text()\n .then((res) => d32.csvParse(res, d32.autoType))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"viewof attackPara = slider({\n min: 0,\n max: 5,\n step: 1,\n value: 1,\n title: \"Attack\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2035,"value":"viewof defensePara = slider({\n min: 0,\n max: 5,\n step: 1,\n value: 1,\n title: \"Defense\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2037,"value":"viewof spAttackPara = slider({\n min: 0,\n max: 5,\n step: 1,\n value: 1,\n title: \"Sp_attack\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2039,"value":"viewof spDefensePara = slider({\n min: 0,\n max: 5,\n step: 1,\n value: 1,\n title: \"Sp_defense\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2041,"value":"viewof speedPara = slider({\n min: 0,\n max: 5,\n step: 1,\n value: 1,\n title: \"Speed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2043,"value":"viewof hpPara = slider({\n min: 0,\n max: 5,\n step: 1,\n value: 1,\n title: \"Hp\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2045,"value":"viewof wnPara = slider({\n min: 0,\n max: 5,\n step: 1,\n value: 1,\n title: \"Wining Rate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2047,"value":"cutNum = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"function norm(num, minNum, maxNum) {\n let Nscore = ((( num - minNum ) / ( maxNum - minNum )) * 100 ).toFixed();\n return Nscore;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2055,"value":"normalizeData = {\n let scoreArray = [];\n let tmp = {};\n let normalData = [];\n let result = 0;\n for (let r of calculateData) {\n scoreArray.push(parseFloat(r.score));\n }\n let maxScore = d3.max(scoreArray);\n let minScore = d3.min(scoreArray);\n for (let r of calculateData) {\n let Nscore = ((( r.score - minScore ) / ( maxScore - minScore )) * 100).toFixed();\n normalData.push({id: r.id, name: r.name, type: r.type, score: r.score, Nscore: Nscore});\n }\n return normalData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2058,"value":"jsonData = {\n let sortData = [...normalizeData].sort((a,b) => b.Nscore - a.Nscore);\n let newData = {name: \"All Pokemons\", value: \"100\", children: []};\n let typeIndex = {};\n let indexScore = {};\n let maxNscore = {};\n \n let type =['normal','fire','water','grass','electric','ice','poison','psychic','fighting','ground','rock','bug','flying','ghost','dragon','steel','dark', 'fairy']\n let index = 0;\n for (let t of type) {\n newData.children.push({name: t, value: 0, children: []});\n typeIndex[t] = index;\n index += 1;\n }\n \n let num = 0;\n for (let r of sortData) {\n if(maxNscore[r.type]>=cutNum){\n continue;\n }\n index = typeIndex[r.type];\n if (newData.children[index].value == 0) {\n newData.children[index].value = r.Nscore;\n maxNscore[r.type] = 0;\n }\n newData.children[index].children.push({name: r.name, value: r.Nscore});\n maxNscore[r.type] += 1;\n }\n return newData; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2061,"value":"type = dataT.columns.slice(1,)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`---\n## UMAP\n\nUses a modified version of [@fil UMAP-worker](https://observablehq.com/@fil/umap-js-worker) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"nComponents = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"UMAP = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"// Code from https://observablehq.com/@fil/umap-js-worker\numapStatus = Generators.observe(\n worker(\n fit,\n { \n dataAsMatrix, \n show_dynamic, \n options: {\n nComponents,\n minDist,\n nNeighbors,\n spread\n }\n },\n `\nconst window = {};\nimportScripts(\"https://unpkg.com/umap-js@1.3.2/lib/umap-js.js\");\nimportScripts(\"https://unpkg.com/d3-random@2\");\nconst UMAP = window.UMAP;\n\nMath.random = d3.randomLcg(${seed});\n\n `\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"// Code from https://observablehq.com/@fil/umap-js-worker\nfit = function* fit({ dataAsMatrix, show_dynamic, options }) {\n \n //Yield something before reinitializing\n yield { \n status: \"Initializing\",\n currentEpoch: 0,\n targetEpoch: 0,\n embedding: dataAsMatrix.map(_ => [Math.random(), Math.random()])\n };\n \n const umap = new UMAP(options),\n nEpochs = umap.initializeFit(dataAsMatrix); \n\n yield { \n status: \"Starting\",\n currentEpoch: 0,\n targetEpoch: nEpochs,\n embedding: umap.getEmbedding()\n };\n \n for (let i = 0; i < nEpochs; i++) {\n umap.step();\n if (show_dynamic && i%5 ===0) {\n yield { \n status: \"Running\",\n currentEpoch: i,\n targetEpoch: nEpochs,\n embedding: umap.getEmbedding()\n };\n }\n }\n yield { \n status: \"Finished\",\n currentEpoch: nEpochs,\n targetEpoch: nEpochs,\n embedding: umap.getEmbedding()\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`---\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2351,"value":"d34 = ({\n ...await require(\"d3@5\"),\n ...await require('d3-boxplot@1.0.0')\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2141,"value":"d33 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d32 = require(\"d3-dsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2346,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2811,"value":"import { text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"import {checkbox, number, slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"import { dataInput } from \"@john-guerra/data-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"import {worker} from \"@fil/worker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"import { navio } from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"margin = ({ top: 40, right: 110, bottom: 30, left: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"chart_height = (width / 3) * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"chart_width = width / 3 * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2027,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1550,"value":"// d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3055,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2436,"value":"### References\nhttps://observablehq.com/@d3/color-legend\nhttps://observablehq.com/@cr0wax/brushable-scatterplot-matrix\nhttps://observablehq.com/@akngs/d3-boxplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"