Skip to main content
Log in
S

Shashwat Kumar

@shashwat9kumar·14 public vizzes

Loading thumbnail…

Fork of Bar chart with margin convention

This fork of a bar chart displays the top 10 countries by population for 2020, using horizontal bars ranked from largest to smallest. The visualization loads CSV data from a GitHub gist and renders it as SVG rectangles within a specified margin convention. Built with React and D3 v7, the code uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `max` to determine the domain. The React `useState` and `useEffect` hooks manage asynchronous data loading, while SVG `<rect>` elements are mapped within a translated group to respect the margins.

Jul 27, 2021
Loading thumbnail…

Bar chart

A horizontal bar chart displays the top ten countries by population for 2020, sourced from a UN population CSV file. The chart encodes each country's population as the width of a rectangle, using D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The visualization is built with React, rendering SVG elements directly into the DOM.

Jul 27, 2021
Loading thumbnail…

Visualizing data with React D3

A pie chart displays CSS named colors as equal-width slices, with each slice filled by the exact color it represents. The visualization loads data from a CSV file fetched via D3’s `d3.csv`, then uses D3’s `pie` and `arc` generators to compute the slice geometry. Rendered as SVG paths within a React component using React hooks (`useState`, `useEffect`), the chart updates once the data arrives, showcasing the integration of React and D3 for data-driven color exploration.

Jul 22, 2021
Loading thumbnail…

Largest 5 countries

This visualization presents the largest 5 countries by population, using horizontal bars segmented by religion to show the distribution within each country. Built with the Vega-Lite API, it loads data from a CSV file and renders the chart using SVG. The code configures axis styles, tooltips, and uses a custom `config.js` for appearance, with the final visualization fit to the window size. It leverages the vega-lite-api library, d3.csv for data loading, and vega-tooltip for interactivity.

Jul 22, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of auto-mpg data displays horsepower by country of origin, with each point’s size and opacity fixed. The visualization is built using the Vega-Lite API, which compiles specifications to Vega and renders to SVG within a D3 environment. Data is loaded via `d3.csv` from a remote gist, and interactive tooltips are enabled through `vega-tooltip`. The chart fills the browser window, with custom fonts and axis styling configured for readability.

Jul 21, 2021
Loading thumbnail…

Loading data with React D3

This interactive web page demonstrates how to load and summarize a CSV dataset using React and D3. A large text display shows three key statistics about the data—the file size in kilobytes, the number of rows, and the number of columns—computed by the `message` function. The application fetches the data from a remote CSV file containing CSS named colors via `d3.csv`, then uses React’s `useEffect` and `useState` to manage the asynchronous loading and display the results.

Jul 21, 2021
Loading thumbnail…

React + D3 -Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3’s `d3.csv` method, fetching a remote file of named CSS colors and displaying basic statistics about the dataset. It reports the file size in kilobytes, the total row count, and the number of columns, all rendered as large text within an HTML `<pre>` element. The code relies on D3 v7 and React, with a commented-out alternative using `fetch` and `d3.csvParse` for comparison.

Jul 16, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js, displaying the dataset’s size, row count, and column count in a large preformatted text block. It uses `d3.csv` to fetch the remote file and `d3.csvFormat` to measure its raw size, while `data.length` and `data.columns.length` provide the row and column totals. The data source is a GitHub gist containing CSS named colors. The code includes commented alternatives using `fetch` and `d3.csvParse` to show manual parsing.

Jul 16, 2021
Loading thumbnail…

Circle follow mouse

A single circle follows the mouse cursor within an SVG canvas. The visualization demonstrates pointer tracking in React, using state to store the current mouse coordinates and updating the circle's `cx` and `cy` attributes on every mousemove. The code uses React’s `useState` and `useCallback` hooks, with the SVG rendered directly via ReactDOM. D3 v7 is loaded but not actively used, as the rendering relies purely on React’s declarative SVG elements. The mouse position defaults to the canvas center before any movement.

Jul 16, 2021
Loading thumbnail…

Multiple faces and mutliple variations

A grid of eighteen cartoon faces displays the visual variety possible when randomizing six facial parameters: stroke width, eye offset, eye radius, mouth radius, and mouth width. Each face renders as an SVG circle with two eyes and an arc-based mouth, positioned via a shared face container that translates to the center of its cell. The example uses React to map over a range of numbers, generating each face component with randomized values from D3’s `random` API. The `Mouth` component leverages D3’s `arc` generator to create the half-circle smile.

Jul 15, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomized smiley faces is generated using React components and rendered as SVG. Each face is composed of a yellow background circle, two eyes, and a mouth, with positions and sizes varying per face through JavaScript’s `Math.random()`. The visualization uses d3’s `arc` API to construct the mouth path and React’s `ReactDOM.render` to display the output. Faces are arranged via a `range` from d3, mapping over an array to produce multiple independent instances.

Jul 15, 2021
Loading thumbnail…

SK - Smiley Face (React + D3)

This example renders a yellow smiley face as an SVG graphic using React and D3. It defines fixed dimensions for the face circle, eyes, and mouth, computing positions relative to the center of the viewport. The mouth is drawn with the `d3.arc` path generator, configuring inner and outer radii along with start and end angles to create the curved smile. React manages the component structure, while D3 provides the arc calculation for the path element.

Jul 15, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This interactive visualization renders a smiling face that adapts to the browser window's dimensions. It shows a yellow circle with black outlines for the face and eyes, centered dynamically. The code uses React and ReactDOM to generate an SVG element, calculating the radius, eye offsets, and stroke width based on `window.innerWidth` and `window.innerHeight`. The face is drawn using nested `<circle>` elements within an SVG `<g>` transform group, with coordinates relative to the center point.

Jul 15, 2021
Loading thumbnail…

Hello

A large yellow circle with a bold black outline dominates an otherwise blank SVG canvas, centered at coordinates 480, 250 with a radius of 245. Two smaller unfilled circles sit symmetrically on either side of the vertical center, creating a minimal face-like composition. The visualization is rendered entirely through hand-written SVG elements in a single `index.html` file, using no external JavaScript libraries or data sources. The body margin is set to zero with overflow hidden, presenting the graphic flush against the viewport edges.

Jul 8, 2021