S

Shane Gibney

@shanegibney·22 public vizzes

Loading thumbnail…

Fork of course ep 1

This example shows a simple smiley-face avatar built with React and rendered as scalable vector graphics (SVG). It draws a yellow circle for the face and two smaller circles for the eyes, positioned relative to the center of a 960×500 viewport. The code uses React’s JSX syntax with inline curly-brace expressions to compute coordinates and dimensions from JavaScript constants. The SVG elements—`circle` and `stroke` properties—demonstrate basic geometric shape rendering without any external data or interaction.

Loading thumbnail…

Fork of Fork of HTML Startewr

This example shows a simple, hand-drawn composition of two circles and two rectangles inside an SVG canvas, using basic shapes with explicit coordinates and styling. The visualization serves as a minimal demonstration of SVG rendering, where a yellow-filled circle with a blue stroke and a red circle sit alongside a filled rectangle with a thick navy border. The code uses raw SVG elements directly in the HTML, while a second React-based implementation draws a stylized face with two eyes, showcasing how React can generate SVG markup programmatically. No external data is involved; it highlights fundamental shape primitives.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the simplest possible D3.js visualization: a single line of text rendered in the browser. Using the D3.js v7 library, the code selects the body element from the HTML document and replaces its content with the string "iHello d3". The page is styled with CSS to display this text at an extremely large font size of 13em, centered on the screen. The visualization serves as a minimal proof-of-concept, showing how D3’s selection API can manipulate the DOM directly, with the page structure defined in the accompanying index.html file.

Loading thumbnail…

Fork of HTML Starter

This example shows a static web page that displays the message "Hello HTMLs!" centered on the screen using CSS. The page uses plain HTML and embedded CSS to style a div element with a large font size and text alignment. No JavaScript or external libraries are used, making it a minimal demonstration of fundamental web technologies. The rendering approach relies entirely on the browser’s native layout and styling capabilities.

Loading thumbnail…

Fork of D3 Starter

This example displays the text “Hello D3 version 7” centered on a blank white page, rendered at an enormous 13-em font size. It demonstrates a minimal setup for D3 v7, using a single call to `d3.select` to target the document body and set its text content. The code loads D3 from the unpkg CDN and separates its entry point into an external `bundle.js` file, showing a basic project structure with no additional data or interactions.

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the text "Hello HTMLlll" in huge, centered type using a minimal HTML page styled with CSS. The page sets the body font size to 13em and aligns content to the center via plain CSS. A small inline JavaScript script logs "Hello JavaScript!" to the browser’s console, which can be viewed in Chrome developer tools. The implementation relies solely on native browser APIs—HTML, CSS, and JavaScript—with no external libraries or frameworks, making it a bare-bones starter template.

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTMLl" in the browser, centered with a font size of 13em, and logs "Hello JavaScript!" to the console. It uses inline CSS for styling and a JavaScript script tag for the console output. The page is a minimal demonstration of HTML, CSS, and JavaScript working together, with no external libraries or data sources.

Loading thumbnail…

hello d3

This example displays the static text “Hello D3 version 6” centered on the page at a very large font size, serving as a minimal introductory demonstration. The page loads D3 version 7 from a CDN and uses the `select` function to target the `body` element, then calls `.text()` to set its content. The code relies on a separate `bundle.js` file to execute the main script, while the HTML structure is kept intentionally bare to highlight D3’s direct DOM manipulation.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to begin using D3 version 7, displaying the text “Helloo D3 version 6” in the center of the page with a font size of 13em. The code loads D3 from a CDN and uses the `select` function to target the body element, then calls the `.text()` method to inject content. It relies on `bundle.js`, which imports `select` from the `d3` module, showcasing a modern ES module approach. The example serves as a bare-bones starting point for D3 projects, highlighting the core selection and DOM manipulation API.

Loading thumbnail…

Fork of D3 V6

This example demonstrates the simplest possible D3 version 6 setup, displaying the text “Hello D3 version 6” in the browser. The page uses a minimal HTML structure with a large 13em font size, and loads D3 via a CDN script tag. The code calls `select` from the `d3` module and applies the `text` method to the body element to set its content. The rendering approach relies entirely on D3’s DOM manipulation, with no data binding or visualization components present.

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that displays a centered text message. It loads D3 version 5 from a CDN via UNPKG and uses the `select` function to target the HTML element with the ID `message`, setting its text content to “Hello VizHub!”. The code also imports a local ES6 module from `myMessage.js` and applies styling through an external CSS file, centering the text with a large font size.

