InfoVis - Assignment 2

100%

InfoVis - Assignment 2

✓ Published1🌍 Public

Last edited Aug 15, 2023

Created on May 17, 2023

This parallel coordinates chart visualizes the performance of FC Barcelona players across a vast array of match statistics, with each polyline representing a single player's season. The visualization includes a brush tool for filtering data on specific axes, and double-clicking an axis label re-colors all lines based on that metric. Built with D3.js v7, the SVG chart animates line paths and uses `d3.brushY`, `d3.scalePoint`, `d3.scaleLinear`, and `d3.interpolateSpectral` to handle interactive brushing, axis scaling, and color encoding.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

InfoVis - Assignment 2

This example shows a parallel coordinates plot of FC Barcelona player statistics from a football.json dataset, with each player represented as a polyline connecting their values across multiple performance attributes such as goals, assists, and pass accuracy. The visualization uses D3 v7 with a custom SVG implementation rather than the d3-parallel-coordinates library loaded in the HTML, manually constructing axis scales with d3.scaleLinear and d3.scalePoint, and rendering polylines via d3.line. Red strokes and small circles mark each player’s trajectory across the axes.

Llili463e

93% match

Loading thumbnail…

Parallel Coordinate Chart

This parallel coordinate chart visualizes player performance metrics across eight dimensions, including distance, sprinting time, and work-to-rest ratio, with each polyline representing an individual player. The D3 v4 code uses `d3.scalePoint` for horizontal axis placement, `d3.scaleLinear` for each vertical dimension, and `d3.brushY` to enable interactive filtering by dragging along any axis. Inactive lines render in light gray while selected regions highlight active paths in blue via CSS classes, with data displayed as static SVG elements.

JJanchorizo

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

71% match

Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot visualizes top football league scorers using D3.js, letting users explore relationships between performance metrics like goals, shots, expected goals (xG), and minutes played. Three dropdown menus allow selection of the x-axis variable, y-axis variable, and season year (2016–2020). The chart renders circles colored by league, with player labels on hover and a color legend that supports filtering by league via click, with double-click to clear. All visual elements—including axes, scatter points, and legend—update in response to user input, creating a dynamic, animated exploration of the dataset. The visualization is built with D3 v7 and is responsive to container resizing.

Eeschuman20@gmail.com

71% match

Loading thumbnail…

Test2

This interactive scatter plot visualizes player attributes from the FIFA19 English Premier League dataset, allowing users to compare quantitative metrics like Potential, Overall, Dribbling, and Acceleration via dropdown menus for both x and y axes. Built with D3 v6, it uses `scaleLinear` for quantitative axes and `scalePoint` for categorical positions, rendering circles with SVG and animating transitions using the `transition` API. The visualization updates smoothly with a 1000-millisecond duration, using data fetched from a GitHub gist.

SSitanshu Rupani

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

70% match

Loading thumbnail…

Untitled

A stacked bar chart displays percentages for ten soccer match statistics, such as shots, possession, and passes, with two contrasting categories compared per category. Built with D3 v7 and SVG, the visualization uses `d3.stack()` to compute the stacked layout and `d3.scaleLinear` for the percentage axis. Bars animate sequentially using `d3.transition()` with staggered delays and an `easeLinear` timing. The chart omits axis labels and draws category names as text elements placed manually via a loop.

CCasado7

70% match

Loading thumbnail…

Barchart-d3

This interactive bar chart displays goal and age data for ten Premier League players, sourced from a CSV file. Users can switch between these two attributes via a dropdown menu. The visualization uses D3 v5 scaleLinear and scaleBand for axes and bars, with a color legend driven by scaleSequential and interpolatePlasma. Hover interactions highlight bars in orange and display the numeric value overlaid as text, with a transition animation on mouseout reverting the fill.

Ssonalja

70% match