Fork of Fork of Making a Bar Chart

100%

Fork of Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited May 3, 2023

Created on May 2, 2023

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

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

82% match

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

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

79% match

Loading thumbnail…

Customising Axes

This example shows current Premier League standings as a horizontal bar chart, with teams sorted by points and a custom-styled axis layout. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. The code removes default tick lines and domain paths for the y-axis, adds rotated titles, and uses CSS classes to style tick text and axis labels. The SVG rendering loads data from a CSV file.

Bbenholvey

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

77% match

Loading thumbnail…

d3js workshop - bar chart

A horizontal bar chart displays Premier League football teams' total points, with each bar's length proportional to the team's PTS value and an overlaid text label showing the exact number. Built with D3.js v3, the chart reads team statistics from a CSV file and renders as SVG rectangles, using a linear scale (d3.scale.linear) mapped to the bar widths and groups positioned vertically via translation transforms. The example demonstrates basic data loading, scaling, and SVG shape creation for workshop purposes.

LLelandCurtis

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