shubhamg3

@shubhamg3·8 public vizzes

Fork of Smiley Face Part II

This example displays a foot insole visualization, rendered as a smiley face shape using React. It shows the outline of the insole along with sensor positions and pressure values, with a side parameter indicating left or right. The code uses the `InsoleView` component from the `@feetme/insole-view-react` library, along with React and ReactDOM. The visualization is built from explicit coordinate arrays for the outline, sensors, and capacitance values, providing a direct mapping of sensor data to a geometric representation.

Jul 1, 2021

Loading thumbnail…

Fork of Let's make a map with D3.js!

This fork of a map-making tutorial uses D3.js to render a natural Earth projection of the world. The visualization first draws a blue sphere as a background, then fetches country boundary data from the `world-atlas` package’s 110m JSON file. It converts the TopoJSON features using the `topojson` library and draws each country as a light green path with a faint black stroke, using `d3.geoPath` with the `geoNaturalEarth1` projection. The map is displayed as static SVG in a 960×500 viewport.

Jul 1, 2021

Loading thumbnail…

Insole

This SVG visualization, titled "Insole," traces a single continuous path across a portrait-oriented canvas. The path begins at the left edge and follows a smooth, sinuous curve that rises and falls, creating a shape reminiscent of a foot or insole. The black, stroked line changes direction gradually, forming a closed, organic contour. The code is pure SVG markup, using absolute path coordinates (`M` and `L` commands) within a `<path>` element, with no external JavaScript libraries or data processing involved.

Jul 1, 2021

Loading thumbnail…

Mouse follower

A yellow circle tracks the mouse pointer across an SVG canvas. The visualization demonstrates real-time interaction using React's state management to update the circle's position on every mouse movement. The code uses React's `useState` hook to store cursor coordinates and SVG's `onMouseMove` event handler to trigger position updates. Each mouse movement causes the circle to re-render at the new location, producing a direct and immediate visual response to user input.

Jul 1, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates fetching a plain-text CSV file from a GitHub Gist and printing its contents to the browser console. The visualization is minimal, containing only an HTML page with a script that uses the `fetch` API and `response.text()` to retrieve and log the data. No parsing or graphical rendering occurs; the code directly outputs the raw text, which appears to be a list of CSS color names and values. The data source is specified by a hard-coded URL pointing to a gist by the author shubhamg3.

Jul 1, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and read a CSV file from a remote URL, logging its raw contents to the browser console. It uses the Fetch API with async/await to request the data from a GitHub gist containing CSS color names. The code relies on the standard `fetch` and `response.text()` methods to retrieve the payload, without any data parsing or visualization occurring. The page structure is minimal, consisting only of an HTML document with an embedded script that executes the request automatically.

Jul 1, 2021

Loading thumbnail…

Fork of Hello HTML

This example presents a nearly empty HTML page, embedding a YouTube video within an iframe as its primary visual content. The page structure is minimal, containing only a document title and no other visible elements or JavaScript. The code demonstrates the foundational structure of an HTML document using standard tags like `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>`, but does not incorporate any data visualization libraries or dynamic rendering techniques. It serves as a static baseline for futher development, showing how raw HTML can frame external media without additional scripting or data binding.

Jul 1, 2021

Loading thumbnail…

Start

This example renders a smiley face using React components and D3.js. It constructs a yellow circle with a black stroke, two black eyes, and a mouth created with D3's `arc()` function. The SVG is centered using a `g` transform, and the mouth arc is defined by inner and outer radii with specified start and end angles. The visualization uses ReactDOM to render the SVG directly into the DOM.

Jul 1, 2021