Skip to main content
Log in
R

Roshan Kumar

@roshankumarbhuyan·9 public vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data from the UCI Auto MPG Data Set. The visualization positions each vehicle by miles per gallon on the x-axis and horsepower on the y-axis, with color encoding for country of origin and circle size representing weight. Tooltips display the car name. The code imports data via d3.csv, configures axes and label styling through a custom config object, and uses the Vega-Lite API to define marks and encodings programmatically before rendering with Vega in SVG format.

Oct 25, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatterplot of automotive data, mapping engine horsepower against fuel efficiency (mpg) with points colored by country of origin. The visualization loads a CSV dataset via d3.csv, applies custom axis and label styling from the config, and renders circles with tooltips showing car names. It demonstrates the vega-lite-api wrapper for declarative chart construction, utilizing vl.markCircle, vl.x, vl.y, and vl.tooltip encodings, with vega-tooltip for interactive hover details.

Oct 25, 2021
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for various car models, using a scatter plot of semi-transparent points. The visualization is built with the Vega-Lite API, which is registered with Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded from a CSV file using d3.csv, and the chart dimensions adapt to the window size. Tooltips are enabled via the vega-tooltip handler, and the axis styling is customized through a config object.

Oct 25, 2021
Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load data with React and D3, displaying a summary of the CSS named colors dataset fetched from a GitHub gist. It uses the `csv` function from D3 to fetch and parse the data, while React’s `useState` and `useEffect` hooks manage the asynchronous loading state. Once loaded, the `message` utility formats the data’s size in kilobytes, row count, and column count for display in a large `<pre>` element. The visualization shows no chart, only textual metadata about the dataset.

Oct 25, 2021
Loading thumbnail…

Fork of Smiley Face Part II

A full-screen yellow smiley face is rendered with SVG, using circles for the head, eyes, and mouth positioned dynamically relative to the window dimensions. The face scales to fit the viewport, with the head’s radius based on half the window height and all features offset from the center. React manages the component structure, while ReactDOM renders the SVG into the DOM, replacing the static markup originally commented in the HTML.

Sep 27, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The head is centered at (480, 250) with a radius of 245, while the eyes are positioned at (350, 180) and (600, 180) with a radius of 50. The code uses raw SVG elements—`circle` tags with attributes for position, fill, stroke, and stroke-width—rather than a library like D3. The page is styled with minimal CSS to remove margins and hide overflow, and the face represents “halfway” progress toward a more complex face.

Sep 27, 2021
Loading thumbnail…

Fork of Hello HTML

This fork of the Hello HTML example renders an empty HTML page with a YouTube video embedded in the README. The video demonstrates a basic interactive visualization, though the actual code consists only of an empty body element. The example relies on standard HTML structure, with the yt embed iframe serving as the primary visual content, while no JavaScript or D3 APIs are invoked.

Sep 27, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The head is centered at (480, 250) with a radius of 245, while the eyes are positioned at (350, 180) and (600, 180) with a radius of 50. The code uses raw SVG elements—`circle` tags with attributes for position, fill, stroke, and stroke-width—rather than a library like D3. The page is styled with minimal CSS to remove margins and hide overflow, and the face represents “halfway” progress toward a more complex face.

Sep 26, 2021
Loading thumbnail…

Fork of Hello HTML

This example shows a simple, static SVG face composed of a large yellow circle with two black eyes. The page renders the shape using raw SVG elements—a parent `<circle>` for the face and two smaller `<circle>` elements for the eyes—all positioned within an inline `<svg>` tag. The HTML and CSS set the body margin to zero and hide overflow. The visualization is a minimal fork of the “Hello HTML” template, demonstrating basic SVG drawing without external libraries or data.

Jul 21, 2021