Histogram of ManCity 2022-2023 Goals Scored

Fork of ManCity 2022-2023 Results Line Chart

The chart visualizes Manchester City’s goals scored per match across the 2022–2023 season, using a black, stroke-only line over an SVG canvas. It loads match data from a CSV file and maps dates to the x-axis and goals to the y-axis via d3.scaleTime and d3.scaleLinear. The line is generated with d3.line, while React’s useState and useEffect manage asynchronous data fetching through d3.csv. The chart fills the browser window, with axes omitted to focus purely on the trend.

84% match

ManCity 2022-2023 Results Line Chart

The visualization displays Manchester City’s match-by-match goal scoring and conceding performance across the 2022–2023 season as a line chart rendered in SVG. Each point pairs goals scored against goals allowed per fixture, plotted chronologically by date, with the full viewport filled by a red background. The chart is built in React, using D3’s `csv` loader to fetch and parse a remote CSV file, converting numeric goal fields and date strings into proper types. The `LineChart` component receives this data and renders an empty SVG, while the app uses `useData` hook to manage asynchronous loading and display a loading message until data arrives.

84% match

Summarizing ManCity 2022-2023 Data

This visualization condenses Manchester City’s 2022-2023 season statistics into a single text summary, displaying the total goals scored, goals allowed, and the date of the most recent match. It fetches a CSV dataset scraped from The Fishy and reformats it with `d3.csv`, then uses `d3.map` and array methods like `reduce` to aggregate numeric columns. The final message is rendered in a large `<pre>` element via `document.getElementById`. The code highlights a synchronous loading pipeline with `d3.csv` and demonstrates summing columns for a concise performance recap.

81% match

Bar Chart: Goal Contributions

This bar chart displays total career goals and assists for individual players, with each bar growing upward in a staggered animation. The visualization overlays the chart on a scaled soccer field outline, complete with penalty areas, a center circle, and a halfway line. Built with D3 v4, the code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `transition()` with `.delay()` to animate bar heights. Data is loaded from a CSV file via `d3.csv`, and SVG shapes render the field markings.

SSimon Hackbert

Line Chart

This line chart visualizes the number of goals scored each match day across a season, using a simple stroke path to connect discrete data points. The chart reads from a CSV dataset with match day and goal counts, rendering as an SVG with scales for both axes. The code employs D3 v6 functions including `scaleLinear`, `line`, `extent`, `max`, and `axisBottom`/`axisLeft` to construct the plot. The visualization is built within a React-friendly structure, with axes and margins explicitly configured, and data parsed as numbers before rendering.

NNishadAhsan

Bar Chart: Goals

A bar chart compares total career goals for different footballers, with green bars animating upward in sequence from an initial zero position. The chart includes custom axes, rotated labels, and a football pitch overlay with field markings and penalty areas drawn behind the bars. It uses D3 v3 and v4 together, loading data from a CSV file, and relies on `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `selection.transition()` with duration and delay for the animated bar growth.

SSimon Hackbert

Fork of Loading and Parsing ManCity 2022-2023 Data

This example displays basic metadata about Manchester City’s 2022–2023 match results, showing the dataset’s size in kilobytes, row count, and column count in large text. It loads a CSV file from a GitHub gist using `d3.csv` and applies `d3.csvFormat` to measure the parsed data’s size. The data originates from The Fishy, reformatted with date adjustments. The visualization uses D3 v5 and renders the summary in a `pre` element, with commented-out alternatives demonstrating `fetch`, `async/await`, and callback-style parsing.