Sumit Kumar

@sumitkumarju·5 public vizzes

Fork of Vega-Lite API Template

This visualization presents a scatter plot of auto MPG data from the UCI Machine Learning Repository, mapping miles per gallon against horsepower. Each circle’s size encodes vehicle weight, while color distinguishes origin, and hovering reveals the car’s name. The visualization is built using the Vega-Lite API, with d3.csv loading the data and vega-tooltip providing interactive details. The chart fills the browser window, and a custom config adjusts axis and label styling for readability.

Apr 23, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a single text element, “Hello HTML,” styled with large, centered text. It demonstrates a minimal setup using an HTML page with embedded CSS and JavaScript, fetching a remote color palette from a GitHub Gist. The code uses the `fetch` API to retrieve the text file and logs its contents to the browser’s console, illustrating basic data retrieval without any visual rendering.

Apr 22, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This interactive visualization displays a smiling face constructed from basic SVG shapes, including a yellow circle for the head, two black circles for eyes, and two arc-based paths that form the nose and mouth. Built with React and D3.js version 6, the example uses the D3 `arc` API to generate the mouth and nose paths, while rendering everything through an SVG element that fills the browser window. The face scales dynamically to the viewport dimensions, and the code demonstrates how D3's geometry utilities can be combined with React's declarative component model for data-driven graphics.

Apr 22, 2021

Loading thumbnail…

Fork of Hello HTML

This example demonstrates the absolute minimum required to render vector graphics on a web page, using an inline Scalable Vector Graphics (SVG) `<circle>` element to draw a simple yellow smiley face with two black eyes. It does not employ any JavaScript libraries, instead relying purely on static SVG markup embedded directly within the HTML document. The page's body has zero margin and hidden overflow, ensuring the 960 by 500 pixel SVG canvas fills the viewport without scrollbars. The code serves as a bare-bones starting point for understanding how SVG shapes are defined and styled.

Apr 21, 2021

Loading thumbnail…

World Countries Tree

A hierarchical tree visualization displays the countries of the world, organized by continent and subregion, with each node labeled by name. The layout uses a tidy tree algorithm, rendering curved links between parent and child nodes via SVG paths. Implemented with D3 v5, the code employs `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to position nodes, while `d3.zoom` enables pan and zoom interactions. Text size scales inversely with depth, and the data comes from a static JSON file structured by geographic regions.

Nov 8, 2019