Serena Fang

@Serena-Fang·5 public vizzes

Fork of CARS SCUPUBOPD

This visualization displays the relationship between horsepower and acceleration for various car models, using a scatter plot where the size of each circle encodes the vehicle’s year and the fill color encodes its weight. The data is sourced from the auto-mpg CSV dataset. The example uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` functions to construct the axes and scales, while circles are appended to an SVG with attributes for position, radius, opacity, and a dynamically computed RGB fill.

Feb 23, 2021

Loading thumbnail…

D3.js

A smiley face rendered in SVG animates by raising and lowering its eyebrows. The yellow circular head, black eyes, and mouth are drawn using D3 v6 shape generators and SVG primitives. The code uses `arc()` for the mouth, `circle` and `rect` elements for facial features, and chained `transition().duration()` calls to move the eyebrow group up and down over two-second intervals.

Feb 23, 2021

Loading thumbnail…

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

A yellow circle face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v6. The mouth is generated with the `arc` generator, while the eyes and eyebrows are circles and rectangles. Eyebrows animate vertically via chained `transition().duration()` calls, moving down and then back up, using D3's selection and transition methods.

Feb 23, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple face using D3.js and SVG shapes. It uses `select` to target the SVG element, then styles its background color with a red fill. The visualization highlights how basic geometric primitives—circles, rectangles, and lines—can be combined and transformed using SVG groups and attributes like `translate`, `fill`, and `stroke`. The code relies on D3 v6 to manipulate the DOM, while CSS handles page layout and overflow, showcasing a minimal integration of D3 with React and SVG rendering.

Feb 23, 2021

Loading thumbnail…

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

A yellow circle with black facial features animates its eyebrows in a looping motion. The face is drawn with SVG elements in D3.js v3, using a `circle` for the head and eyes, `rect` elements for the eyebrows, and an `arc` path for the mouth. The eyebrows move vertically via chained `transition` calls with a 2000-millisecond duration, shifting down then returning to their original offset.

Feb 22, 2021