Sahaj Singh

@Bigguysahaj·5 public vizzes

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle weight, horsepower, and country of origin using the auto-mpg dataset, loaded via `d3.csv` and rendered with Vega-Lite through the vega-lite-api. It displays circles scaled by weight, colored by origin, with tooltips showing car names. The chart uses a custom configuration for axis styling and readability, and is rendered as an SVG that fills the browser window.

Feb 17, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of automobiles. The visualization uses the Vega-Lite API to generate a chart with customizable point styling, including a semi-transparent fill and a tooltip that reveals the car’s name on hover. It loads data from a CSV file fetched via d3.csv, renders the chart into an SVG using the Vega-Lite renderer, and applies a custom config to adjust axis labels and colors. The plot resizes to fit the browser window using autosize settings.

Feb 5, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example builds a resizable smiley face using React and SVG. The component calculates the face’s dimensions from the browser window size, centering it while maintaining a yellow circle for the head, black stroke for the outline, and two dark eyes positioned symmetrically. The code uses React’s `createElement` via JSX and `ReactDOM.render` to mount the SVG, with all coordinates derived from `window.innerWidth` and `window.innerHeight`. The mouth is not included despite being defined in a commented-out section.

Jan 13, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a simple smiley face rendered as SVG circles, with the face centered on a yellow circle and two black eyes—but the mouth is absent, leaving the expression incomplete. Built with React 16.9, it uses ReactDOM to render the SVG elements to the DOM. The face’s dimensions are computed from fixed width and height constants, with the head’s radius based on the center Y minus half the stroke width. The code does not define the eye offset values or draw a mouth, relying on raw SVG components rather than a charting library.

Jan 13, 2022

Loading thumbnail…

Smiley face part 1

A simple SVG smiley face is rendered in yellow with a black outline, featuring two solid black eyes on a blank background. The React application draws the face using three `<circle>` elements within an SVG viewport sized 960 by 500 pixels. Hardcoded coordinates place the head at the center, with the eyes offset horizontally from the midpoint. React 16.7.0 and ReactDOM 17.0.2 manage the component, while the embedded video from the README demonstrates the development process.

Jan 13, 2022