Mayank Kumar

@mank-423·14 public vizzes

Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width for the Iris dataset. Each point represents an individual flower, positioned based on its measurements, with tooltips displaying the sepal length value. The visualization is built with React and rendered as an SVG, using D3 v5's `scaleLinear` for axis scaling and `extent` to compute data domains. Custom axis components generate ticks, while circular marks are drawn with a fixed radius. The data is loaded from a CSV file hosted on GitHub.

Sep 24, 2023

Loading thumbnail…

Bar char

A bar chart displays the ten most populous countries in 2020, using data from the United Nations World Population Prospects 2019. Horizontal bars encode each country’s population on a linear scale, with formatted axis ticks and a labeled axis. Built with React and D3 v5, the visualization uses `scaleBand` for country positions and `scaleLinear` for population lengths, rendering rectangles as SVG marks with tooltips.

Sep 24, 2023

Loading thumbnail…

barGraph

This visualization displays the 2020 populations of countries as horizontal bars, sorted by country name. Using React for rendering, it maps each country to a rectangle within an SVG canvas, with bar lengths proportional to population values. The code loads UN population data from a CSV file via `d3.csv`, and uses D3's `scaleBand` and `scaleLinear` to compute the y-axis positions and x-axis scaling, respectively. A loading state shows "Loading..." text until the data arrives.

Sep 24, 2023

Loading thumbnail…

Render D3 + React

This example shows how React renders a pie chart from CSS named colors, where each slice’s fill matches its corresponding RGB hex value. The code loads CSV data via `d3.csv` inside a React component, using `useState` to hold the data while displaying a loading message. The chart is drawn with `d3.pie` and `d3.arc` to generate SVG paths, translated to the center of a 960×500 viewport. React 18 and D3 v7 are loaded from CDNs, with SVG output handled declaratively through JSX.

Sep 24, 2023

Loading thumbnail…

PieChar

This example shows a radial burst of colored arcs, one for each CSS named color, arranged around a central point. The visualization uses React to render SVG paths, with D3's `pie` function computing the arc angles and the `arc` function generating the path geometry. Each slice is filled with its corresponding color from the CSS named colors dataset, which is loaded asynchronously via D3's `csv` utility. The code demonstrates how D3 can be used for data loading and geometry calculation while React handles the rendering logic.

Sep 24, 2023

Loading thumbnail…

Load data with d3

This example demonstrates loading a CSV dataset of CSS named colors and rendering each color as a horizontal bar. The visualization shows how React state manages asynchronous data loading with d3.csv, displaying a loading message until the data arrives. Each row becomes a styled div element with its background color set from the ‘RGB hex value’ column. The code combines React 18’s useState hook with d3.v7’s csv parsing, while a separate message utility calculates dataset size, row count, and column count from the parsed data.

Sep 24, 2023

Loading thumbnail…

React + d3

This example displays basic summary statistics about a CSS named colors dataset fetched from a GitHub gist. Using `d3.csv` to load the remote CSV file, it calculates the file size in kilobytes, the number of data rows, and the number of columns, presenting these three values as a plain text message in the DOM. The code demonstrates a simple React-free integration of d3.v7 with vanilla JavaScript, relying on `d3.csvFormat` to compute byte length and the `data.length` and `data.columns.length` properties for the row and column counts.

Sep 24, 2023

Loading thumbnail…

Fork of Vega-Lite API Template 2

This example displays a scatter plot of automobile fuel efficiency against horsepower, with points colored by country of origin and tooltips showing model names. The visualization uses the Vega-Lite API to construct the chart declaratively, combining `vl.markCircle` with encodings for the quantitative axes and nominal color. Data comes from the UCI Auto MPG dataset loaded via `d3.csv`. The code integrates vega, vega-lite, and vega-lite-api libraries, with additional tooltips from vega-tooltip and custom axis styling from a config object.

Sep 24, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles. It uses a scatter plot of points with a fixed size and low opacity to show data density, with tooltips revealing the car name. The visualization is built using the Vega-Lite API, registering it with Vega and Vega-Lite, and configures axes and label styling through a custom config object. Data is loaded from a remote CSV file via the `d3.csv` method.

Sep 24, 2023

Loading thumbnail…

Load data to React

This example shows basic information about a remote CSV dataset, displaying its file size in kilobytes, row count, and column count as plain text. It loads the CSS named colors dataset from a GitHub gist using D3 v7’s `d3.csv` promise method. The data is then formatted with `d3.csvFormat` to calculate the byte size, while `data.length` and `data.columns.length` provide the row and column totals. The result is rendered into a `<pre>` element via `textContent`, with an alternative commented-out approach using `fetch` and `d3.csvParse`.

Sep 23, 2023

Loading thumbnail…

CSV de

This example loads a CSV file of CSS named colors from a GitHub gist and displays basic metadata about it in large text: the file size in kilobytes, the number of rows, and the number of columns. It uses `d3.csv` to fetch and parse the data, then `d3.csvFormat` to compute the size, and writes the summary to a `pre` element. The code also includes an alternative approach using `fetch` with `d3.csvParse`, though it is commented out.

Sep 23, 2023

Loading thumbnail…

ReactMouse

A circle tracks the mouse's position across an SVG canvas, creating a simple interactive visualization of pointer movement. Built with React's `useState` and `useCallback` hooks, the circle's `cx` and `cy` coordinates update dynamically via the `onMouseMove` event handler on the SVG element. The chart uses D3 v7's `arc` module (imported but unused) and React 18, rendering in SVG within a 950x500 pixel viewport.

Sep 23, 2023

Loading thumbnail…

Load and parse CSV data

This example demonstrates how to fetch and parse a CSV file containing CSS named color data. The page uses the JavaScript `fetch` API to request the remote CSV file from a GitHub Gist, then converts the response to plain text with `response.text()`. The program logs the raw CSV text to the browser console, showing the file contents without any visual rendering. The implementation relies on an asynchronous helper function, `fetchText`, which awaits both the network request and the text conversion before outputting the data.

Sep 23, 2023

Loading thumbnail…

First Class

This visualization shows a smiley face built with SVG primitives, featuring a yellow circle with a thick black outline, two offset eyes, and a curved mouth rendered as an arc. The example uses a React component structure, with the face, eyes, and mouth defined as nested SVG elements within a transformed group. D3 v7’s `arc` generator constructs the mouth path by specifying inner and outer radii and start and end angles, while ReactDOM renders the final composition into a root div.

Sep 23, 2023