gnorthfork

@gnorthfork·4 public vizzes

Face

A face rendered as a red SVG background with no visible data or shapes. The example uses D3 v5 to select the SVG element and apply a background color via `d3.select` and `style`. The code includes an empty SVG and a linked stylesheet, demonstrating basic SVG setup and D3 manipulation without any data binding or visualization elements.

Aug 26, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

A single static SVG graphic demonstrates primitive shapes and color styling through both inline attributes and CSS rules. The markup places circles, rectangles, lines, and a polyline path within nested `<g>` groups, with fill and stroke set directly on elements for some shapes and inherited via CSS classes for others. The stylesheet applies stroke widths, line joins, and caps to the line and path elements. No data is loaded; the example illustrates basic SVG structure and CSS selectors for visual customization.

Aug 26, 2019

Loading thumbnail…

Hello HTML

A minimal SVG circle on a 500-by-500 canvas is the sole visual output of this example, demonstrating the basic structure of an HTML page with embedded vector graphics. The code uses the native SVG `<circle>` element with a radius of 200 pixels, though it sets the `x` attribute rather than `cx`, so the circle may not be centered as intended. The example serves as a bare-bones starting point for creating interactive visualizations, relying only on standard HTML and SVG without any JavaScript libraries like D3.js.

Aug 26, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates the minimal setup for a VizHub project, displaying the static text "Hello VizHub!" centered on a dark blue background. The visualization uses D3.js version 5, specifically the `select` method to target the `#message` div and set its text content to a string imported from a local ES6 module. Styling is handled by an external CSS file that imports the Ubuntu font from Google Fonts, sets the background color, and applies large, light-colored typography. The code relies on an `index.html` file that loads both the D3 library and the JavaScript bundle, with all application logic split into separate modules.

Aug 23, 2019