Yineng Zhang

@ZY1N·5 public vizzes

Lets make a face

This example draws a simple smiling face using SVG shapes. A yellow circle forms the head, with two black circles for eyes and a curved arc path for the mouth, all positioned relative to the SVG’s width and height. The visualization uses D3 v5’s `select` and `arc` APIs to create and place the elements, with the arc generator defining the mouth’s inner and outer radii and start and end angles. The code demonstrates basic SVG attribute manipulation through D3’s chaining methods.

Oct 31, 2020

Loading thumbnail…

HTML CAR REPORT

This example displays a static SVG scene of a red and green rectangle beside a circle, using inline SVG elements and a linked stylesheet. The code relies on basic SVG shape primitives, such as `circle` and `rect`, while the CSS file defines global body margins and a `.highlighted` class. The rendering approach is direct SVG markup embedded in HTML, with no JavaScript or data source; the visualization simply demonstrates geometric composition and styling through native web standards.

Oct 29, 2020

Loading thumbnail…

HTML CAR REPORT

This example shows a minimal HTML car report page that renders a single heading, followed by a list of three items, with the first list item highlighted in red. It demonstrates basic document styling and structure rather than complex data visualization. The page relies on plain HTML for content and a linked external stylesheet (`styles.css`) for presentation, specifically setting a large monospace font and using a `.highlighted` class to color that first item red. No JavaScript, data sources, or visualization libraries are used.

Oct 29, 2020

Loading thumbnail…

Cars Report

This example displays a simple text-based report of used cars priced under $2,000, formatted as a multi-line list. It starts with a hardcoded JSON dataset of five vehicles, then filters and formats entries using the custom `generatereport` and `formatCar` functions. The result is rendered into a `<pre>` element within a React-like module structure, though the rendering relies on direct DOM manipulation via `document.getElementById().textContent`. The data includes year, make, model, and price fields, with output presented in a large monospace font.

Oct 29, 2020

Loading thumbnail…

Cars Report

This example builds a text-based report of cars under a $2,000 price limit, displaying each vehicle’s year, make, model, and price in a large HTML `<pre>` element. It demonstrates asynchronous data loading using a Promise with a simulated two-second delay via `setTimeout`, then filters and formats the car objects with JavaScript’s `filter`, `map`, and `join` methods. The code uses ES modules (`import`/`export`) to separate car retrieval, formatting, and report generation, and the final output is injected into the DOM through `textContent`.

Oct 29, 2020