D3 Starter

100%

✓ Published0🌍 Public

Last edited Aug 25, 2021

Created on Aug 24, 2021

This visualization displays the top Dutch football (soccer) scorers, comparing the number of matches played versus goals scored for each player. The chart renders as an SVG with a dark slate background, gold rectangles for bars, and old lace-colored text and axes. It is built using React with D3 v6 functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate the axes. Data is loaded asynchronously from a CSV file named `topscoorders.csv` using D3's `csv` method, and the visualization updates accordingly.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This example displays a bar chart of the top ten goal scorers for the Netherlands national football team, with player names on the y-axis and goal counts on the x-axis. The visualization uses D3 v5 to parse a CSV string with `csvParse`, transform the data, and render gold bars against a dark slate background. The chart includes styled axes, tick labels, and a title, all formatted via external CSS. The data originates from a hardcoded CSV in the source files, and the SVG rendering is handled entirely by D3’s standard plotting functions.

Rries62

81% match

Loading thumbnail…

Fork of Bar Chart

A forked bar chart displays the all-time top ten goal scorers for the Netherlands national football team, with player names and goal counts loaded from inline CSV data. The visualization uses D3 v5 to render gold rectangles on a dark background, with large axis labels and tick marks styled in oldlace. It applies function composition through `Array.reduce` to process data transformations, though the chart itself shows a straightforward categorical comparison of player totals.

Rrichard.adamson@hotmail.com

79% match

Loading thumbnail…

Data viz of 2018 football top scorers

This interactive scatter plot visualizes data on the top football scorers of 2018, comparing the number of goals scored against matches played. The data is filtered to show only players from La Liga, Serie A, and Bundesliga. Player names are revealed on hover, while the color of each point indicates the league, and the point size encodes the average shots per match. Built with React and D3 v5, the visualization uses D3's `scaleLinear` for the axes, `scaleSqrt` for sizing, and `scaleOrdinal` with `schemeCategory10` for the categorical color legend.

NNwaegerue Chinemerem

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

78% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows football statistics as a line chart, plotting goals scored against matches played for a dataset loaded from a CSV file. The chart uses D3 v6’s `scalePoint` for the x-axis (matches played) and `scaleLinear` for the y-axis (goals), with a line generator drawing the trend. Axes are rendered via `axisLeft` and `axisBottom`, while the SVG is created and manipulated with `select` and `append`. The data, sourced from a remote CSV URL, is parsed to numeric values before rendering, and the final line is styled with a steelblue stroke.

Ssujitrayudu01@gmail.com

76% match

Loading thumbnail…

Fork of Soccer Scatter Plot

This scatter plot visualizes top football league scorers from 2018, plotting goals against shots for individual players. The visualization uses D3 version 7.8.5, employing `scaleLinear` for both axes, `axisLeft` for the y-axis, and custom axis label components from `@curran/axis-labels`. Circles represent players, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a switch statement, with opacity and radius set to fixed values. The code filters data by year and uses `observeResize` from `@curran/responsive-axis` to handle responsive dimensions.

Eeschuman20@gmail.com

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

75% match

Loading thumbnail…

data

This visualization displays the top 11 popular sports in 2021 as a horizontal bar chart, using a purple bar for each sport whose length corresponds to the number of matches played that year. The chart loads data from a CSV file using `d3.csv` and renders SVG elements through React components. It uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and custom tick rendering for both axes. The page includes a title and uses React hooks like `useState` and `useEffect` to manage data loading.

SSaiSree0122

75% match