AlexanderShaw

@AlexanderShaw·6 public vizzes

Fork of D3 Starter

This example shows a continuously animated field of colored circles that oscillate vertically in a sine-wave pattern while subtly shifting their fill colors. It demonstrates a simple dynamic scatterplot with real-time updates driven by a timer interval. The visualization is built with D3 version 7, using the `d3.select` API to append an SVG canvas, `d3.range` to generate up to 2,000 data points, and data joins to bind circle elements to changing values. Circle positions and RGB fill colors are recalculated from the sine of the current time step, producing a smooth, wave-like motion across the display.

Sep 4, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page in large, bold type. The page uses a plain HTML structure with a single `<div>` element styled through inline CSS, setting the font size to 13em and aligning the text horizontally. No JavaScript libraries or data sources are involved; the visualization relies solely on HTML and CSS rendering within the browser.

Sep 4, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message using a plain HTML page styled with CSS. The page consists of a single `div` element with a class that sets its font size to 13 em and centers the text horizontally. It demonstrates a minimal setup for rendering static content in a browser without any JavaScript logic or external data. The CSS `text-align` and `font-size` properties control the visual presentation.

Sep 4, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 7 setup by rendering the text “Hello D3 version 7” in the center of a web page. It uses the `select` function from the D3 library to target the body element and set its text content. The page imports D3 7.8.5 from a CDN and applies CSS styling with a large font size for visual impact. The code is intentionally simple, showing a foundational starting point for building D3 visualizations.

Sep 4, 2023

Loading thumbnail…

Portfolio Head

This example displays a single large word, “ooooo D3 version 7,” in the center of the page as a minimalist portfolio header. The visualization uses the D3.js v7 library’s `select` method to target the body element and set its text content. The page’s styling relies on a 13em font size and centered text alignment, with no additional data or interactive behavior shown. The code demonstrates a basic D3 selection and text manipulation operation within a simple HTML structure.

Sep 4, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This example uses the D3.js `select`, `range`, and `append` APIs to draw one hundred semi-transparent horizontal rectangles across a full-screen SVG canvas. The rectangles are clipped through an SVG `mask` containing a white circle over a black background, revealing the striped pattern only within a centered circular region on top of the page’s background. The animation and interactivity come solely from the static mask and rect layout, with no data source beyond the generated numeric range.

Sep 4, 2023