uwFengyuan

@uwFengyuan·7 public vizzes

Box Plot Example

A box plot visualization compares score distributions between public and private schools, showing the interquartile range as green rectangles, median lines, and dashed whiskers extending to minimum and maximum values. The chart uses an SVG rendering approach with D3.js v5, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.quantile` to compute quartiles. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while the data consists of hardcoded arrays representing test scores for each school type.

Apr 13, 2023

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit is depicted as five red circles arranged horizontally, each representing an apple. The visualization demonstrates the general update pattern using D3's selection API, where fruit objects are created and then bound to SVG circle elements. The code explicitly uses `select` and `range` from the D3 library, along with the `enter()` and `append()` methods to add circles with specified positions and styling. The example shows the initial state of the update pattern, with no transitions or modifications applied.

Mar 4, 2023

Loading thumbnail…

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

This example shows a static SVG face created with D3.js v7. The code selects an SVG element using `d3.select` and reads its width and height attributes to establish the canvas dimensions. It defines a `makeFruit` function that returns objects with a type property, and creates an array containing a single apple fruit object. The sketch appears to be a starting point that sets up a face-like composition framework, though no actual facial features are drawn in the visible code. The HTML file links the D3 library and applies a monospace font to the page.

Jan 31, 2023

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v7 to draw an animated face with SVG shapes. A yellow head, two eyes, and a mouth are constructed with circles and an arc path, while the code animates the eyebrows through a sequence of `transition` calls over two seconds each. The work demonstrates basic SVG attribute manipulation with D3's selection and arc generators, using coordinates derived from the SVG element's dimensions.

Jan 24, 2023

Loading thumbnail…

HTML Cars Report

This example displays a minimal car report as a styled HTML list, with the 2012 Nissan Leaf highlighted in red, alongside a raw SVG canvas. The SVG contains basic shapes—circles, rectangles, lines, and a path—demonstrating direct SVG markup within the document. The visualization uses CSS rules to adjust body typography and apply stroke styles to grouped line elements. The code leverages a local ES6 module import from D3 via UNPKG, though the visual output relies solely on native SVG elements and CSS styling.

Jan 24, 2023

Loading thumbnail…

Fork of Cars Report

This example shows a simple report of cars filtered by price. It displays a text list of car descriptions for vehicles under $2,000, formatted as "year make model: $price". The code uses an asynchronous `getCars()` function that returns a Promise resolving to hardcoded JSON data after a 2-second delay. It then filters and maps the data using `formatCar` and updates the HTML `<pre>` element via `textContent`. The page is built with React and plain JavaScript, rendering entirely in the browser.

Jan 23, 2023

Loading thumbnail…

Cars Report

This example displays a text report of cars priced under $2,000, fetched asynchronously from a hardcoded JSON array. After a two-second delay, each qualifying car is formatted with its year, make, model, and price on separate lines. The React-free interface uses JavaScript promises via `getCars()` and `formatCar()` utilities, updating the content of an HTML `<pre>` element using `document.getElementById` and `textContent`. The data source is local JSON parsed with `JSON.parse`.

Jan 23, 2023