Plot of Games with VL

100%

Plot of Games with VL

✓ Published1🌍 Public

Last edited Jan 18, 2023

Created on Jan 17, 2023

This scatterplot visualizes weekly pageview metrics for a set of games, plotting each game’s unique pageviews against the week number. Each point is a game, colored by game name, with tooltips revealing unique pageview counts. The visualization is built with Vega-Lite, using the vl API to configure mark circle encoding, scaling, and tooltips. Data is loaded asynchronously via D3’s CSV parser and rendered with Vega–Lite’s automatic SVG output, configured with custom axis styling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Plot of Games with D3.JS with Images

This scatter plot displays website analytics for seven games across different weeks, plotting unique pageviews against week numbers as small green circles. The visualization loads data from a local `games.csv` file using `d3.csv`, then builds the chart with `scaleLinear` for both axes and renders points via `enter().append("circle")`. Axis ticks are generated with `axisLeft` and `axisBottom`. The chart uses SVG rendering within an HTML page that imports D3 v7 from a CDN, with minimal visual styling applied through the config file.

Iindira-antgrvty

79% match

Loading thumbnail…

ice 7 scatter

This scatter plot visualizes global video game sales across years, with each circle representing a game and colored by genre. Hovering over a point reveals the game’s name via a tooltip. Built with Vega-Lite’s API (vl.markCircle), it encodes year and global sales on the x- and y-axes. The code uses vega-tooltip for interactivity, d3.csv to load the game sales dataset, and custom styling from a config file to adjust font sizes and axis colors.

TTejamod

74% 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

74% match

Loading thumbnail…

Week 11 Board Game Visualization Schnair

This interactive scatterplot visualizes board game data from BoardGameGeek, plotting over 300 games by user ratings, complexity, rank, and other attributes across selectable axes. Users filter the five primary game domains and ten mechanics through toggle buttons, while points are color-coded by domain or numeric attributes using either standard or colorblind-safe palettes. The visualization also supports switching between scatterplot and sparkline views, with React managing the UI state and d3.js handling scales, axes, and SVG rendering through modular helper functions. Filters apply dynamic data subsetting, and hovering highlights specific game categories for comparison.

112jack812@gmail.com

71% match

Loading thumbnail…

Week 12 Board Game Visualization Schnair

This interactive visualization explores a dataset of board games, showing how each game relates across user-chosen axes such as BGG rating, complexity, and play time. Users can filter games by domain and mechanics, switch between scatterplot, sparkline, and bar chart views, and toggle color schemes for categorical or sequential data. The visualization is built with React and D3 v7, using `scaleLinear`, `scaleOrdinal`, `scaleSequential`, and `axisBottom`/`axisLeft` for rendering. Data is loaded from a semicolon-delimited CSV and filtered dynamically based on user selections.

112jack812@gmail.com

71% match

Loading thumbnail…

ice 7 scatter

This scatter plot visualizes video game sales data, displaying each game as a circle positioned by sales volume and unit price, with color encoding the item category and a tooltip revealing the exact sale amount on hover. The visualization is built with the Vega-Lite API, using its `markCircle` and `encode` methods to map fields from the Iris dataset, and renders interactive tooltips through the vega-tooltip `Handler` class.

SSaiSree0122

71% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses Vega-Lite API to plot a scatterplot of college football team data, mapping four-year average recruiting points on the x-axis and average points per game on the y-axis. Circle size encodes scoring average, and tooltips reveal team names. It loads CSV data from a GitHub gist via d3.csv, configures chart appearance in a separate config object, and renders interactively with vega-tooltip. The Vega-Lite chart is built programmatically through vl.markPoint, vl.x, vl.y, and vl.r encodings, then rendered as SVG.

BBenLeathers

70% match

Loading thumbnail…

Fork of Videogame sales (Platform v/s Global Sales)

This visualization plots global sales of video games against gaming platforms using a circular scatterplot. Each circle’s position encodes the platform on the y-axis and the game’s global sales on the x-axis, with opacity used to show overlapping points. The chart uses Vega-Lite and the vega-lite-api to construct the markCircle encoding, while d3.csv loads the Videogame Sales dataset from a GitHub gist. Tooltips display game names on hover. The visualization is rendered as an SVG, with config.js customizing axes and text styling.

Ppemmasaniprudhvinadh

70% match