Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published2🌍 Public

Last edited May 4, 2023

Created on May 2, 2023

This interactive bar chart shows Premier League team transfer spending (incoming fees) for a selected season, with teams ordered alphabetically or by final league position. Users toggle between seasons and transfer types via dropdown menus, which trigger re-rendering with D3’s `scaleBand` and `scaleLinear`. The SVG chart loads data from a local CSV file using `d3.csv`, with axes formatted via `axisLeft` and `axisBottom`. Bars update dynamically as selections change, displaying transfer totals in euros.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Making a Bar Chart

This example visualizes Premier League team transfer spending across seasons. A dropdown selects the season or the average, and a second dropdown toggles between transfer-in and transfer-out values. The horizontal bar chart sorts teams by name, with bar lengths encoding the monetary amount and bar colors assigning a unique color per team via `d3.scaleOrdinal`. The visualization updates by filtering the loaded CSV data and redrawing SVG rectangles using `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`.

JJonathan Taylor

93% match

Loading thumbnail…

Fork of Fork of Making a Bar Chart

A horizontal dot plot displays the average league position for 15 Premier League teams in 2018, from Chelsea to Fulham. The chart uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG, with circle marks sized at a fixed radius. The x-axis tick format abbreviates values using `format`, while the underlying data is loaded from a CSV file.

JJonathan Taylor

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

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

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

77% match

Loading thumbnail…

Barchart-d3

A bar chart displays the ages of Premier League footballers from a CSV file, with a dropdown menu to switch between goals and age attributes. The visualization uses D3 v5's `scaleBand` and `scaleLinear` to position bars, `axisLeft` and `axisBottom` for axes, and SVG rectangles. Hovering triggers a fill change to orange, a thick stroke, and a temporary text label showing the numeric value, with transitions animating the mouseout state. The data source is `data.csv` with player statistics.

PpramodK

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

77% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the net worth of the top 8 most valuable football clubs, using data from a CSV file that is loaded and parsed with the `csv` method. The visualization customizes D3 axes by removing domain lines and tick lines from the y-axis, applying a tick format to the x-axis, and adding axis labels. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements, with the x-axis showing values in billions.

TTomislav Pezer

76% match