Fork of Fork of Making a Bar Chart

100%

Fork of Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited May 4, 2023

Created on May 4, 2023

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`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making a Bar Chart

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.

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

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

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

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

75% match

Loading thumbnail…

Fork of HTML Starter

This visualization presents a grouped bar chart of Champions League team statistics, comparing goals scored, matches played, and wins for each team. The code loads a CSV dataset from a GitHub gist, aggregates the data using d3.rollup and d3.sum, and renders three colored bars per team using SVG rectangles. D3 v7 handles the scales, axes, and legend, with x-axis labels rotated for readability. The chart uses d3.scaleBand for categorical positioning and d3.scaleLinear for the numeric y-axis, providing a clear side-by-side comparison of these metrics.

BBALAJI MANDAVA

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

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

75% match