ShengHao-Shi

@ShengHao-Shi·5 public vizzes

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

This example demonstrates a force-directed graph of character relationships from *Les Misérables*, rendered as an interactive SVG network. The visualization uses `d3.forceSimulation` to position nodes and links, with drag support via `d3.drag` for user manipulation. Node colors encode character groups using `d3.scaleOrdinal` and the `d3.schemeTableau10` palette, while link weights reflect connection strength. The code loads data from a local `miserables.json` file and builds the visualization with D3 v5's selection and join methods.

Dec 14, 2021

Loading thumbnail…

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

This example shows a simple smiley face drawn on an SVG canvas, with yellow circular head and black outline. The code demonstrates fundamental DOM manipulation with D3.js by appending a circle element to an existing SVG. Using d3.select and append, the example sets the circle’s radius, center coordinates, fill, and stroke attributes. The face is static; the title mentions moving eyebrows, but the JavaScript only renders the circle, leaving facial features absent. The implementation relies on D3 v5 and SVG rendering, with no data binding or animation.

Dec 7, 2021

Loading thumbnail…

Ju Lian Made with JS SVG and D3

This example shows a stylized cartoon face built entirely with SVG shapes, including ears, eyes, a nose, and a mouth, arranged symmetrically around a central pink circle. The scene is rendered using React components that define each facial feature as SVG primitives like circles, ellipses, and a path. The mouth’s arc is generated with the `d3.arc()` API from D3 v7, while positioning and styling rely on React’s JSX properties such as `cx`, `cy`, `rx`, and `ry`. The D3 library is loaded separately, and all coordinate values are hardcoded constants in the script.

Dec 7, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows a static collection of SVG shapes—circles, rectangles, lines, and a path—arranged in a grid and scaled as a group, demonstrating how CSS styling and SVG attributes combine for visual effects. It uses plain SVG elements with inline `fill`, `stroke`, and `transform` attributes, plus an external stylesheet (`styles.css`) to define stroke properties for the line and path via class selectors. The rendering is done entirely with SVG, with no JavaScript or data binding, highlighting manual coordinate placement and styling through both SVG presentation attributes and CSS rules.

Aug 24, 2021

Loading thumbnail…

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

This example demonstrates a smiley face whose eyebrows animate using fundamental D3.js DOM manipulation. The SVG is selected via `d3.select` and styled with a red background. The code uses D3 v5 and renders the face as SVG elements, with the eyebrows moving through dynamic attribute updates. The fork builds on a tutorial approach, showing how D3 can bind and modify visual properties directly in the DOM without complex data joins or scales.

Aug 20, 2021