smeiyin

@smeiyin·8 public vizzes

Fork of Loading Data with React & D3

This interactive node-link diagram visualizes the connections between pages in a dataset, mapping relationships through arcs and colored nodes. Built with React and D3 v5, it uses D3's `scalePoint` and `scaleOrdinal` to position nodes and assign colors based on chapter numbers. The visualization reads from a local `data.js` file containing nodes and links. Hovering over a node highlights it, its direct connections, and related links by applying CSS classes through D3's selection and classing methods, with SVG rendering.

Apr 7, 2021

Loading thumbnail…

Fork of React Starter

This example demonstrates an interactive SVG pan-and-zoom interface built with the react-svg-pan-zoom library. It renders a set of overlapping geometric shapes—three circles and a rectangle—inside a 500×500 pixel viewport, with buttons that trigger zooming, fitting to a selection, or fitting the entire SVG to the viewer. The component tracks zoom and pan events through console logging, and uses the `fitToViewer` method on initial mount to center the scene. The visualization is constructed using basic SVG elements such as `<rect>` and `<circle>`, with React handling the UI state.

Mar 29, 2021

Loading thumbnail…

Fork of World Countries Tree

A fork of the World Countries Tree example displays a hierarchical dataset as a horizontal tree layout, with node labels and curved links rendered as SVG elements. The visualization uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator to position nodes and draw edges, while the `zoom` behavior enables panning and scaling of the entire graph. Data is loaded from a local `data.json` file, and node labels are styled with a Playfair Display font and white text shadow.

Mar 29, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

This visualization shows a grid of eighteen procedurally generated smiley faces arranged in six columns and three rows. Each face is drawn as yellow SVG circles with black outlines, featuring randomized eye positions, eye radii, mouth sizes, and stroke widths. The example demonstrates how React components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` compose reusable elements, while D3’s `range` and `arc` APIs generate the face data and the smile-shaped mouth path. All rendering is done in SVG through a React-DOM container, with parameters derived from `Math.random()` at runtime.

Mar 19, 2021

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the left axis and population values along the bottom axis. It uses React components to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning and scaling, and manually drawn axis components (`AxisBottom`, `AxisLeft`) to avoid D3 axis helpers. Data is loaded asynchronously via `useData` and D3’s `csv` from the United Nations World Population Prospects 2019 dataset, with the chart updating once the data arrives.

Mar 19, 2021

Loading thumbnail…

Fork of HTML Starter

This visualization displays a node-link diagram of a dataset containing chapters and submissions, rendered as an SVG. The code uses d3.select, d3.scalePoint, d3.scaleOrdinal, and d3.schemeCategory10 to position nodes vertically and color them by chapter. User interaction highlights primary and secondary links and labels on mouseover, using CSS classes to adjust stroke and fill. The example is built with React and relies on d3 for arc path generation and layout.

Mar 18, 2021

Loading thumbnail…

Force Layout with labels on edges

A force-directed graph displays 88 numbered nodes connected by links, with each edge labeled by a numeric value. The visualization uses d3.forceSimulation to compute node positions and render SVG elements, while React manages the component structure and lifecycle. Edge labels are positioned at the midpoint of each link, updating continuously as the simulation runs and nodes shift positions. The example demonstrates combining D3's layout algorithms with React's declarative rendering for dynamic network visualization.

Mar 18, 2021

Loading thumbnail…

Smiley Face Part I

The visualization displays a static, stylized smiley face constructed from SVG shapes, centered on a canvas. The face features a red circular head with a black stroke, two elliptical eyes positioned symmetrically above the center, and a curved mouth rendered as an arc. The code uses React with D3 v6, specifically leveraging the `d3.arc` helper to generate the mouth path, while the layout is computed via basic arithmetic for coordinates and dimensions.

Mar 17, 2021