Loading thumbnail…

Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered in large type within a message div. It demonstrates VizHub’s fundamental workflow by loading D3.js v5 from UNPKG via a script tag and importing the `select` function from the `"d3"` module. The code also imports a local ES6 module, `myMessage.js`, which exports the displayed string. D3’s `select` method targets the `#message` element to set its text content, while CSS styles control font size and alignment.

Loading thumbnail…

Fork of Fork of Fork of forkedvizhub

This example presents a minimal HTML page that renders the text "Hello HTMLs" in a large, centered font using inline CSS, with body text set to a massive 13em size. A small inline script logs "Hello JavaScript!" to the browser console. The page uses no external libraries or frameworks, relying solely on plain HTML, CSS, and JavaScript, with the rendering approach being static text display without any data sources or interactive elements.

Loading thumbnail…

Fork of Fork of Fork of Fork of forkedvizhub

This example displays the text "Hello HTML" at a massive font size in the center of the page. It demonstrates a basic integration of CSS for styling and JavaScript for interactivity. The JavaScript code logs the message "Hello JavaScript!" to the browser's console, which can be viewed in the developer tools. This simple setup uses no external libraries, relying solely on the built-in capabilities of HTML, CSS, and JavaScript.

Loading thumbnail…

Fork of Fork of forkedvizhub

This example displays a minimal HTML page with the text “Hello HTML” centered at an enormous font size. The page demonstrates basic web development integration by including embedded CSS for styling and JavaScript for console output. The code uses standard web technologies including HTML, CSS, and JavaScript, with the JavaScript logging “Hello JavaScript!” to the browser’s developer console. The example serves as a straightforward starting point for understanding how these three core web languages work together.

Loading thumbnail…

Fork of forkedvizhub

This example displays the text “Hello HTML” in a large, centered format as a minimal demonstration of web technologies. The page renders a single HTML element styled with CSS, while a JavaScript snippet logs “Hello JavaScript!” to the browser’s console. The code uses the Document Object Model (DOM) to insert the text and the Console API for output, with no external libraries or data sources required.

Loading thumbnail…

forkedvizhub

This example displays a minimal web page that renders the text “Hello HTML” at a large, 13-em font size, centered on the screen. It demonstrates a basic setup using plain HTML, CSS, and JavaScript, with no external libraries or data sources. The code logs “Hello JavaScript!” to the browser’s console via the `console.log` API, and includes inline styling to control typography and layout. The visualization serves as a simple starter template for React-based projects, emphasizing foundational web technologies.

Loading thumbnail…

forkedvizhub

This example displays the text “Hello HTML” at a massive font size, centered on a page, with a corresponding console message logged via JavaScript. It serves as a minimal HTML and CSS demonstration, using a simple inline style block to set the typography and layout. The script tag contains a `console.log` call, which writes “Hello JavaScript!” to the browser’s developer tools. The page relies solely on vanilla web technologies—HTML, CSS, and JavaScript—without any external libraries or data sources, making it a bare-bones starter template for web development.

Loading thumbnail…

Fork of vizhub

This is a minimal React starter example rendering the text “hello world!!!” in a plain HTML page. It uses a single `index.html` file that contains raw HTML and CSS, with no JavaScript logic or data visualization. The page demonstrates the simplest possible setup for a React-based VizHub project, with no external libraries or APIs invoked. It serves as a bare-bones template for beginners, showing only static text output without any interactive or graphical elements.

Loading thumbnail…

Fork of vizhub

This example is a nearly empty React application, serving as a minimal template for a visualization project. It consists of an `index.html` file referencing standard CSS and JavaScript, with no visible visualization logic or rendered content. The code does not include any data sources, rendering libraries, or D3 APIs, and the body of the HTML page is blank. It is intended as a starter scaffold for building a chart or interactive graphic, but currently shows no output.

Loading thumbnail…

Fork of A Visual History of Stamen Open Source Contributors

This visualization presents a streamgraph of commit activity from the top 100 contributors to Stamen’s open source repositories, with each colored layer representing an individual author and its thickness reflecting weekly commit counts after smoothing via `array-blur`. Layer order follows the timing of first commits, so reading from bottom to top reveals the sequence of contributor involvement. Built with React and D3, it uses `d3.stack` with `stackOffsetWiggle`, `d3.area`, and `d3-area-label` for labels, rendering as SVG from JSON data loaded via `d3.json`.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal webpage that displays a single large circle in the center of the screen. The page uses HTML, CSS, and JavaScript, with the circle rendered as an SVG element. The CSS defines the body’s text alignment and font size, while the JavaScript logs a message to the browser’s console. The code demonstrates a basic setup for visualizing shapes with SVG.