Skip to main content
Log in
S

srzadran

@srzadran·12 public vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

The visualization displays a scatterplot of automobile engine data, plotting displacement against horsepower, with each point representing a vehicle model and its name revealed on hover. It uses the vega-lite-api library to construct the chart declaratively, while D3’s `csv` method loads the dataset from a remote URL. Visual styling is customized through a config object that adjusts axis and label formatting. The resulting SVG render is fit to the browser window, with points shown as semi-transparent circles due to their high opacity value.

Mar 16, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example displays a simple, yellow smiley face that scales responsively to fill the browser window, centering itself and drawing its eyes based on calculated offsets. The face renders through React’s declarative SVG components, using `React.createElement` implicitly via JSX to build circles for the head and eyes, with a yellow fill and black stroke. The code manually computes geometric values like radius and position from `window.innerWidth` and `window.innerHeight`, then renders the SVG using `ReactDOM.render`. No external data or interaction is involved; it is purely a static, programmatic drawing.

Mar 9, 2021
Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part III

A smiley face rendered as a static SVG visualization, with the face centered in a 960-by-500 viewport and drawn using basic geometric shapes. It shows a yellow circle for the head, a black outline stroke, and two black eye circles at fixed offsets. The example demonstrates integrating React for component structure with D3 v5 for SVG elements, using ReactDOM to render the SVG tree. No interactivity or D3-specific functions like simulations or scales are present; the drawing relies entirely on hardcoded coordinate values.

Mar 9, 2021
Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example shows a classic smiling face constructed with SVG primitives, rendered through React components that use D3’s `arc` function to generate the mouth path. The face consists of a yellow circle with a black stroke, two black eye circles positioned via Cartesian coordinates, and a curved mouth created by the arc generator. The layout uses fixed pixel dimensions (960×500) and centers all elements relative to the middle of the drawing area. React 16.9 manages the component structure, while D3 v5 provides the arc calculation, with no external data source beyond the hardcoded geometry.

Mar 9, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a smiley face as a React component using SVG circles. The face consists of a yellow head with a black stroke, plus two dark eyes positioned symmetrically around the center of a 960×500 viewport. The code defines numeric constants for dimensions, stroke width, eye offsets, and radius, then passes them as props to the `<circle>` elements. It uses React 16.9 and ReactDOM to mount the SVG into the page, with styling that removes page margins and hides overflow. No interaction or animation is present.

Mar 9, 2021
Loading thumbnail…

Fork of Smiley Face Part III

A smiling face is rendered as a yellow circle with black outline, two eyes, and a curved mouth, all centered in an SVG canvas. The visualization demonstrates a React and D3 integration where D3’s `arc()` generator creates the mouth path, while React elements define the circles. The code uses React 16.9, D3 v5, and renders via SVG, with fixed dimensions of 960 by 500 pixels and computed positions based on center coordinates and offset constants.

Mar 9, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example displays a simple, yellow smiley face that scales responsively to fill the browser window, centering itself and drawing its eyes based on calculated offsets. The face renders through React’s declarative SVG components, using `React.createElement` implicitly via JSX to build circles for the head and eyes, with a yellow fill and black stroke. The code manually computes geometric values like radius and position from `window.innerWidth` and `window.innerHeight`, then renders the SVG using `ReactDOM.render`. No external data or interaction is involved; it is purely a static, programmatic drawing.

Mar 9, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a smiley face constructed from three circle elements on an SVG canvas. The yellow face and two black eyes are static, leaving out the smile for partial completion. The code uses raw SVG markup with `circle` elements, positioning them via explicit `cx` and `cy` attributes. The rendering approach is direct and simple, without JavaScript libraries or data processing, creating a static representative of the project's starting point.

Mar 9, 2021
Loading thumbnail…

Fork of Let's Make a Face Part 1

A stylized face made of simple SVG shapes serves as a playful example of basic vector graphics. The visualization shows a yellow circle for the head with two smaller circles for eyes, all defined by hardcoded coordinates and styling. It renders in the browser using raw SVG elements, such as `circle`, with attributes for position, fill, and stroke. No external libraries are used, relying instead on static markup within an HTML page.

Mar 9, 2021
Loading thumbnail…

Fork of Let's Make a Face Part 1

This example shows a simple yellow face made from three SVG circles: a large head and two smaller eyes. The code uses plain SVG elements written directly in an HTML file, with coordinate positions and style attributes set inline. The face is rendered in a 960 by 500 viewport, with the head centered and the eyes placed symmetrically. The drawing relies solely on basic circle shapes, stroke and fill colors, and does not use any external JavaScript libraries or data sources. It is a static, non-interactive illustration.

Mar 9, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a smiley face constructed from three circle elements on an SVG canvas. The yellow face and two black eyes are static, leaving out the smile for partial completion. The code uses raw SVG markup with `circle` elements, positioning them via explicit `cx` and `cy` attributes. The rendering approach is direct and simple, without JavaScript libraries or data processing, creating a static representative of the project's starting point.

Mar 9, 2021
Loading thumbnail…

Let's Make a Face Part 1

A cheerful yellow face composed of simple geometric shapes sits centered on a plain white canvas, with two small black-outlined circles serving as eyes against a larger circular head. The SVG drawing, rendered directly in an HTML page using the inline `<svg>` element, demonstrates basic vector graphics through primitive shape elements like `circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The page structure relies purely on standard web standards without any external libraries, showing how static visualizations can be constructed entirely through hand-written markup and styled by minimal embedded CSS.

Mar 9, 2021