Sujit Iwale

@sujitIwale·6 public vizzes

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template visualizes LeetCode problem performance by plotting a line of total accepted solutions against likes, with tooltips revealing problem titles. The chart uses the vega-lite-api to construct the mark, while d3.csv fetches the remote dataset. Appearance is customized through a separate config module, and the visualization renders as an SVG fitted to the browser window. The tooltip handler is initialized via vega-tooltip within the Vega-Lite setup.

Jun 15, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes weekly U.S. gasoline prices as a line chart, with time on the x-axis and price per gallon on the y-axis, emphasizing trends through a simplified, clean design. It uses the Vega-Lite API to construct the chart declaratively, registering it with Vega and Vega-Lite, while D3’s `csv` module is referenced for potential data loading. The data, a static array of timestamped prices, is passed directly to the chart, which renders as a full-window SVG. Custom axis styling and large label fonts are configured to improve readability.

Jun 13, 2022

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a simple yellow emoji-style face with eyes and a curved mouth using React and D3 within an SVG canvas. The face is centered in a 960×500 viewport, with the head drawn as a circle, black-eye dots positioned symmetrically, and a mouth generated using the `d3.arc()` path generator. The code imports React, ReactDOM, and D3 from CDNs, and uses JSX with inline style to remove body margins and fill the screen.

Apr 17, 2022

Loading thumbnail…

D3/React: Smiley Face

Built with React and D3 v7, this example renders a smiley face as an SVG. The code defines a React component that uses D3's `arc()` function to generate a mouth path with specified inner and outer radii, and defines circles for the face and eyes. The face and features are positioned using shared constants for width, height, and offsets. The component renders directly into the DOM via ReactDOM. The visualization demonstrates a hybrid approach, combining React's declarative markup with D3's geometry utilities for generating SVG paths.

Aug 27, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a simple SVG smiley face in a bare-bones HTML page, with a yellow circle for the head and two smaller black circles for eyes. The code uses inline SVG elements—specifically the `circle` element—to draw the shapes, with CSS setting the body margin to zero and hiding overflow. The markup is hand-written directly in the `index.html` file, with no external libraries or JavaScript logic, demonstrating foundational SVG and CSS usage as a minimal starting point.

Aug 27, 2021

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” in large, centered typography. It demonstrates the basic structure of a React component using the `useState` hook and `ReactDOM.render` to mount the app into a `#root` div. The page loads React and ReactDOM from CDN scripts, and the component is defined in `index.js` with a class name for styling. No data or interaction is present, serving only as a starter template.

Nov 10, 2020