I am a very very creative app but it seems to have work hard and it doesn't even open. (written using predictive text)
md`# Pokemon Height and weight
Since the beginning, height and weight data has always been included in the Pokedex. While they usually don't affect gameplay, they help bring information about the scale of different Pokemon.
How are these dimensions associated with other aspects of Pokemon data? Can we expect rock type pokemon to be heavy, and ghost types to be light? Do Pokemon always grow taller when they evolve? These are just some of the questions we will answer here`
heightWeightPokedex = pokedexList
.filter((pokemon) => !isGmax(pokemon) && !isSameDimsForme(pokemon))
.map((mon) => ({
...mon,
stage: getEvolutionStage(mon),
class: getClass(mon),
baseStatTotal: _.sum(Object.values(mon.baseStats)),
img: getSpriteUrl(mon)
}))
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
const panzoom = vl
.selectInterval()
.bind("scales")
.translate(
"[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!"
)
.zoom("wheel!");
const brush = vl
.selectInterval()
.resolve("union")
.on("[mousedown[event.shiftKey], window:mouseup] > window:mousemove!")
.translate(
"[mousedown[event.shiftKey], window:mouseup] > window:mousemove!"
)
.zoom(null);
return vl
.markImage({ width: 30, height: 30 })
.data(heightWeightPokedex.filter((x, i) => i < 1000))
.params(panzoom, brush)
.title("Weight vs Height")
.width(900)
.height(400)
.encode(
vl.y().field("heightm").scale({ type: "log" }),
vl.x().field("weightkg").scale({ type: "log" }),
vl.tooltip().field("name"),
vl.url().fieldN("img")
)
.render({ renderer: "svg" });
}
{
const result = {};
for (const mon of heightWeightPokedex) {
const { heightm, weightkg } = mon;
if (!result[heightm]) {
result[heightm] = {};
}
if (!result[heightm][weightkg]) {
result[heightm][weightkg] = [];
}
result[heightm][weightkg].push(mon);
}
const sameHeightWeight = _.pickBy(
_.mapValues(result, (weights) =>
_.pickBy(weights, (list) => list.length > 1)
),
(heights) => Object.values(heights).length > 0
);
const array = [];
for (const [height, weights] of Object.entries(sameHeightWeight)) {
for (const [weight, mons] of Object.entries(weights)) {
array.push({
height: +height,
weight: +weight,
mons
});
}
}
return array;
}
printExtremes("Pokemon by density", 10, pokemonByDensity)
// TODO these should be binned
vl
.markTick()
.title("Types vs height and weight")
.data(
pokemonWithType.filter(
(x, i) => !isGmax(x) && (!isSameTypeForme(x) || !isSameDimsForme(x))
)
)
.encode(
vl.x().field(vl.repeat("repeat")).scale({ type: "log" }),
vl.y().fieldO("type"),
vl.tooltip().field("name")
)
.repeat(["weightkg", "heightm"])
.render()
md`## Evolution vs height and weight`
// oh god I *have* to find a better way to visualize this
vl.markLine()
.data(pokemonWithEvolutionChain)
.height(600)
.width(350)
.encode(
vl.x().fieldN("stage"),
vl.y().field(vl.repeat("repeat")).scale({ type: "log" }),
vl.color().field("chain"),
vl.tooltip().field("name")
)
.repeat(["weightkg", "heightm"])
.render()
printExtremes("Weight gain when evolving", 10, pokemonByWeightChange)
pokemonByWeightChange = _(pokedexList)
.filter(mon => !!mon.prevo)
.map(mon => {
const prevo = pokemonByName.get(mon.prevo)
return { name: mon.name, ratio: mon.weightkg / prevo.weightkg }
})
.sortBy('ratio')
.map(({ name, ratio }) => `${name} (${ratio})`)
.value()
printExtremes("Height gain when evolving", 10, pokemonByHeightChange)
pokemonByHeightChange = _(pokedexList)
.filter(mon => !!mon.prevo)
.map(mon => {
const prevo = pokemonByName.get(mon.prevo)
return { name: mon.name, ratio: mon.heightm / prevo.heightm }
})
.sortBy('ratio')
.map(({ name, ratio }) => `${name} (${ratio})`)
.value()
md`## Base Stats vs Height and Weight`
vl.markPoint()
.data(pokedexList.filter(mon => !isGmax(mon) && (!isSameDimsForme(mon) || !isSameStatsForme(mon))))
.encode(
vl.y().field(vl.repeat("row")).scale({ type: 'linear' }),
vl.x().field(vl.repeat("column")).scale({ type: 'log' }),
vl.tooltip().field("name"),
)
.repeat({
column: ["weightkg", "heightm"],
row: ["baseStats.hp", "baseStats.spe", "baseStats.atk", "baseStats.def", "baseStats.spa", "baseStats.spd"]
})
.render()
pokemonByDensity =
_(pokedexList).filter(entry => !isGmax(entry)).sortBy(entry => entry.weightkg / entry.heightm).map(entry => entry.name).value()
import {
pokedexList,
pokemonByName,
printExtremes,
isGmax,
getEvolutionStage,
pokemonWithEvolutionChain,
isSameStatsForme,
isSameDimsForme,
getSpriteUrl,
isSameTypeForme,
pokemonWithType,
getClass,
} from "@tesseralis/pokemon-dataviz"
_ = require("lodash@4")
import { vl } from "@vega/vega-lite-api-v5"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.