Pathan Khuvanejarkhan

@pathanishere·10 public vizzes

Bar Chart

This example shows a bar chart of the population of India across five census years, drawing horizontal bars whose widths correspond to population values. As the largest populations produce the longest bars, the chart quickly communicates relative magnitudes. Built with React and D3, it uses D3's `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with `scaleOrdinal` and `schemeDark2` providing the bar colors. The data is loaded from a remote CSV file via D3's `csv` function and displayed as SVG rectangles with tooltip titles.

Jan 29, 2023

Loading thumbnail…

Move current Position

A single circle in an SVG moves fluidly across an 800×500 canvas, tracking the user's mouse position in real time. The circle's center coordinates are updated on every mouse move event using React's `useState` hook, with D3.v7 handling the SVG rendering. The example demonstrates how to combine React's state management with SVG coordinate updates, compensating for the SVG's `transform` translation offset in the event handler.

Jan 29, 2023

Loading thumbnail…

Bar chart Testing

This example displays a horizontal bar chart of Indian population data by year, using React to render SVG elements. D3’s `scaleLinear` maps population counts to bar widths, while `scaleBand` positions bars along the y-axis and `scaleOrdinal` assigns colors from `schemeDark2`. The code fetches CSV data via D3’s `csv` method, parses the first five entries, and draws axes with SVG lines and ticks. Both D3 v7 and React 18.2 are used, with the visualization mounted through `ReactDOM.createRoot`.

Jan 29, 2023

Loading thumbnail…

Pie Chart 2

This example displays a pie chart with four equal slices, each filled with a different color from a CSV dataset loaded via D3’s `csv` method. Built with React 18 and rendered as SVG, the chart uses `d3.arc` with an inner radius of zero and an outer radius of 200 to generate the paths. The slices are positioned by calculating start and end angles for each quarter, and hovering scales the arcs via CSS transitions. The data source is a static CSV fetched from a GitHub gist.

Jan 28, 2023

Loading thumbnail…

Create PI

This example visualizes a color palette as a pie chart, with each slice filled using the hex value from its corresponding data row. The chart is built with React and rendered as SVG, using D3’s `arc` to generate the pie slices and an inner radius to create a donut effect. Each slice’s angle is calculated manually by dividing the circle based on the data length. The data is fetched from a remote CSV file containing color keywords and their RGB hex values, then parsed with `d3.csvParse`. The visualization updates dynamically once the data loads.

Jan 28, 2023

Loading thumbnail…

Vega Lite Api

This example demonstrates a minimal React application that renders a static "Hello World" heading using React 18’s `createRoot` API. It loads React, ReactDOM, and the Vega-Lite API from unpkg, but the code does not yet invoke Vega-Lite for charting. The setup shows how to integrate Vega-Lite into a React component structure, with the App component returning JSX and mounting into a root div. The focus is on initializing the React framework with external visualization libraries available for future use.

Jan 28, 2023

Loading thumbnail…

CSV Data

This example demonstrates fetching and parsing a remote CSV file to display a summary of its contents, including the number of rows, columns, and file size in kilobytes. The React app uses the `fetch` API to retrieve the data, then leverages `d3.csvParse` to convert the raw text into a structured table, which is inspected to compute the statistics. The resulting message is rendered inside a `<pre>` element with a large font size, providing a minimal and direct visualization of the dataset's dimensions. The code relies on D3 v7, React 18, and the ReactDOM client.

Jan 27, 2023

Loading thumbnail…

CSV Data

This example displays a large, centered “Hello HTML!” message using plain HTML and CSS, with no external libraries or data processing. The page consists of a single styled `div` element whose text is scaled to a massive font size via a `.message` class, demonstrating minimal markup and styling in a static web page. It serves as a bare-bones starter for adding JavaScript later, though no JavaScript behavior or data visualization is present in the current code. The rendering approach relies entirely on the browser’s native HTML and CSS capabilities.

Jan 27, 2023

Loading thumbnail…

Test HTML

A cartoon face composed of SVG shapes is rendered on a yellow circle with a black stroke. The face includes two black eyes and a smile drawn as an arc path. The visualization uses React components to structure the face, with D3’s `arc` API generating the smile path. The face is centered within an SVG canvas of 960 by 500 pixels, and the code demonstrates a combination of React for UI components and D3 for geometric calculations.

Jan 27, 2023

Loading thumbnail…

Fork of Hello HTML

A yellow face with black outline and two black eyes is drawn as an SVG using React. The code defines a React `App` component that returns an SVG with `circle` elements for the face and eyes, using ReactDOM to render it into the `#root` container. Dimensions and positions are handled via constants, while D3’s `arc` is imported but unused in this static composition.

Jan 27, 2023