krishanub03@gmail.com

@Krishanu2206·6 public vizzes

Fork of Vega-Lite API Template 2

This example plots vehicle acceleration against horsepower from the auto-mpg dataset, using Vega-Lite API to construct a scatterplot and D3 to load the CSV data. Each point represents a car, with tooltips revealing the model name on hover. The visualization applies custom axis styling and dark text colors from a config file, and renders responsively to fill the browser window. It demonstrates the Vega-Lite API’s declarative mark specification and encoding methods, such as `vl.markPoint()`, `vl.x().fieldQ()`, and `vl.tooltip().fieldN()`, with Vega tooltips enabled.

Jun 2, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to construct a scatter plot of historic automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, and uses circle color to distinguish the car’s region of origin, with weight mapped to point size and a tooltip revealing the model name. It loads CSV data via `d3.csv` and relies on vega, vega-lite, and vega-lite-api to render the chart, while vega-tooltip adds interactive pop-ups.

Jun 2, 2024

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and style a set of circles using D3.js, with each circle’s position, size, and color defined by a data array. It showcases the D3 general update pattern and method chaining through `select`, `data`, and `join` to bind data to SVG circle elements. The visualization uses `attr` to set `cx`, `cy`, `r`, and `fill` properties, with a semi-transparent overlap effect. The code runs in a reactive environment, allowing the SVG to resize to its container dimensions.

Jun 2, 2024

Loading thumbnail…

Fork of Mouse Follower

A simple React application renders an SVG circle that follows the mouse cursor across a 960 by 500 viewport. The component uses the `useState` and `useCallback` hooks to track the cursor's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes on every `mousemove` event. The visualization demonstrates basic event handling and state management with React and SVG, with no external data source.

Jun 2, 2024

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiley face as a static SVG graphic using React and D3. The face is centered with a yellow circle, two black eyes, and a curved mouth created via the `d3.arc()` API, which generates a path with specified inner and outer radii and start/end angles. React manages the SVG component structure, while D3 computes the mouth’s path geometry. The code explicitly sets coordinates for eye offset, eye radius, and mouth dimensions, producing a clean, scalable vector illustration without animation or data binding.

Jun 2, 2024

Loading thumbnail…

Fork of HTML Starter

A minimal example demonstrates a static SVG circle rendered inside an HTML page. The code directly embeds an `<svg>` element with a single `<circle>` positioned at the center. It uses no external libraries, relying solely on plain HTML and inline SVG markup. The page’s structure is defined entirely in `index.html`, with no accompanying CSS or JavaScript files, serving as a bare-bones starting point for interactive visualizations.

Jun 1, 2024