Mihir Deo

@mihir-workspace·7 public vizzes

Vega-Lite API- Sample

The visualization displays car acceleration data across countries of origin using a bar chart, with bar size fixed and color encoding engine weight. Tooltips reveal car model names. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, and loads data from a CSV file via d3.csv. The chart dynamically fits the window and applies customized axis styling for readability.

Mar 10, 2022

Loading thumbnail…

Loading CSV

This example demonstrates loading a CSV file from a remote URL using D3’s `csv` function within a React component. It displays the number of rows and column names in a simple text message via a custom `message` function. The React app uses `useState` and `useEffect` hooks to asynchronously fetch the data and update the view, with a “Loading..” state before the data arrives. The CSV source is a GitHub gist containing the RAL standard color data.

Mar 5, 2022

Loading thumbnail…

React - Mouse Tracking

A React application renders an interactive SVG visualization that tracks mouse movement across a 960 by 500 pixel canvas, displaying a green circle that follows the cursor position. The circle's coordinates update dynamically through React's state management, using the `useState` and `useCallback` hooks to handle `onMouseMove` events. The visualization demonstrates real-time data updates using React's declarative rendering approach with SVG markup, showing how user input events can drive visual feedback through component state.

Mar 5, 2022

Loading thumbnail…

Smiley Face Part III and IV

A smiling face is drawn as an orange circle with a green outline, two black eyes, and a green arc for the mouth, all centered on an SVG canvas. The visualization is built with React and D3.js, where the mouth path is generated using `d3.arc()` with specified inner and outer radii and angle parameters, while the eyes and face are rendered as SVG circles. The code defines reusable components for the face and eyeballs, and positions the elements relative to the canvas center using a translation transform.

Mar 5, 2022

Loading thumbnail…

Smiley Face Part V and VI with ramdom color

A grid of fifty smiley faces, each rendered as an SVG, displays randomly generated colors for the face and eyes using a custom JavaScript function based on a Stack Overflow random-color generator. The faces also vary in eye radius and mouth width through Math.random() calls. Built with React and D3 v7, the visualization uses D3's `range` to create the array of faces and `d3.arc` to draw the mouths, with eye and face circles composed as reusable React components.

Mar 4, 2022

Loading thumbnail…

Smiley Face Part II

An SVG smiley face is rendered with three orange and green circles, including a large face and two black eyes. The composition is built with React and ReactDOM, which generate the SVG elements directly in the browser. The code defines numeric constants for coordinates, radii, and colors, and passes them as props to circle elements. The face is centered at (480, 250) with a radius of 100, while the eyes are positioned offset to either side, all rendered inside a 960 by 500 pixel viewport.

Feb 28, 2022

Loading thumbnail…

SmileFace I

A smiling face rendered as three orange and black SVG circle elements: a large orange face with two small black eyes. The code uses raw SVG markup and the `circle` element for each shape, with explicit `cx`, `cy`, and `r` attributes. The rendering is purely static, with no interaction or animation, and relies on nested `<svg>` containers for each face component. The data source is a simple hardcoded illustration rather than an external dataset.

Feb 28, 2022