Skip to main content
SimilarExport ZIP
100%

Fork of preprocess

✓ Published1🌍 Public
Ddaniel
Last edited Jan 4, 2024
Created on Jan 4, 2024
Forked from preprocess

This interactive dashboard compares player performance across agents, maps, and individual players in a competitive FPS game. It presents three linked views controlled by dropdown menus: a bar chart, an animated scatter plot, and a pie chart. The visualization loads data from CSV files and uses D3 v7 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `pie`. The scatter plots use D3 transitions for animated point placement, and dropdown menus are built with a custom ES6 module.

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…

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
85% 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
83% 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
82% match
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
80% 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
80% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive dashboard displays sports statistics from a CSV file, offering four switchable D3 v7 visualizations. A scatter plot compares athletes' goals or points against their assists, color-coded by sport, while a pie chart shows the proportional share of players per sport. Line and area charts plot matches played against goals or points, with the area chart filling the space beneath the line. All charts are rendered as SVG and include interactive tooltips on data points, using d3.csv for data loading and d3.rollups for aggregation.

Ssandyman2109@gmail.com
76% match
Loading thumbnail…

Fork of Football Goal Scorers Dashboard

This interactive dashboard visualizes football player performance across European leagues, showing how metrics like goals, shots, and expected goals vary by league and season. It integrates a scatter plot, bar chart, line chart, and parallel coordinates plot, all driven by React state management. Users can filter data through dropdown menus, brush the parallel coordinates to filter players, and hover over marks for details. The visualization leverages D3’s `scaleLinear`, `scalePoint`, `brushY`, and `transition` APIs, rendering animated updates from a Kaggle dataset of top league scorers.

AAamir Hameed mir
74% match
Loading thumbnail…

Fork of Project

This dashboard presents FIFA player statistics, allowing users to filter by nationality through a dropdown menu. It displays summary metrics like total players, average overall rating, and total clubs, alongside multiple D3.js charts: a bar chart of top clubs by average overall, a pie chart for club value, an age histogram, and a wage-versus-potential bubble chart. The visualizations are built with d3.v7, using APIs like `d3.csv`, `d3.rollups`, `d3.scaleBand`, and `d3.scaleLinear`. Data is fetched from a remote CSV file, and rendering is done via SVG with a tooltip for interactivity.

Kkrishi7079@gmail.com
73% match