Fork of Fork of Customizing Axes

100%

Fork of Fork of Customizing Axes

✓ Published3🌍 Public

Last edited Jan 4, 2024

Created on Jan 4, 2024

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.

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

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

91% match

Loading thumbnail…

VCtAxes

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.

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…

Fork of 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.

Ddaniel

80% match

Loading thumbnail…

Fork of Customizing Axes

A bar chart displays student scores from a CSV file, ranking each student on a vertical band scale against a linear grade axis. The visualization customizes axes by removing default domain lines, adding grid lines, and applying a formatting function that converts large numbers to abbreviated labels using D3's `format`. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars with styled ticks and titles.

TtreasurehunterAP

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

78% match

Loading thumbnail…

Customizing Axes

This visualization uses a horizontal bar chart to display the critic ratings of 25 popular video games, sourced from a Kaggle dataset. The chart emphasizes custom axis styling, including formatted tick labels on the x-axis, removed y-axis gridlines, and custom labels. The code uses D3 v5 APIs, including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, to create the layout and custom axes. The SVG rendering is styled with a custom font and color scheme.

EEmma Schaale

77% match