31:T8c9,chart = { const height = width * 9/16 const margin = 15 const svg = d3.select(DOM.svg(width, height)) const r = 15 const imageSize = r * 2 const strokeWidth = 2 const xScale = d3.scaleLinear() .range([margin, width - margin]) .domain(d3.extent(pokemonBaseStats.map(d => d.x))) const yScale = d3.scaleLinear() .range([margin, height - margin]) .domain(d3.extent(pokemonBaseStats.map(d => -d.y))) const rScale = d3.scaleLog() .range([0, r]) .domain(d3.extent(pokemonBaseStats.map(d => d.base_total))) const data = pokemonBaseStats.map(d => ({...d, x: xScale(d.x), y: yScale(-d.y), xtsne: xScale(d.x), ytsne: yScale(-d.y)})) const g = svg.selectAll('g') // .data(data.slice(0, 50)) .data(data) .enter() .append('g') .attr('transform', d => `translate(${xScale(d.x)}, ${yScale(d.y)})`) const title = g .append('title') .text(d => `Name: ${d.name}(${d.pokedex_number}) Attack: ${d.attack} Defense: ${d.defense} S.Att: ${d.sp_attack} S.Def: ${d.sp_defense} Speed: ${d.speed} HP: ${d.hp} Base: ${d.base_total}`) const pokeballs = g .append('use') .attr('href', d => +d.is_legendary ? '#ultraball' : '#pokeball') .attr('transform', d => `scale(${rScale(d.base_total) / 50})`) .attr('opacity', 0.7) const images = g .append('image') .attr('href', d => getPokemonPNG(d.pokedex_number)) .attr('height', d => rScale(d.base_total) * 2) .attr('width', d => rScale(d.base_total) * 2) const strengthScale = d3.scaleLog() .range([0.1, 0.1]) .domain([0, d3.max(data, d => d.base_total)]) let tick = 0 const simulation = d3.forceSimulation(data) .force('collide', d3.forceCollide().radius(d => rScale(d.base_total))) .force('x', d3.forceX().x(d => d.xtsne)) .force('y', d3.forceY().y(d => d.ytsne)) .on('tick', () => { data.forEach(d => { const r = rScale(d.base_total) d.x = Math.max(r + margin, Math.min(width - margin - r, d.x)) d.y = Math.max(r + margin, Math.min(height - margin - r, d.y)) }) g.attr('transform', d => `translate(${d.x}, ${d.y})`) tick++ if (tick > 100) simulation.stop() }) return svg.node() } 32:T58f,chart2 = { const r = 30 const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const xScale = d3.scaleLinear() .range([margin.left + r, width - margin.right - r]) .domain(d3.extent(pokemonBaseStats.map(d => d.x))) const yScale = d3.scaleLinear() .range([height - margin.bottom - r, margin.top + r]) .domain(d3.extent(pokemonBaseStats.map(d => d.y))) const radialLine = d3.lineRadial() const radialScale = d3.scaleLinear() .range([0, r]) .domain([0, 255]) svg.selectAll('circle') .data(pokemonBaseStats) .enter() // For each Pokemon .each(function (d) { d3.select(this) .append('g') .selectAll('path') .data([d]) .enter() .append('path') .attr('d', d => radialLine([ d.hp, d.attack, d.sp_attack, d.defense, d.sp_defense, d.speed, d.hp ].map((v, i) => [Math.PI * i / 3, radialScale(v)])) ) .attr('transform', `translate(${xScale(d.x)}, ${yScale(d.y)})`) .attr('stroke', 'black') .attr('stroke-width', d => d.is_legendary ? 3 : 2) .attr('fill', d => d.is_legendary ? 'DarkGoldenRod' : 'Crimson') .attr('opacity', 0.4) }) return svg.node() }33:T658,{ const height = 70 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const data = [ { x: 35, y: 35, r: 30, pokedex: 1, name: 'Bulbasaur', type: 'grass' }, { x: 100, y: 35, r: 30, pokedex: 4, name: 'Charmander', type: 'fire' }, { x: 165, y: 35, r: 30, pokedex: 7, name: 'Squirtle', type: 'water' } ] const pokeballs = svg.selectAll('circle') .data(data) .enter() .append('g') .on('mouseover', function (event, d) { mutable selected = `So, ASH, you've decided on the ${d.type.toUpperCase()} POKEMON ${d.name.toUpperCase()}?` d3.select(this) .select('image') .raise() .attr('opacity', 1) }) .on('mouseout', function (event, d) { mutable selected = 'Choose your Pokemon!' d3.select(this) .select('image') .lower() .attr('opacity', 0.7) }) pokeballs.append('image') .attr('href', d => getPokemonPNG(d.pokedex)) .attr('height', d => d.r * 3) .attr('width', d => d.r * 3) .attr('transform', d => `translate(${d.x - d.r * 1.5}, ${-d.r * 0.3})`) .attr('opacity', 0.7) pokeballs.append('g') .attr('stroke', 'black') .attr('stroke-width', 3) .attr('opacity', 0.4) .html(d => ` `) return svg.node() }34:[] 2f:{"title":"Pokemon base stats t-sne","cells":[{"id":0,"value":"md`# Pokemon base stats t-sne`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"md`Taking the dataset from kaggle, [The Complete Pokemon Dataset](https://www.kaggle.com/rounakbanik/pokemon), perform t-sne on the 6 stats, attack, defense, sp_attack, sp_defense, speed, and hp.\n\nThe resulting t-sne dimensionality reduction is ploted and encoded with base_total as the circle size, is_legendary as pokeball or ultra ball.\n\nThe processing Jupyter notebook is in the GitHub repository: https://github.com/leoyuholo/100vis/tree/master/20190122_pokemon-base-stats-t-sne and also the [Learning Vis Tools](https://github.com/leoyuholo/learning-vis-tools) tutorial on Google Colab: https://bit.ly/vis-t04-nb`","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"md`## Radar chart version`","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`## Extra: Mimic the Scene: Choose your Pokemon!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"mutable selected = 'Choose your Pokemon!'","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"md`## Pokeballs in SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"pokemonBaseStats = rawData.map(d => _.mapValues(d, s => isNaN(parseFloat(s)) ? s : parseFloat(s)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"rawData = await d3.csv('https://cdn.statically.io/gh/leoyuholo/100vis/9929be6a/20190122_pokemon-base-stats-t-sne/pokemon_tsne.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"getPokemonPNG = (pokedex) => `https://rawcdn.githack.com/PokeAPI/sprites/f33025ee68fb6a90e5e005902865dd7ba82716e0/sprites/pokemon/${pokedex}.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}