Crystal Hsu

@Yyh1224·6 public vizzes

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

This interactive visualization uses D3.js to construct a simple smiley face, featuring a yellow head, eyes, eyebrows, and a mouth. The primary focus is on demonstrating fundamental DOM manipulation through the `select` and `append` methods. The eyebrows animate, moving up and then back down via chained `transition().duration(2000)` calls. The visualization renders as SVG and also includes a linked YouTube video. All shapes are created programmatically, with the mouth path defined using the `d3.arc` generator.

Sep 18, 2023

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes and their styling with CSS, including circles, rectangles, lines, and paths. It demonstrates how individual shapes can have inline fill and stroke attributes, while groups can apply shared styles and transformations. The visualization uses SVG elements like `circle`, `rect`, and `path`, with cascading style rules from an external stylesheet. It also employs SVG transformations such as `scale` and `translate` to reposition grouped elements, and CSS classes to control stroke properties like line joins and caps.

Sep 18, 2023

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A simple SVG composition demonstrates geometric shapes, styling, and transformations without external datasets. It shows circles, rectangles, lines, and a path within a scaled group, using CSS classes to control stroke color, width, and line joins. The example utilizes inline SVG attributes like `fill`, `stroke`, and `transform` for layout, while an external stylesheet defines styling for grouped elements. The code specifically applies `stroke-linejoin: round` and `stroke-linecap: round` to the path, and renders everything through the browser’s native SVG engine.

Sep 18, 2023

Loading thumbnail…

HTML Cars Report

This example presents a simple HTML report of used cars, listing three vehicles with their prices and highlighting the 2012 Nissan Leaf in red. It uses vanilla HTML unordered list elements and a linked CSS stylesheet to set a monospace font and larger text size. The data is hardcoded directly in the markup rather than loaded from an external source, and the styling relies on a CSS class selector for the emphasized entry.

Sep 18, 2023

Loading thumbnail…

Cars Report

A simple web page demonstrates how to load and format car data using D3 version 6. It displays a report of cars priced under $2,000 after a simulated two-second delay. The code uses `getCars`, which returns a promise resolving to parsed JSON, and `generateReport` to filter and map entries with `formatCar`. The result appears as plain text in a `<pre>` element with enlarged font.

Sep 16, 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. The code imports the `select` function from the D3 v5 library via UNPKG and a custom local ES6 module. It uses `select('#message').text(message)` to set the content of a div element, with styling applied through an external CSS file. The example highlights how to combine CDN-hosted libraries, local modules, and D3 selections in a simple, self-contained visualization template.

Sep 16, 2023