Manick Vennimalai

@drmaniak·7 public vizzes

Fork of Vega-Lite API Template

This example presents four interactive Vega-Lite visualizations in a two-by-two grid, covering distinct datasets: auto MPG characteristics, San Francisco weekly temperatures, country populations, and global religious demographics. The visualizations, rendered as SVG, use scatter plots, area charts, bar charts, and bubble charts to explore relationships and distributions across the data. The code uses the Vega-Lite API (with vega and vega-lite) to programmatically construct specifications, D3 for data loading via CSV, and Vega Tooltip for hover details. Data originates from the UCI Machine Learning Repository and multiple Gists, with styling customized through a config object.

Jan 29, 2022

Loading thumbnail…

SmileyFace BugFix

This example renders a yellow smiley face composed of SVG shapes, centered on a 960 by 500 canvas. It draws a large yellow circle with a black stroke for the head, two black circles for eyes, and a black mouth formed by an arc path. The code uses React for the component structure and d3’s `arc` function to generate the mouth’s path data with specified inner and outer radii and angular start and end points.

Jan 20, 2022

Loading thumbnail…

Loading Data With React & D3

This example demonstrates a React component that loads a CSV file of CSS named colors using D3’s `csv` utility, storing the result in React state via `useState` and `useEffect`. It displays a summary of the fetched data—file size in kilobytes, row count, and column count—using D3’s `csvFormat` to calculate the byte length. The message updates asynchronously after the data resolves, with a “Loading…” placeholder shown initially. The code runs in a browser with React 17 and D3 v7.

Jan 20, 2022

Loading thumbnail…

Parsing CSV Data with D3

This example demonstrates how to parse a remote CSV file of CSS named colors using D3 v7. It displays the file size in kilobytes, the number of data rows, and the column count in a large text output. The code uses the `d3.csv` API to fetch and parse the data from a GitHub Gist URL, alongside `d3.csvFormat` to measure the reformatted text length. This approach contrasts with an older method using `fetch` and `d3.csvParse`, shown in comments, highlighting the modern concise workflow.

Jan 20, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse as it moves across an SVG canvas, updating its position in real time. The React app uses the `useState` hook to track mouse coordinates and the `useCallback` hook to handle `mousemove` events. A CSV file containing CSS named colors is fetched via the Fetch API, though its contents are only logged to the console and not visualized. React 17 and D3 v7 are loaded from CDN, with rendering handled by React's virtual DOM.

Jan 19, 2022

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. It displays the raw text content of the CSV file in the browser console, highlighting the modern async/await syntax for handling promises. The code fetches the data from a GitHub Gist containing CSS named colors and logs the response text, contrasting with the commented-out nested `.then()` approach. The example uses the standard `fetch()` method with `response.text()` to retrieve the file contents.

Jan 11, 2022

Loading thumbnail…

1.Hello HTML

A grid of eighteen cartoon faces is rendered, each with a yellow circular background, two eyes, and a mouth. The faces use random values for stroke width, eye positioning and radius, and mouth dimensions, making each face unique. The example combines React components with D3 v7's `arc` generator to create the mouth paths, and renders everything as SVG within a React application.

Jan 11, 2022