Skip to main content
Log in
S

syedshowmic

@syedshowmic·6 public vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes within a single static canvas, including a circle, rectangle, line, and path. The rectangle and line use explicit `fill`, `stroke`, and `stroke-width` attributes, while the path has `fill="none"` and a black stroke. The rendering relies entirely on the SVG API as embedded directly in the HTML, with no JavaScript or external libraries. The shapes are fixed at hardcoded coordinates and pixel dimensions, showing basic vector graphics primitives without interaction or animation.

May 16, 2022
Loading thumbnail…

Untitled

This interactive visualization lets users adjust red, green, and blue color channels via separate sliders, altering the displayed output in real time. It builds on an Observable notebook by syedshowmic and uses the Observable Runtime and Inspector APIs to embed the controls. The page’s iframe links to an accompanying video on data wrangling, while the sliders are rendered directly from the embedded module, which does not reveal the underlying canvas or data transformation logic.

Apr 6, 2022
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying summary statistics about the CSS Named Colors dataset. The page shows file size in kilobytes, row count, and column count in large text. The primary implementation uses `d3.csv` with a promise callback, while commented-out alternatives illustrate `fetch` with async/await and `d3.csvParse`, as well as a nested promise pattern, to compare different data-loading approaches.

Apr 5, 2022
Loading thumbnail…

Fork of Mouse Follower

This example uses React to render an SVG circle that follows the mouse pointer across a 960×500 canvas. The component tracks the mouse position with the `useState` hook and updates it on every `mousemove` event via `handleMouseMove`. The circle’s center coordinates are set directly from the event’s `clientX` and `clientY` values, producing a simple interactive follower. React 16.9 and ReactDOM are loaded from UMD builds, with the SVG output defined declaratively in JSX.

Apr 3, 2022
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying summary statistics about the CSS Named Colors dataset. The page shows file size in kilobytes, row count, and column count in large text. The primary implementation uses `d3.csv` with a promise callback, while commented-out alternatives illustrate `fetch` with async/await and `d3.csvParse`, as well as a nested promise pattern, to compare different data-loading approaches.

Mar 11, 2022
Loading thumbnail…

smiley_face_pt1

A static SVG smiley face rendered with React and D3.js, centered on a 960-by-500 canvas. The face uses a yellow circle with a black stroke, two eye circles positioned symmetrically around the center, and a mouth path generated by D3’s `arc()` function with fixed inner and outer radii and angular extents. The code imports `arc` from `d3`, defines constant dimensions and offsets, and uses React’s `ReactDOM.render` to mount the SVG into the DOM. The example demonstrates composing primitive SVG shapes with programmatic arc geometry.

Mar 11, 2022