zycbydxgs@gmail.com

@AokidY·3 public vizzes

Fork of Goals Scatter Plot with Hover

This fork of a goals scatter plot uses D3 to visualize top football league scorers from a Kaggle dataset, filtering the data to the year 2018. It shows the relationship between goals scored and shots taken, with each circle representing a player, colored by their league. Hovering over a circle enlarges it and displays the player’s name via a tooltip. The chart uses `scaleLinear`, `extent`, and `select` from D3, along with the `axes` and `observeResize` utilities, to render responsive axes and a fixed-size plot area.

Mar 17, 2024

Loading thumbnail…

D3 Scatter Plot Mine

This example demonstrates a scatter plot rendered as an interactive minefield, where each point represents a potential hazard. The visualization uses D3 v7 and React to manage the rendering and state. The page plots data points on a coordinate grid, with interactions tied to the `d3.forceSimulation` and `d3.scaleLinear` APIs to position and scale the points. The code relies on standard SVG elements and CSS for styling, while the simple starter structure shows how D3 integrates with a React component. The underlying data is static, with no external dataset loaded.

Feb 20, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape elements rendered directly in a browser. It shows circles, a rectangle with a stroke, a line, and a path, each with explicit coordinates and styling attributes. The visualization uses raw SVG markup within an HTML page, specifying properties like fill, stroke, and stroke-width inline. No JavaScript or external libraries are involved, relying solely on the SVG API to display static vector graphics on a 960 by 500 canvas.

Feb 20, 2024