Vega-Lite API Pokedamage

100%

Vega-Lite API Pokedamage

✓ Published0🌍 Public

Last edited Jan 25, 2022

Created on Jan 24, 2022

This example visualizes Pokémon move statistics by plotting Base Power against Accuracy, with color encoding by move Type and tooltips revealing the move names. The scatterplot uses Vega-Lite API’s markSquare encoding to map quantitative fields and a nominal color field, adjusted to fit the browser window. Data is loaded asynchronously from a CSV URL via d3.csv, while axes and label styling are customized through Vega-Lite configuration options to improve readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

An interactive scatter plot visualizes the relationship between the weight and height of Pokémon, with each point colored by type and rendered as an SVG circle. The visualization uses the D3.js v4 library’s `scaleLinear`, `axisBottom`, `axisLeft`, and `brushX` APIs to support panning and zooming via brush selection, with transitions animating axis and circle updates. Data is loaded from a CSV file hosted on GitHub, styled with a custom configuration for clearer labels, and built within a React framework.

Wwzhang88

76% match

Loading thumbnail…

Vega-Lite API Template

This example displays a scatterplot of ODI player statistics, plotting matches played against runs scored, with point size encoding centuries and tooltips revealing player names. Built with the Vega-Lite API, it uses the `vl.markCircle` and `vl.encode` methods to define the visualization, while D3’s `csv` function loads the dataset from a GitHub gist. The chart fills the entire viewport, applies a custom configuration for axes and fonts, and renders via Vega’s SVG renderer with an interactive tooltip handler.

AAtharvap2000

76% match

Loading thumbnail…

Mon Scatter Comp

A scatter plot of Pokémon compares Attack against Speed, with point size encoding total stats and color encoding primary type, plus tooltips revealing names. Built with vega-lite-api and d3, it loads CSV data from a GitHub gist, renders as a full-window SVG, and applies a custom dark-themed config for readability.

Ccoltonjcox92

75% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, mapping engine displacement to horsepower with circle color encoding model year and size encoding vehicle weight. Tooltips reveal car names on hover. It is built using the Vega-Lite API, a programmatic wrapper for the Vega-Lite grammar, with data loaded from a CSV via D3's `csv` function and rendered as SVG through the bundled Vega and Vega-Lite libraries. The visualization spans the full viewport and applies custom axis and label styling.

AAlice Hua

75% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between acceleration and horsepower, with tooltips revealing car names on hover. Created using the Vega-Lite API, it loads CSV data from a GitHub gist via d3.csv, then renders the visualization through Vega-Lite’s markPoint encoding. The code registers vega, vega-lite, and the vega-tooltip handler, applies a custom dark-themed configuration for axes and labels, and embeds the result in the browser window.

Fforcox43

75% match

Loading thumbnail…

Fork of Mon Defense by Type

This scatter plot visualizes Pokémon stats by type, showing each creature as a circle positioned by HP on the y-axis and Type 1 on the x-axis, with circle size representing total stat sum and color encoding the same type field. Hovering reveals the Pokémon’s name via a tooltip. The chart is built with the Vega-Lite API, registering Vega and Vega-Lite for rendering, and loads data from a CSV file using d3’s csv method. Appearance is customized through a config file that adjusts axis labels and colors.

Qqwxyyigesm

75% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatterplot of automotive data, plotting horsepower against weight while encoding country of origin by color and miles per gallon by point size. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render an SVG view. Data is loaded asynchronously from a CSV file using d3.csv, and the chart is configured with custom axis styles and tooltips via vega-tooltip. The vega-lite-api’s method chaining defines the encoding and mark specifications.

AAnthonyAl-Rifai

75% match

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, mapping miles per gallon against horsepower, with color encoding for country of origin and point size for vehicle weight. Tooltips reveal car names on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications programmatically, with data loaded via d3.csv from the UCI Machine Learning Repository. It renders as an SVG through Vega, with a custom configuration for axis styling and tooltip interactions.

CCees Klap

75% match