Skip to main content
Log in
C

Chia-KaiYang

@Chia-KaiYang·9 public vizzes

Loading thumbnail…

Shapes with SVG and CSS

A yellow circle with two small eyes and rectangular eyebrows forms a face. The animation moves the eyebrows upward for two seconds, then returns them to their original position. The SVG is drawn using d3.select and shape-construction methods like append('circle') and append('rect'), with layout based on width and height attributes. The eyebrow motion relies on d3's transition system, using transition().duration() to animate the transform attribute in a two-step sequence. The mouth is a path generated with d3.arc, specifying inner and outer radii with defined angles.

Feb 27, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a minimalist SVG visualization with a solid red background, created using D3 v5 to select the SVG element and apply inline styling. The page loads D3 from a CDN and runs a bundled script that changes the SVG’s background color to red. The accompanying CSS resets the body margin and hides overflow, ensuring the red rectangle fills the viewport without scrollbars. The visualization relies on D3’s `select` API and native SVG rendering, with no additional data or interactive elements.

Feb 27, 2019
Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in a light gray sans-serif font against a dark gray background. It serves as a minimal demonstration of a basic D3.js v5 setup within the VizHub environment. The code uses `d3.select` to target the `#message` div and sets its text content with a string imported from a separate ES6 module. Styling is applied via an external CSS file that imports the Ubuntu font from Google Fonts, with the body configured for centered alignment and a large font size.

Feb 26, 2019
Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in a light gray sans-serif font against a dark gray background. It serves as a minimal demonstration of a basic D3.js v5 setup within the VizHub environment. The code uses `d3.select` to target the `#message` div and sets its text content with a string imported from a separate ES6 module. Styling is applied via an external CSS file that imports the Ubuntu font from Google Fonts, with the body configured for centered alignment and a large font size.

Feb 26, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates loading asynchronous data and updating a webpage’s content once the data arrives. The page initially shows the text "Loading..." and then, after a five-second delay, displays a specific car year from a hardcoded JSON array of car objects. The JavaScript uses a custom ES6 module that exports a `getCars` function returning a Promise, which simulates a network request with a timeout. The HTML page styles the large output text using CSS with the Ubuntu font, while the D3.js library is included via a CDN link.

Feb 25, 2019
Loading thumbnail…

Hello

This visualization displays the word “hello” in large, centered, white Ubuntu text against a dark gray background. The example demonstrates how to import and use an ES6 module, exporting an array of car objects that is parsed from JSON. The page renders the static message using basic DOM manipulation and applies styling through an external CSS file, with the D3 library loaded but not yet used for data binding or visual encoding.

Feb 25, 2019
Loading thumbnail…

Hello

The visualization greets the viewer with a short text message, combining content from an ES6 module and a variable initialized in the main script. It presents a solid-colored background with a large, centered message that is pulled from two different data sources: a string literal and an imported constant. The example demonstrates basic DOM manipulation by setting the `textContent` of an HTML element, while also loading a data array of car objects from a separate `cars.js` module. It uses the D3 v5 library for potential future data handling, alongside custom CSS styling via Google Fonts.

Feb 25, 2019
Loading thumbnail…

Hello VizHub

This example displays a single bold message, “Hello VizHub!”, centered on a dark gray background using the Ubuntu typeface. The code imports the `select` function from D3.js and a local ES6 module to retrieve the text string, then sets the content of a `div` element to that value. Styling is handled through external CSS that imports the font from Google Fonts. No data visualization or interaction is present; it demonstrates basic D3 DOM manipulation and module imports.

Feb 25, 2019
Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in a light gray sans-serif font against a dark gray background. It serves as a minimal demonstration of a basic D3.js v5 setup within the VizHub environment. The code uses `d3.select` to target the `#message` div and sets its text content with a string imported from a separate ES6 module. Styling is applied via an external CSS file that imports the Ubuntu font from Google Fonts, with the body configured for centered alignment and a large font size.

Feb 25, 2019