Skip to main content
SimilarExport ZIP
100%

Bump Chart (Major League Soccer v3)

✓ Published0🌍 Public
663anp3ca
Last edited Oct 31, 2018
Created on Oct 31, 2018

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.

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:

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
100% 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
74% 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
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…

Ch 3

A React and D3.js visualization presents soccer team statistics from a CSV file as a scatterplot-style chart. Each team is represented by a circle, with the team name labeled beneath it. D3 loads the data and binds it to SVG circle elements, while a control panel generates buttons for each numeric column. Clicking a button uses `d3.scaleLinear` to remap the circle radius based on that stat, such as wins or points, allowing dynamic comparison across teams.

YYasara Peiris
71% match
Loading thumbnail…

d3js workshop - bar chart

This example shows a horizontal bar chart of English Premier League standings, with each bar’s length representing a team’s total points and its color encoding the number of wins. The chart is rendered as SVG using D3 v3, reading team data from a CSV file via `d3.csv`. A linear `d3.scale.linear` maps points to bar widths and a second linear scale maps wins to a blue-to-red color range. Each bar is a `<rect>` inside a `<g>` group, with a text label showing the points value and a `<title>` element for hover tooltips.

BBillyBHWong
71% match
Loading thumbnail…

Gist 45a6ae045cfccdc8c2e66ea43963e225

This visualization shows shot differentials for NHL games in the 2017-2018 season, with each game displayed as a small sparkline-style chart. The interactive team selector filters games by team. The charts are generated with d3.v4, using `d3.scaleLinear` for axes, `d3.line` for the score lines, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data comes from CSV files containing play-by-play shots and goals, rendered as SVG with hover effects.

MMbrownshoes
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