Skip to main content
Log in
B

BobViz

@BobViz·5 public vizzes

Loading thumbnail…

svg Fundamentals Starter

This example demonstrates a minimal web page that renders the text "Hello HTML!" as a starting point for learning scalable vector graphics. The code uses plain HTML, CSS, and JavaScript, with a `.message` class applying a 13em font size and center alignment. The page structure is a single `<div>` element, styled via an embedded `<style>` tag. It does not include any external libraries or data sources, focusing instead on the fundamental building blocks of web-based visualization.

Jan 9, 2023
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within the VizHub environment, displaying the text “Hello VizHub!” centered on the page. It shows how to load D3 v5 from a CDN, import specific API functions like `select` using ES6 module syntax, and import a local module (`myMessage.js`) that exports the displayed string. The page structure includes an HTML file with a dedicated `div`, a CSS file for styling, and JavaScript that chains `select` and `.text` to update the DOM.

Dec 30, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within the VizHub environment, displaying the text “Hello VizHub!” centered on the page. It shows how to load D3 v5 from a CDN, import specific API functions like `select` using ES6 module syntax, and import a local module (`myMessage.js`) that exports the displayed string. The page structure includes an HTML file with a dedicated `div`, a CSS file for styling, and JavaScript that chains `select` and `.text` to update the DOM.

Dec 30, 2022
Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiling face built with SVG shapes demonstrates fundamental DOM manipulation using D3.js v5. The code constructs a yellow circle head, two eyes, and a mouth arc using the `d3.select`, `d3.arc`, and `d3.transition` APIs. The eyebrows, drawn as rectangles, animate vertically via chained `transition().duration()` calls, moving up and then back down over 2.8 seconds. All elements are positioned relative to the SVG's center using `transform` attributes.

Dec 18, 2022
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js v5 by rendering a smiley face with movable eyebrows. The SVG output is generated through D3’s selection and data-binding methods, such as `select`, `selectAll`, and `enter`, which append rectangles to the canvas based on a hardcoded array of four values. The code uses D3’s `attr` to set position and size properties, while a commented-out CSV import suggests potential external data sources. The visual result is interactive only in the sense that the rectangles’ placement is computed from the data array, with a red page background and green SVG fill.

Dec 18, 2022