gujjapooja7@gmail.com

@Poojagujja·25 public vizzes

World Map

A world map displays country boundaries alongside graticules using World Atlas TopoJSON data. The visualization employs d3.geoNaturalEarth1 and d3.geoPath for projection and rendering, with d3.geoGraticule generating the grid. React manages the component structure, while CSS styles landmasses, oceans, and boundary strokes. The code processes topology through topojson.feature and topojson.mesh to extract land polygons and interior borders.

May 7, 2023

Loading thumbnail…

Wine Line Chart

The visualization displays the relationship between wine density and quality using a line chart drawn as an SVG path. It plots the two variables from a remote CSV dataset onto linear scales, with axis tick marks and labels styled in muted tones. The chart is built with React components and D3.js v5, using `scaleLinear` for the axes and the `line` API with `curveNatural` to create a smooth interpolated line through the data points.

May 7, 2023

Loading thumbnail…

Iris Class Menus with React

This example shows a single interactive dropdown menu for selecting an Iris species from a dataset of three classes. The selected value updates as the user chooses from the menu. Built with React, it uses the `useState` hook to manage the selected value, and a reusable `Dropdown` component that renders a native `<select>` element. The options are hardcoded as an array of objects, and the selection is logged to the console. React DOM renders the App to a root div, with styling for large fonts.

