Andreas Papastergiou

@AndreasPapastergiou·4 public vizzes

Swarm Plot

A swarm plot visualizes the transfer fees of football players, grouped by their position on the pitch. The data, sourced from a CSV file, shows each player as a circle colored by position, with the vertical axis mapping the fee in millions. This implementation uses D3 v5 to load the data and render SVG circles, with an ordinal scale for horizontal positioning and a linear scale for the vertical fee axis. The code assigns colors using `d3.scaleOrdinal` with the `schemePaired` color palette.

Aug 23, 2021

Loading thumbnail…

Customising Axes

This visualization displays the top 10 most expensive football transfers, using a horizontal bar chart where bar lengths correspond to transfer fees in euros. The chart demonstrates custom axis styling with d3-format’s `.format('.3s')` for tick labels, while removing default domain lines and tick marks from both axes. The y-axis uses `scaleBand` for player names, and a custom title and axis label are appended as SVG text elements. Data loads from a CSV file using d3.csv, with fees parsed as numbers.

Aug 16, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face. A yellow circle with a black stroke forms the head, while two smaller circles serve as eyes, and a path drawn with `d3.arc()` creates the mouth. The eyebrows, rendered as rectangles, move up and down repeatedly using chained `transition().duration()` calls, animating their `transform` attributes over two-second intervals. The scene uses an SVG canvas and relies on D3 v5.9.2 for element selection, creation, and animation.

Aug 14, 2021

Loading thumbnail…

Let's make a face

This example renders a simple cartoon face using SVG shapes. A yellow circle forms the head, while two black circles serve as eyes, all positioned relative to the SVG’s width and height attributes. The code uses D3 v7’s `select` and `arc` (though only `select` is exercised) to append and style the elements. The face is drawn statically without interaction, demonstrating basic D3 selection and SVG attribute manipulation in a React-compatible bundle.

Aug 14, 2021