Yue Ma

@yuema96·7 public vizzes

Fork of HTML Starter

This example displays a centered, extremely large “Hello HTML!” message rendered using plain CSS and JavaScript within an HTML page. The styling uses a `.message` class with a font size of 13em and text-align centering. No external libraries or frameworks are employed; the entire visualization relies on native HTML structure, CSS rules, and the inline style block. The page demonstrates a minimal, static data-free rendering approach, with no data source or dynamic behavior beyond the static text content.

Oct 24, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The SVG rendering uses D3 v5 to load a CSV, map numeric values to linear scales, and draw red semi-transparent circles. Axis ticks and labels are generated with `axisLeft` and `axisBottom`, while grid lines come from tick size settings. Titles and axis labels are appended as SVG text elements with custom CSS styling.

Mar 8, 2022

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, with dropdown menus letting users choose which numeric columns map to the X and Y axes. It uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` loader to render SVG circles with a staggered 2-second transition when axes change. The component-based code separates menu creation (`dropdownMenu`) from the chart drawing (`scatterPlot`), with axis labels updating alongside the data.

Mar 1, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is rendered in SVG, centered on the screen with its size dynamically matching the browser window. Two circular eyes and a mouth are drawn relative to the face's center using React’s `circle` elements with explicit `cx`, `cy`, and `r` attributes. The code uses React 16.9.0 and ReactDOM to mount the component into the DOM, computing positions from `window.innerWidth` and `window.innerHeight` to ensure the visualization adapts to the viewport. A static HTML fallback for the face is also present in the markup.

Dec 28, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face with black-outlined features, rendered responsively to fill the browser window. It uses React to define an SVG scene with circles for the face, eyes, and mouth, positioning them via a central coordinate transform. The code employs ReactDOM to mount the component and relies on window dimensions to scale the face dynamically. The mouth is implied by a large, unfilled circle, while eye offsets and radii are set as constants. The implementation uses plain SVG elements within React’s declarative JSX syntax.

Dec 28, 2021

Loading thumbnail…

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

A yellow smiley face is drawn in SVG using D3.js v5, with two circles for eyes and a path-based arc for the mouth. The eyebrows, rendered as rectangles, animate upward and then back down over four seconds via chained `transition().duration()` calls. D3's `select` and `arc` utilities construct the face geometry, while a centered `<g>` group applies translations based on the SVG's dimensions.

Dec 28, 2021

Loading thumbnail…

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

A smiling face built entirely with D3.js v5 demonstrates basic SVG shape creation and animation. The code uses `d3.select` to append a yellow circle, two eye circles, and an arc-based mouth, while `d3.transition` animates the eyebrow rectangles upward and back over four seconds. SVG containers group each feature, and the face is centered via a translated `g` element. The example highlights fundamental DOM manipulation and chained transitions without any external data source.

Dec 28, 2021