Gavin Sykes

@gavinsykes·4 public vizzes

Fork of D3 Starter

This example displays a scatter plot comparing programming language performance on Project Euler problems, with user-selectable axes, filter options, and animated transitions. It loads CSV timing data and color mappings from GitHub repositories, then visualizes results as colored circles that animate to new positions when the dataset changes. The visualization uses a custom surrounding-layout system that automatically positions titles, subtitles, axes, and legends within an SVG canvas. Built with D3 v7, the code leverages `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, `d3.transition`, and dynamic menu-driven data selection through reusable chart components.

Jan 2, 2022

Loading thumbnail…

WC Data Viz

This visualization presents World Cup goal totals for national teams, combining a brief bar chart preview of the top nine countries with a compact table listing all remaining teams. The bar chart uses a simple SVG rectangle appended to the page, while the table groups countries with identical goal counts into single rows. Built with React and D3 v6, the code uses `d3.select` to manipulate the SVG and table elements, and the data is sourced from a local `data.js` file. The table displays goals and country names, with hover effects enlarging rows via CSS.

Apr 9, 2021

Loading thumbnail…

Displaying a Title, Subtitle and Legend on an SVG Visualisation

This example demonstrates how to display a title, subtitle, and legend within an SVG visualization built with the `svgchrt` library and React. It uses a bar-chart-style layout to show the number of speakers (in millions) for various world languages, with data sourced from Vistawide. The code filters the dataset to a subset of languages, sorts them, and configures the legend with custom icons and positioning. It also includes a night-mode toggle that adjusts the color scheme based on the time of day.

Mar 22, 2021

Loading thumbnail…

Prototyping Charts

This example demonstrates how to prototype column charts using the SVGChrt library, which extends standard SVG rendering with dynamic chart-building methods. The chart uses D3.js scales and axes (such as d3.scaleBand, d3.scaleLinear, and d3.axisBottom) to map data to visual elements. The code defines a custom SVGChrtColumn class that computes axis domains from the dataset, supports linear, power, and logarithmic scales, and handles configurable positioning of axes on all four sides. The visualization is rendered with user-supplied data through a simple HTML container and bundled JavaScript.

Jul 26, 2020