May 7, 2023

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries for 2020, using horizontal bars without any axes or labels. The chart uses React with a `useState` hook and `useEffect` to load and parse data from a CSV file via D3’s `csv` function, then applies `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangle positions and widths. Data comes from the United Nations World Population Prospects 2019 dataset.

May 7, 2023

Loading thumbnail…

Visualizing Data with React and D3

This example visualizes CSS named colors from a CSV dataset as a radial burst of wedges, each filled with its corresponding RGB hex value. Using React for component state and rendering, the app loads data with D3’s `csv` utility, then computes wedge geometries with `d3.pie` and `d3.arc`. The resulting SVG paths are generated in React’s declarative JSX, with the concentric layout centered on the viewport. While data loads, a loading message appears. The visualization demonstrates a hybrid approach where D3 handles data parsing and layout calculations, while React manages the DOM rendering.

May 7, 2023

Loading thumbnail…

Loading Data with React and D3

This example demonstrates loading data with React and D3 by fetching a CSV of CSS named colors and displaying summary statistics as text. The React component uses the `useState`, `useEffect`, and `useCallback` hooks, while D3’s `csv` function retrieves the dataset from a GitHub gist URL. Once loaded, the data’s size in kilobytes, number of rows, and column count are computed using `d3.csvFormat` and rendered directly in a `<pre>` element. A loading message appears until the asynchronous fetch completes.

May 7, 2023

Loading thumbnail…

Parsing CSV Data in D3

This example demonstrates how to load and parse CSV data using D3.js. It fetches a CSS Named Colors dataset from a GitHub gist, then uses `d3.csv` to parse the remote file and `d3.csvFormat` to calculate the data size. The visualization presents the file size in kilobytes, the total number of rows, and the column count as large text on a plain page. It also includes commented alternatives using `fetch` with async/await and a promise-based approach.

May 7, 2023

Loading thumbnail…

Mouse Follower

This example shows an SVG circle that follows the mouse pointer as it moves over a 960×500 canvas. The circle is positioned by updating its `cx` and `cy` coordinates based on the `clientX` and `clientY` values from the mouse event. Built with React and ReactDOM, the app uses a `useState` hook to store the current pointer position and a `useCallback` handler to update it on each mouse movement. The rendering is done entirely with SVG, with a fixed circle radius of 30 pixels.

May 7, 2023

Loading thumbnail…

Menus with React

This example demonstrates a React-based interactive dropdown menu for selecting a pet from a list of six options, defaulting to hamster. The component uses React’s `useState` hook to manage the selected value and logs each choice to the console. The `Dropdown` component renders a native `<select>` element, mapping the provided options to `<option>` elements and handling changes via an `onChange` event. The code imports React and ReactDOM from UMD builds and renders the `App` component into a root div, displaying the dropdown with a styled label.

May 7, 2023

Loading thumbnail…

Line Chart

This interactive line chart displays temperature trends over time from the Data Canvas Sense Your City dataset. The visualization uses React to render an SVG graph with time-scaled x-axis and linear-scaled y-axis, applying a natural curve to connect data points smoothly. D3 v5 utilities generate the axes and line path, while React hooks load and parse the CSV data. The chart includes labeled axes showing days on the horizontal axis and temperature values on the vertical axis, with a clean, minimal design emphasizing the data pattern.

May 7, 2023

Loading thumbnail…

New Scatter Plot

A scatter plot displays the relationship between seed length and width using data loaded from a CSV file. The visualization is rendered as an SVG within a React application, utilizing D3 v5 for data processing and scaling. Individual data points appear as circular marks, colored in a muted teal, with tooltips that display the x-axis value. The chart includes labeled axes and a Poppins font, with tick marks styled in a light gray.

May 7, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for individual iris flowers. The React-based visualization uses D3 v5 scales and axes to map the quantitative values to SVG coordinates. Data loads asynchronously via `d3.csv`, with each flower represented as a circular mark. The chart includes clearly labeled axes with rotated y-axis text, formatted tick values using `d3.format`, and a custom tooltip system that displays the petal length when hovering over a point. Styling is applied through CSS classes for ticks, labels, and marks.

May 7, 2023

Loading thumbnail…

New Bar Chart

This visualization displays the top 10 most populous urban regions or countries projected for 2050 as horizontal bars without axes. The chart uses React hooks (useState, useEffect) to asynchronously load and parse United Nations Urban Population Prospects 2018 data via d3.csv. d3.scaleBand and d3.scaleLinear position bars, with widths mapped to population values using d3.max. The SVG rendering includes only rectangles, omitting scales, ticks, and labels.

May 7, 2023

Loading thumbnail…

Visualizing Data with React and D3

May 7, 2023

Loading thumbnail…

Dot color change when moving mouse

A circle follows the mouse pointer across an SVG canvas, and its fill color changes to a random value from a predefined palette on every mouse movement. The React application tracks mouse coordinates through an `onMouseMove` handler on the SVG element, updating state with `useState` to reposition the circle and select a new color. Rendering is handled by ReactDOM, which updates the circle’s `cx`, `cy`, and `fill` attributes in response to the state changes.

May 7, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and log raw CSV text from a remote URL using the browser's Fetch API. It defines an asynchronous function that retrieves the file from a GitHub gist containing CSS named colors and outputs the parsed text to the console. The code relies on native JavaScript `fetch` and `response.text()` methods, with a commented alternative showing a promise-chain approach. No visualization is rendered; the focus is solely on loading and inspecting CSV data structure.

May 6, 2023

Loading thumbnail…

PRT6_Face_Part 7

A grid of 18 randomly colored faces uses SVG through React components, with each face constructed from a background circle, two eyes, and a mouth. The project generates random values for face features like eye offset, eye radius, and mouth size using JavaScript's `Math.random`, while D3's `range` and `arc` functions create the mouth path. Each face is rendered in an SVG canvas, and the code leverages D3.v5 and React to display the varied results.

Apr 16, 2023

Loading thumbnail…

PRT6_Face_Part 6

A grid of small, yellow cartoon faces, each with randomized eye placement, eye size, and mouth dimensions, fills the viewport. The faces are rendered as SVG shapes composed of a `BackgroundCircle`, two `Eyes` circles, and a `Mouth` path. Built with React and D3 v5, the app generates the random parameters per face, while the `d3.arc` API constructs the mouth’s arc path.

Apr 16, 2023

Loading thumbnail…

PRT6_Face_Part 5

A simple SVG face composed of a yellow background circle, two eyes, and a mouth is rendered with React components and D3's arc generator. The face is centered using an SVG group transform, with the background circle sized relative to the viewport height. D3 v5 provides the arc path for the mouth, while React manages the component structure and props for positioning the facial features.

Apr 15, 2023

Loading thumbnail…

PRT6_Face_Part 4

A smiling face is drawn using SVG circles and an arc path, with a yellow head, black outline, two eyes, and a partial mouth. The visualization is built with React components and ES6, using D3's `arc` generator to create the mouth shape. The code positions elements around a center point and uses a `BackgroundCircle` component for the head. The rendered output is displayed via ReactDOM, with the SVG dimensions set to 960 by 500 pixels.

Apr 15, 2023

Loading thumbnail…

PRT6_Face_Part 3

A smiling cartoon face rendered with React and D3 v5 using SVG. The face consists of a yellow circle for the head, two eyes, and a mouth drawn with the d3.arc generator. React manages the component structure and SVG elements, while D3 computes the mouth's arc path. The face is centered using SVG transforms, with fixed dimensions of 960 by 500 pixels.

Apr 15, 2023

Loading thumbnail…

PRT6_Face_Part 2

This example shows a simple cartoon face made of three yellow and black circles, with two smaller eye circles positioned symmetrically around the center. The face is rendered as SVG using React, with hardcoded numerical constants for dimensions, stroke width, and eye placement. React renders the SVG elements directly into the DOM via ReactDOM, using JSX to define the circle shapes. The code imports React and ReactDOM from their respective UMD bundles and computes positions like center and eye offsets with JavaScript variables.

Apr 15, 2023

Loading thumbnail…

PRT6_Face_Part 1

A yellow circle with a thick black outline occupies the center of an SVG canvas, serving as a face. Two smaller black circles are positioned as eyes on the upper half of the face, leaving the lower half blank, as indicated by the README’s note about being halfway to a smiley face. The visualization uses inline SVG shapes rendered through static HTML, with coordinates and stroke widths hardcoded directly in the markup. No JavaScript libraries or dynamic data are involved; the example relies purely on SVG’s native circle elements for its minimal composition.

Apr 15, 2023

Loading thumbnail…

Smiley Face Part 1

A large yellow circle with a black outline serves as the face, while two smaller black circles positioned symmetrically on either side form the eyes. The SVG is drawn directly in HTML with hardcoded coordinates, using a 960 by 500 viewport and concentric circle elements. The design is static, with no interactivity or animation, and represents the first step toward a smiley face, omitting the mouth. The code sets the face center at (480,250) with a radius of 245, and places each eye 130 pixels away from the center horizontally, 70 pixels above it.

Apr 15, 2023

Loading thumbnail…

Fork

This example demonstrates a blank HTML page that serves as a minimal starting point for building a visualization with React. It shows an empty document structure with no visible content or interactive elements. The code uses plain HTML and CSS, with an empty body element and no JavaScript logic or external libraries. It provides a clean scaffold for developers to add their own components, data, and rendering logic, such as D3.js or React hooks, in a fresh project environment.

Apr 15, 2023