Skip to main content
SimilarExport ZIP
100%

Premier League Interactive

✓ Published0🌍 Public
FFootyNumb3rs
Last edited Sep 7, 2018
Created on Sep 7, 2018

Premier League Interactive is an SVG-based data visualization that lets users explore football league standings across multiple competitions, including the Premier League, La Liga, Serie A, and the Bundesliga. Built with D3 v4, it renders sortable league tables from CSV data and animates row transitions when reordering by statistical columns such as points, goals, or goal difference. Hovering over league selectors highlights the menu and swaps datasets with smooth animated transitions, while the minimalist grey interface and custom typography keep the focus on the data.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Premier League Interactive

This interactive visualization presents Premier League standings with a focus on league tables and match data. Built with D3 v4, it renders an SVG-based table that displays team statistics such as position, points, goals for/against, and goal difference. Users can click on column headers to dynamically sort the table, triggering smooth transitions that reorder rows. The visualization also includes a league selector, allowing viewers to switch between the English Premier League, La Liga, Serie A, and the Bundesliga, with the table updating accordingly. Hover effects highlight menu items, and the design uses a clean, minimal aesthetic with subtle color scaling for numerical columns.

FFootyNumb3rs
96% match
Loading thumbnail…

Premier League Interactive

This interactive visualization presents football league tables and match data across multiple European leagues, including the Premier League, La Liga, Serie A, and the Bundesliga. Users can switch between leagues via clickable headers, which triggers a smooth D3 v4 transition that reorders table rows by position. The table is rendered as SVG with dynamic highlighting and filtering, while a subtle animation effect repositions teams when sorting by different columns. The visualization is built with D3.js and includes custom styling with Google Fonts, with team crests and match data displayed in an interactive, sortable table format. The color scheme uses a light grey background with black text and interactive elements that highlight on hover.

FFootyNumb3rs
95% match
Loading thumbnail…

d3js workshop - animated bar charts

This animated bar chart visualizes the English Premier League standings as of February 2015, showing each team’s points and wins. Built with D3.js v3, it renders an SVG bar chart where bar lengths correspond to points, while bar colors and circular markers encode win counts on a blue-to-red scale. Clicking a bar or circle triggers a transition (via `transition.attrTween`-style updates) that switches the displayed metric, with text labels and tooltips revealing team names. The visualization reads data from a CSV file and uses `d3.scale.linear` for both position and color, with all elements rendered as SVG shapes.

BBillyBHWong
79% match
Loading thumbnail…

d3js workshop - bar chart

This bar chart visualizes the English Premier League standings as of February 2015, showing each team’s total points. Using d3.csv to load the league table, it maps team names to horizontal bars whose widths are scaled linearly to the PTS column. The SVG rendering places team point totals at the end of each bar, with a fixed bar height and padding for clarity. The code relies on d3.scale.linear for the x-axis scale and d3 selection/enter/append patterns to construct the chart, though it does not include axes, labels, or interactivity beyond the static bars.

AAlbertFranco
76% 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
75% 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
75% match
Loading thumbnail…

d3js workshop - bar chart

This bar chart visualizes the Premier League standings as of February 2015, showing each team’s total points as horizontal bars. It displays only the points data, omitting team labels entirely. The visualization uses D3.js v3 to load the CSV data, applies a linear scale (`d3.scale.linear`) to map points to bar width, and renders the chart as SVG rectangles with text labels showing the point values at each bar’s end. The bar height is fixed, with spacing between bars via padding.

BBillyBHWong
74% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the final Premier League standings, plotting each team’s points total along the x-axis against team names on the y-axis using a categorical scale. It uses d3.csv to load the data, d3.scaleLinear for the point values, and d3.scalePoint for team ordering, with axes from d3.axisLeft and d3.axisBottom. Circles are rendered via SVG, with gridlines generated through tickSize, and margin-based positioning via a translated group.

Bbenholvey
74% match