Zach2826

Testing

This example visualizes video game sales over time, showing the total global sales for each year as a line chart. The code loads a CSV dataset from a GitHub gist using `d3.csv` and processes it with `d3.nest` to group records by year and sum their sales values. A time-scaled X axis (`d3.scaleTime`) and a linear Y axis (`d3.scaleLinear`) are drawn, with a single steel-blue line rendered via `d3.line`. Rendering is done with SVG appended to the page.

Final Test

This visualization shows global video game sales by year, using a line chart to plot sales over time. A scatter or line series is configured to map year values on the x-axis and global sales on the y-axis, with axes generated via D3’s `d3.svg.axis`. The code loads CSV data from a GitHub gist, converts the year column into date objects, and groups entries by year using D3’s `nest()` API. The HTML page uses D3 v6 and static SVG rendering, though the drawing is not yet displayed.

Visualization

This example renders a minimal React application that imports D3 v7 and displays a static message. The code uses ReactDOM to mount a single functional component, `App`, into the `#root` element. While the component’s JSX is empty in the source, the HTML includes a large `.message` style for potential text display. The visualization relies on React 16.13.1 and D3’s bundled library, but no D3-specific API calls are made in the provided code.

Fork of Fork of Video Game Platforms Streamgraph

This streamgraph visualizes global video game sales by platform from 1980 to 2020, showing how platforms like PlayStation, Xbox, and Nintendo rise and fall in popularity over time. Built with D3.js, the visualization uses `d3.stack` with a wiggle offset and inside-out ordering to minimize layer overlap. Sales data from a GitHub-hosted CSV is aggregated yearly, smoothed with `array-blur`, and rendered as SVG paths with a black backdrop to hide grid lines between layers. Hovering over any platform highlights it while dimming the rest.

ImportingData

This example demonstrates how to load an external CSV dataset into a web page for inspection. It fetches animal bite records from a GitHub-hosted CSV file using D3’s `d3.csv` method, which returns a promise. Once the data resolves, the code logs the parsed array of objects to the browser’s console, showing the raw structure of the dataset without any visual rendering. The page relies on D3 v7 and plain JavaScript within an HTML file, with no additional frameworks or chart components involved.

Fork of Let's Make a Face Part I

This example builds a smiley face step-by-step, showing how primitive SVG shapes—circles for the head, eyes, and a mouth arc—can be composed into a recognizable figure. The code uses React to render JSX elements and D3’s `arc()` generator to create the mouth path, setting inner and outer radii and angles. Positions are calculated relative to the SVG center, with fixed offsets for the eyes and stroke width. The rendering is static, with no interaction or animation, and the mouth arc’s unusual radii suggest a work-in-progress.

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered in SVG, with eyes positioned symmetrically around the center and a blank space where a mouth would be. The face fills the entire browser window, scaling to the viewport dimensions. The code uses React to define the component structure and ReactDOM to render it into the DOM, with all shapes drawn using SVG circles. The face’s radius is calculated from the window height, while eye offsets, radius, and stroke width are declared as constants. The implementation relies on React 16.9 and uses inline SVG elements with transforms for centering.

Fork of HTML Starter

This example shows a single HTML page displaying the static message “Hello HTML!” in large, centered text. The code uses plain CSS for styling and JavaScript is included for potential interactivity, though the page currently only renders the message. It serves as a minimal starter template, demonstrating the basic structure of an HTML document with a CSS rule for the `.message` class. The visualization relies on no external libraries or data sources, making it a simple foundation for building more complex web-based projects.