Skip to main content
SimilarExport ZIP
100%

VCtAxes

✓ Published0🌍 Public
Ddaniel
Last edited Jan 5, 2024
Created on Jan 4, 2024

This example presents a two-panel visualization of Valorant Champions Tour player statistics from a CSV dataset. A horizontal bar chart compares performance metrics for different agents, while an animated scatter plot shows the correlation between selected metrics, such as kills, deaths, and assists. Interactive dropdown menus let users switch the metric displayed in the bar chart and choose which variables to plot on the scatter plot's X and Y axes. The visualization uses D3 v7 with ES6 modules, including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `transition().duration()` for the animated circles.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Customizing Axes

This example presents an interactive analysis of agent performance metrics from Valorant esports match data, displayed through a bar chart and scatter plot. Users can dynamically change the metric displayed on each chart using dropdown menus. The visualization is built with D3 v7, utilizing `scaleLinear` and `scaleBand` for the bar chart and `scaleLinear` with `extent` for the scatter plot. Data is loaded from a local CSV file and rendered as animated SVG circles and rectangles.

Ddaniel
84% match
Loading thumbnail…

preprocess

This interactive dashboard visualizes Valorant player statistics with a bar chart and animated scatter plot. Users can switch the bar chart metric and select X/Y axes for the scatter plot via dropdown menus built with D3 selections and a custom ES6 module. The bar chart uses d3.scaleLinear and d3.scaleBand to display agent comparisons, while the scatter plot uses d3.scaleLinear domains, d3.axisBottom, d3.axisLeft, and transition delays for animated circles. Data is loaded from CSV files using d3.csv, with SVG rendering.

Ddaniel
83% match
Loading thumbnail…

VCT 2023

This interactive dashboard explores statistics from VCT 2023, offering dropdown menus to switch between viewing data aggregated by agent, map, or player. It displays scatterplots of selected attributes like KD ratio, pick rate, and headshot percentage, alongside bar charts and a pie chart for win rate. Built with D3 v4, the visualization uses dynamic SVG rendering, transitions, and tooltips to show detailed values upon hover. The code demonstrates importing D3 modules for scales, axes, and dropdown menus, plus custom ES6 modules for scatterplots and menu handling.

Ddaniel
81% match
Loading thumbnail…

Fork of VCT 2023

This interactive visualization explores VCT 2023 esports statistics across agents, maps, and players. Users can switch between datasets via dropdown menus, adjusting bar chart columns and scatterplot axes for the agent data. The bar plot displays sorted metric values, while scatterplots show correlations between chosen attributes with tooltips on hover. A correlation matrix option replaces the scatterplot for agents. The visualization uses D3 v4 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `dropdownMenu`, rendering SVG with animations, with data loaded from CSV files.

Ddaniel
81% match
Loading thumbnail…

Fork of Customizing Axes

This visualization presents a comparative analysis of player performance in a gaming context, featuring both a bar chart and an interactive scatter plot. The bar chart displays aggregated performance metrics per agent, while the scatter plot allows users to explore correlations between different statistics like kills, deaths, and assists. Users can dynamically switch which metric is displayed on the bar chart and both axes of the scatter plot via dropdown menus. The visualization is built using D3 version 7, leveraging APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements and manage the interactive updates. The data is loaded from CSV files containing player match statistics.

Ddaniel
81% match
Loading thumbnail…

Fork of Fork of Customizing Axes

This dashboard lets users explore player statistics from professional VALORANT matches through interactive bar and scatter plots. Using D3.js v4, it loads match data via `d3.csv` and renders SVG charts with animated transitions. Dropdown menus allow switching between metrics like KD, kills, and win rate for both visualizations. The scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for point colors, while the bar chart sorts agents by the selected metric.

Ddaniel
80% match
Loading thumbnail…

preprocess

This interactive D3.js dashboard lets users explore esports performance data through dropdown menus that switch the dataset displayed, comparing agents, maps, and players. It shows scatter plots of selected metrics (e.g., K/D ratio vs. pick rate) and bar charts, with animated transitions on data changes. The example uses D3 v7 APIs like `scaleLinear`, `axisBottom`, and `transition().duration()`, along with local ES6 modules for reusable plotting and dropdown components. Data comes from CSV files loaded via `d3.csv`.

Ddaniel
75% match
Loading thumbnail…

Data Visualization with D3

This example displays a bar chart of categorical data from a CSV file, comparing numeric values across named categories. The visualization uses an SVG canvas with axes, mapping the data's numeric values to horizontal bar lengths and category names to vertical positions. The implementation relies on D3 v5 utilities for data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis generation with `axisLeft` and `axisBottom`, while the chart is rendered as SVG rectangles within a React-based HTML page.

Ssvensonneveld
72% match