Bump Chart (Major League Soccer v3)

100%

Bump Chart (Major League Soccer v3)

✓ Published0🌍 Public

Last edited Apr 23, 2017

Created on Apr 23, 2017

This visualization uses a bump chart to show the final league position of Major League Soccer clubs for each season from 1996 to 2016. Lines connect each club’s yearly rank, while points at each season encode data. Hovering a point highlights that club’s entire trajectory and reveals a tooltip with season statistics, and clicking a point keeps the focus. The chart is built with D3 v4, using `d3.line`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG paths and circles. The underlying data was scraped from the MLS website and includes club name, year, points, win/loss/tie records, and goals for and against.

AI-generated description

Major League Soccer season data (2005 - 2016)

Another riff on http://bl.ocks.org/cjhin/11ffe8165207693d513ad67f85d43251

This version uses d3 lines + d3 circles/points to create something similar to a bump chart.

How To:

Hover over a point to view data for that club/season.
Click on a point to highlight all data points for that club.

Sources:

Data scraped from http://www.mlssoccer.com/standings/mls
Most colors are from http://teamcolors.arc90.com/

forked from <a href='http://bl.ocks.org/cjhin/'>cjhin</a>'s block: <a href='http://bl.ocks.org/cjhin/b7a5f24a0853524414b06124c559961a'>Bump Chart (Major League Soccer v3)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Bump Chart (Major League Soccer v3)

This bump chart visualizes Major League Soccer standings from 2005 to 2016, using the D3.js v4 library to render lines and points in an SVG. Each club is represented by a colored line tracking its yearly ranking, with team colors sourced from teamcolors.arc90.com and data scraped from MLSSoccer.com. Hovering over a point reveals the club’s stats for that season, while clicking a point highlights every data point belonging to that club across all years. The chart uses d3 lines and circles to create the bump-chart effect, with a legend and year labels for orientation.

663anp3ca

95% match

Loading thumbnail…

Bump Chart (Major League Soccer v3)

663anp3ca

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

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

72% match

Loading thumbnail…

d3js workshop - animated bar charts

This example shows an interactive animated bar chart of 2015 Premier League standings, with each team’s points displayed as the bar length and colored by number of wins. Below the chart, a row of circles duplicates the same color encoding, and clicking either a bar or circle triggers a D3 update that transitions the bar widths and colors to reflect wins instead of points. Built with d3.v3, it uses d3.csv to load the data, d3.scale.linear for positioning and color, and SVG elements with event listeners for the interaction.

NNate-Holland

72% match

Loading thumbnail…

d3js workshop - animated bar charts

This interactive bar chart visualizes the English Premier League standings as of February 21, 2015, showing each team's points and win totals. The visualization uses a horizontal bar chart where bar lengths represent points, while bar colors encode win counts on a blue-to-red scale. Users can click either the bars or the circular markers above to toggle the displayed metric between points and wins, with smooth animated transitions updating the bar widths. The code uses D3 v3 with SVG rendering, employing linear scales, CSV data loading via `d3.csv`, and click-event handlers to drive the dynamic updates.

OOValdivia110

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

71% match

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

71% match