Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 23, 2021

Created on Nov 23, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between attack and defense stats for Pokémon, with height and weight mapped to the rx and ry circle attributes and specific species color-coded. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes and position circles in SVG. Data loads from a CSV via `d3.csv`, with numeric parsing applied to the relevant fields. The code also appends custom text labels for the axes and plot title, demonstrating an imperative D3 approach within a React-free HTML setup.

CCH SAMPATH

82% match

Loading thumbnail…

Fork of Pokemon ICE 6 Scatter plot

This interactive scatter plot visualizes Pokémon attributes, mapping attack and defense values along the x and y axes. Each circle’s radius is fixed, while the fill color categorizes species, and the radius properties are set from height and weight data. The visualization uses D3.js v5, loads CSV data from a GitHub gist, and renders SVG via the `select` and `join` APIs. Axis labels and a title are added using `axisLeft`, `axisBottom`, and text elements, with the plot drawn in the browser using React’s full-window dimensions.

BBhanuMotupalli

82% match

Loading thumbnail…

Pokeman Scatter Plot

This scatter plot displays Pokemon height versus weight, with each red semi-transparent circle representing an individual creature on a logarithmic weight scale. The visualization uses D3 v5’s `scaleLog` and `scaleOrdinal` for axes and color mapping, with `axisLeft` and `axisBottom` rendering gridlines and labels. Data comes from a CSV file loaded via `d3.csv` from VizHub’s Pokemon dataset, and the SVG chart includes axis labels and a title. The code also defines a legend component that supports interactive filtering by origin, though it is not invoked in the current render.

Ppengli1760

81% match

Loading thumbnail…

Pokemons

This scatterplot-style chart visualizes Pokémon by height on the y-axis and weight on the x-axis (using a square-root scale), with dot size encoding experience and color encoding species. The visualization uses D3 v3 with SVG and animation, rendering an interactive overview of the Pokémon dataset. The data is sourced from the PokeAPI and the chart was built with blockbuilder.org. The plot provides a comparative view of Pokémon physical attributes, with each dot representing an individual Pokémon and its position revealing correlations between size and weight across different species.

PPhilippe Rivière

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to create an interactive scatter plot of auto-mpg data, displaying vehicle weight against horsepower as colored and sized circles. The plot encodes weight on the x-axis and color scale, with mpg controlling circle size and opacity for readability. The code loads data from a CSV using d3.csv, then renders the chart as SVG via Vega-Lite’s API in index.js. A custom config adjusts axis styles and removes domain lines, while tooltips reveal car model names on hover.

MMark Zwart

80% match

Loading thumbnail…

Pokemon Scatter Plot

This scatter plot displays the relationship between height and weight for Pokémon, with each circle representing a creature. The data comes from a CSV file loaded from VizHub. The visualization uses a logarithmic scale for both axes, rendered as an SVG using D3 v5. The code employs D3’s `scaleLog`, `axisBottom`, and `axisLeft` to construct the axes, while circles are appended with semi-transparent navy fill to show density. Axis labels and a title clarify the chart’s purpose.

Llizziechoi121

80% match

Loading thumbnail…

Pokemon Scatter Plot

Llizziechoi121

80% match

Loading thumbnail…

Pokemon Scatter Plot

This interactive scatter plot visualizes Pokémon stats from the PokeAPI, letting users compare any two numeric attributes via dropdown menus for the x and y axes. The D3.js v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scatterplot` functions to render SVG circles with a smooth `transition().duration(1000)` animation as data points fly into place. Axes include gridlines and rotated labels, while the `dropdownMenu` module updates the selected columns on change.

MMihir Sawant

80% match