Mrunal Saoji

@Mrunal-Saoji·7 public vizzes

Vega-Lite API Template trial

This example uses the Vega-Lite API to create an interactive scatter plot of automobile data from a CSV file, showing miles per gallon against horsepower with points colored by origin and sized by horsepower. Tooltips display the vehicle name on hover. The visualization is built by composing Vega-Lite specifications programmatically via `vl.markCircle` and `vl.encode`, then rendered to SVG through D3’s CSV loader, with Vega and Vega-Lite registered in the browser. Appearance is customized using a config object for axis and label styling.

Dec 3, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automotive data, mapping engine displacement and horsepower for individual car models. It loads the auto-mpg dataset via `d3.csv` and displays a tooltip with the car name on hover. The chart employs a semi-transparent point mark with a custom dark theme and full-window sizing. The code integrates `vega`, `vega-lite`, and `vega-lite-api` alongside `vega-tooltip` for interactive exploration.

Dec 3, 2021

Loading thumbnail…

Loading Data with react

This example demonstrates how to load CSV data in a React application using D3’s `csv` utility and manage it with the `useState` and `useEffect` hooks. It displays a text summary showing the data size in kilobytes, row count, and column count via a custom `message` function. The visualization uses `d3.csvFormat` to compute file size and React 17 with D3 v7, fetching data from a GitHub gist URL. While loading, the interface shows a “Loading...” message before rendering the statistics.

Dec 1, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL, displaying the dataset’s size in kilobytes, row count, and column count. It uses D3 v7’s `d3.csv` method to fetch and parse the data asynchronously. The code also includes commented alternatives using `fetch`, `async/await`, and `d3.csvParse` to show different parsing approaches. The data comes from a GitHub gist containing CSS named colors.

Nov 30, 2021

Loading thumbnail…

Mouse Follower

An interactive visualization renders a single circle that tracks the mouse cursor in real time. The React application uses the `useState` hook to store the cursor’s `clientX` and `clientY` coordinates, updating each mouse move. An SVG circle’s `cx` and `cy` attributes are bound to these state values, producing a smooth follower effect. The example demonstrates combining React’s event handling with D3’s SVG manipulation capabilities for a simple, direct user interface.

Nov 28, 2021

Loading thumbnail…

Smiley face part 1

A grid of eighteen randomly varied smiley faces demonstrates reusable React components for data-driven SVG rendering. Each face is composed of separate background circle, eyes, and mouth elements positioned through a central FaceContainer. The code uses React 17 with D3 v7’s `arc` generator for the curved mouth path, while `d3.range` and `Math.random` generate the face array and prop values for unique appearances. The SVG output is rendered via `ReactDOM.render` into the root element.

Nov 24, 2021

Loading thumbnail…

Square Smiley face

A square smiley face is drawn as an SVG graphic, centered on a yellow circle with black stroke, two black eyes, and an arc-shaped mouth. The design deliberately flattens the classic smiley by using a square canvas dimensions of 960 by 960 pixels. Built with React and D3 v7, the code uses the `d3.arc()` API to generate the mouth path, while React components render the circles and path. Coordinates for the eyes and mouth are fixed constants, creating a static, minimal composition without animation or interaction.

Nov 24, 2021