George2916

@George2916·4 public vizzes

Smiley Face Part I

A yellow circle with two black-rimmed eyes floats on a blank canvas, forming the first half of a smiley face. The SVG is rendered with React, using hard-coded coordinates for the face, eyes, and stroke widths. The code imports React and ReactDOM to mount the component, and the eyes are drawn as separate circle elements with a fixed offset from the canvas center.

Apr 24, 2021

Loading thumbnail…

Untitled

This example demonstrates a real-time data visualization that renders a dynamic scatterplot using React and D3.js. It displays a collection of points that move and interact based on a physics simulation, with forces applied to create clustering and separation effects. The visualization uses `d3.forceSimulation` to manage particle movement and collision detection, while `d3.select` and React state updates handle rendering. The code integrates D3’s force-directed layout with React’s component lifecycle, updating the SVG elements on each animation frame.

Apr 24, 2021

Loading thumbnail…

bar chart practice

This bar chart displays population counts for several countries from a CSV file, with each country represented as a horizontal bar. It uses D3 v5’s `scaleLinear` for the x-axis population values and `scaleBand` for the y-axis country categories. The SVG rectangles are appended via data joins, and the chart demonstrates fundamental DOM manipulation with `select`, `csv`, `scaleLinear`, `max`, and `scaleBand`.

Apr 21, 2021

Loading thumbnail…

d3 practice 1

An animated SVG face keeps its eyes, yellow head, and black outline still while both eyebrows bob up and down. The code builds the scene with d3 select, append, and attr, then choreographs the motion using d3 transition with chained duration and attribute changes. A d3 arc path forms the mouth, and the drawing uses fixed pixel coordinates within a 960 by 500 viewport.

Apr 20, 2021