Lollipop Chart: 2008-2012

100%

Lollipop Chart: 2008-2012

✓ Published0🌍 Public

Last edited Nov 16, 2022

Created on Nov 2, 2022

This interactive lollipop chart displays four football statistics—Goals, Goals Conceded, Titles, and League Points—for the years 2008 through 2012. Clicking a button triggers the `update` function, which transitions the vertical lines and circle markers to new values using animated `transition` calls on SVG elements. The chart reads tabular data from a remote CSV file via `d3.csv` and scales axes dynamically with `d3.scaleBand` and `d3.scaleLinear`. Rendering is entirely SVG-based, with axis and glyph transitions handled through D3's selection and merge operators.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

reusable roughjs ordinal lollipop

This lollipop chart displays salary, age, and experience for football players in the Swedish Allsvenskan league, with salary on a linear y-axis and years on a categorical x-axis, while circles encode experience using a square-root scale. The visualization uses the Rough.js library to render hand-drawn, sketch-like SVG elements, and D3 v4 for scales, axes, and layout. Data is sorted by year in descending order, with a legend, axis titles, and a subtitle explaining that experience is not the decisive factor.

PPatrick Wojda

75% match

Loading thumbnail…

Untitled

This visualization displays a lollipop chart of numeric values by country, using vertical teal lines topped with magenta circles to represent each data point. The chart loads CSV data from a GitHub repository, then renders an SVG with D3.js version 6.6.1 within a React framework. It uses `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `axisBottom` and `axisLeft` to generate rotated tick labels and gridlines.

Ssubratanp

70% match

Loading thumbnail…

Connected Scatterplot: Playstyle Change

This example shows how a soccer team’s passing playstyle changed over time, allowing viewers to compare four pass-related statistics across months. A connected scatterplot displays the trend as a line with circular markers, and a dropdown menu lets users switch between metrics, triggering a smooth 1-second transition of the line and dots. The visualization uses d3.csv to load external data, d3.scaleBand and d3.scaleLinear for axes, and d3.line with selection.transition to animate the updated path and circles in an SVG.

SSimon Hackbert

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

69% match

Loading thumbnail…

Fork of Bubble Chart in D3

This bubble chart compares Lionel Messi’s goals and assists across seasons from 2004 to 2022, with each circle sized by the square root of goals and colored by year. It uses d3.csv to load the data, d3.scaleLinear for axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal for color mapping. The SVG rendering includes axis labels and hover effects that alter circle strokes.

EEunice Tu

69% match

Loading thumbnail…

Population Lollipop Chart

This chart displays the populations of the ten most populous countries using a lollipop-style visualization, where each country is represented by a circle positioned along a linear population scale and connected by a line to a common baseline. The data comes from a CSV file, with populations multiplied by 1,000 for accuracy. Built with D3 v5, it uses `scaleLinear` and `scalePoint` for axes, rendered as SVG with `axisBottom` and `axisLeft`, and formatted tick labels via `format('.3s')` to abbreviate large numbers.

Ffbudwill

69% match

Loading thumbnail…

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

69% match

Loading thumbnail…

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

68% match