Ch 3

100%

✓ Published0🌍 Public

Last edited Jul 27, 2020

Created on Jul 27, 2020

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.

AI-generated description

Smiley face implementation with React & D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive visualization uses D3.js v7 to display World Cup team statistics from a CSV file as circles arranged in a row, with team names labeled beneath each circle. A control panel presents buttons for different data attributes such as wins, losses, points, and goals, and clicking a button uses `d3.scaleLinear` to map that attribute’s value to the circle radius via `.attr("r", ...)`. The circles initially render at a fixed size, then resize dynamically based on the selected metric, with CSS classes styling active and inactive states.

Nnicolekevans

81% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example adapts a reusable D3 scatter plot to visualize soccer statistics, cycling through three different variable pairings every three seconds. It uses `d3.csv` to load a dataset containing goals for and against, wins, draws, losses, and points. The animation smoothly updates the plot's axes and circle positions by re-binding data and calling `axisLeft` and `axisBottom` within a setInterval loop. The SVG circles are rendered with a fixed radius, and the chart adjusts to the full window size.

Nnagasai.mandalapu@gmail.com

80% match

Loading thumbnail…

D3.js in action - Section 1 - Ch 3

This example visualizes World Cup team statistics across multiple metrics, with each team represented as a circle positioned along a horizontal axis. Clicking a button adjusts the circle radii and fill colors to reflect the selected attribute, while hovering highlights teams from the same confederation. The visualization uses D3.js v6 with SVG transitions to animate changes, and employs scales such as `d3.scaleQuantize` and `d3.scaleLinear` to map data values to colors and sizes, with color interpolation via `d3.interpolateHsl`. Data comes from a CSV file containing team performance records.

AAlbert

79% match

Loading thumbnail…

D3 Chart with CSV Data

This example visualizes hierarchical data from a CSV file, plotting `team_score` values for each `team_name` as horizontal bars. The bar chart initially presents a top-level overview, with the ability to drill down into nested categories. The code uses D3 v6 APIs including `create`, `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, `csv`, and `hierarchy` to load external CSV data, construct the scales, and build the interactive, drillable bar chart. The rendering is done via an SVG container, with axes drawn on the left and bottom margins.

NNyashaBradleymhepo

77% match

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading and visualizing a CSV dataset of bike availability from a GitHub-hosted file in a React application. It shows a scatterplot of randomly positioned circles, where each circle represents the total number of bikes available for a given hour, with the radius scaled by the summed value. The code uses React hooks (`useState`, `useEffect`) to fetch the data with D3’s `csv` method and `d3.rollups` to aggregate the dataset by date-hour. The circles are rendered as SVG elements, with random opacity and positions, displaying the processed data directly.

MManon ROMAIN

76% match

Loading thumbnail…

Viz_9

This interactive scatter plot displays FIFA player statistics across six national teams (ARG, BRA, ESP, FRA, GER, ITA), letting users compare any two attributes via dropdown menus. The visualization uses React with D3 v5 scales (d3.scaleLinear) to map data to SVG circles, with tooltips showing x-values. Data loads from a CSV via d3.csv. Users can dynamically switch axes, and the plot renders with custom axis components and formatted tick labels using d3.format.

NNikithakatta30

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

76% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays football player statistics across six attributes (ARG, BRA, ESP, FRA, GER, ITA) from a FIFA dataset. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with react state managing the selection. The code uses d3.scaleLinear for scales, d3.extent for domains, and d3.csv to load data, rendering circles as SVG marks with tooltips via the title element. Axis components generate ticks with tick formatting using d3.format.

NNikithakatta30

75% match