Skip to main content
Log in
S

shawchand

@shawchand·5 public vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG and CSS to create basic shapes and style them with a solid background. The code selects an SVG element using `d3.select` and applies a red background color via the `style` method. The HTML sets up an SVG canvas with a fixed width and height, loaded with D3 v5, while the styling is defined in a separate CSS file. The visualization is minimal, focusing on the integration of D3 for DOM manipulation and SVG for graphical output.

Nov 8, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how to combine ES6 modules with D3.js to render a simple text-based message. The page uses D3’s `select` method to target a div element and set its text content, while a separate module exports a string constant. Styling is applied via CSS with a Google Fonts import and a dark background. The visualization highlights basic module imports, DOM manipulation with D3 v5, and external stylesheet integration.

Nov 8, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style visual shapes using SVG and CSS within the VizHub environment. The page displays a large, centered greeting message, “Hello VizHub!” sourced from an ES6 module, with the text rendered in a bold, high-contrast style. A custom white Ubuntu font and a navy background are applied globally through a linked stylesheet. The code relies on standard HTML5, CSS3, and ES6 module syntax, with no additional visualization libraries, to show basic DOM styling and module export patterns.

Nov 8, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how to combine ES6 modules with D3.js to render a simple text-based message. The page uses D3’s `select` method to target a div element and set its text content, while a separate module exports a string constant. Styling is applied via CSS with a Google Fonts import and a dark background. The visualization highlights basic module imports, DOM manipulation with D3 v5, and external stylesheet integration.

Nov 8, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular, browser-based data visualization projects. It renders a simple text message on a styled web page using a custom ES6 module and D3’s `select` function to update the DOM. The code includes an HTML entry point, a JavaScript bundle, and a CSS file with imported Google Fonts. The visualization relies on D3 v5 and shows the integration of external libraries and local JavaScript modules within a single VizHub project.

Nov 8, 2019