J

JaiyaGhanta@my.unt.edu

@JaiyaGhanta·20 public vizzes

Loading thumbnail…

Question 1

This pie chart visualizes the proportional distribution of values across different categories from a CSV file hosted on GitHub Gist. Each slice represents a category, with its size corresponding to the numeric value in the dataset. The visualization uses D3 v6 APIs `pie()` and `arc()` to compute slice geometry and generate SVG `path` elements, while `scaleOrdinal` with `schemeCategory10` assigns distinct colors. Labels are positioned at slice centroids using `arcGenerator.centroid()`, and the chart includes custom axis labels for "Categories" and "Proportion of Total" within a bordered SVG container.

Loading thumbnail…

Question 2

This area chart displays yearly values as a single filled region, showing the trend of data over time. The visualization uses D3.js v6 with a linear scale for both axes and an area generator to create the steelblue path. Data is loaded from a GitHub Gist CSV file and rendered as an SVG, with axis labels added using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Activity 7.1

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length across three iris species. Each point represents a flower, colored by species using a categorical color scale. The visualization is built with D3.js, using `scaleLinear` and `scaleOrdinal` for scaling, `axisBottom` and `axisLeft` for axes, and `csv` to load data from a GitHub gist. The plot fills the window and includes labeled axes for petal width and sepal length.

Loading thumbnail…

Activity_6 Question4

This bubble chart displays the relationship between average PM2.5 levels, average NO2 levels, and population across global cities. The visualization positions each city as a circle along x- and y-axes for the two air quality metrics, while circle size encodes population using d3.scaleSqrt. The chart draws SVG circles with d3.scaleOrdinal color mapping per city, and loads data from a GitHub-hosted CSV via d3.csv. Axes are generated with d3.axisBottom and d3.axisLeft, and the rendering includes labeled axes, stroke outlines, and 0.7 opacity for overlapping bubbles.

Loading thumbnail…

Activity_6Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes its make’s horsepower (x-axis) and torque (y-axis), while the radius scales with highway MPG and color categorizes the brand. Built with D3 v7’s `scaleLinear` and `scaleOrdinal` APIs, it renders as an SVG with an interactive tooltip that appears on mouseover. The data is loaded from a local CSV file, and a legend explains the MPG bubble sizes and color-coded makes.

Loading thumbnail…

Activity_6 Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car makes, with each bubble’s position determined by horsepower and torque on the x- and y-axes, and its size encoding MPG. The data comes from a CSV file loaded via `d3.csv`. The chart uses D3 v7 scales (`d3.scaleLinear`) for axes and bubble size, `d3.scaleOrdinal` with `d3.schemeCategory10` for color, and SVG circles with interactive tooltips that display make and metric values on mouseover.

Loading thumbnail…

Activity_6 Question 3

This interactive scatter plot visualizes the relationship between horsepower and fuel efficiency (MPG) for cars, with each point colored by the vehicle’s region of origin (USA, Europe, Japan). The visualization uses D3.js v7 (d3.v7) to render SVG elements, including circles that respond to mouseover events by displaying a tooltip with the car’s name, horsepower, and MPG. Data is loaded from a remote GitHub CSV file using `d3.csv`, and scales are constructed with `d3.scaleLinear` and `d3.scaleOrdinal` to map the quantitative and categorical attributes, respectively.

Loading thumbnail…

Activity_6 Task3.2

This interactive scatter plot visualizes the relationship between car horsepower and fuel efficiency (MPG), with data points colored by the car's country of origin. Built using D3.js v7, the visualization loads CSV data from a GitHub repository and renders it as an SVG with smooth hover tooltips displaying detailed car information. A legend distinguishes between USA, Europe, and Japan vehicles. The implementation uses standard D3 APIs including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `csv`, applying a `transition` for animated tooltip effects.

Loading thumbnail…

Activity_6 Task3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). It also encodes sepal measurements as the horizontal and vertical radii of the circular marks, creating an elliptical shape per data point. The visualization loads data from a GitHub-hosted CSV file using D3 v6’s `csv` function, and renders SVG circles with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Axis labels and a title are added as text elements.

Loading thumbnail…

Activity_6 Question 2

This stacked bar chart compares urban and rural population proportions across ten countries, with each horizontal bar segmented into two colored parts representing the population split. The visualization uses D3.js v7 with an SVG renderer, loading data from a CSV file and displaying percentages using a linear x-axis with percentage formatting. Hovering over a segment triggers a tooltip that reveals the precise percentage for that urban or rural population category. The chart includes a legend and axis labels, with colors assigned via a scaleOrdinal function using a two-color palette.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows how movie ratings are distributed across genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5." The visualization uses d3.stack() to create the stacked segments, d3.scaleLinear for the percentage axis, and d3.scaleBand for the categorical genre axis. Hovering over a segment reveals a tooltip displaying the exact percentage for that rating level within that genre. The data comes from a local CSV file, and the chart is rendered as SVG with d3.v7.

Loading thumbnail…

Activity 6_2000

This example displays a horizontal bar chart comparing the populations of the top 10 countries in the year 2000, with country names on the y-axis and population totals on the x-axis. The chart is rendered as an SVG using React components, with scales created via d3.scaleBand and d3.scaleLinear. Data is loaded from a CSV file using d3.csv, and axis ticks are formatted with d3.format to abbreviate large numbers (e.g., converting billions to "B"). Hovering over a bar reveals a tooltip with the exact population value.

Loading thumbnail…

Activity6_Question 1

This example shows a horizontal bar chart comparing the 2010 populations of 20 countries, with each bar labeled by country name. The visualization uses React to render SVG elements, while D3 v5 provides the `scaleBand` and `scaleLinear` functions for positioning bars, and the `format` function to abbreviate large population values. Data is loaded from a CSV file using D3’s `csv` method, and hover tooltips display the formatted population value for each bar.

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays population figures for 30 countries in 2020, using a green rect for each country with a native SVG tooltip showing the formatted value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and custom `AxisBottom` and `AxisLeft` components to render ticks. Population data is loaded from a remote CSV via `d3.csv`, with values multiplied by 1000 and formatted using `d3.format`. The chart includes a labeled population axis and blue tick lines.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This example shows a single Buddha outline repeated ten times with varying scales and offsets, creating an overlapping, colorful composition against a floral background image. The code uses React and ReactDOM to render SVG paths, with each copy of the Buddha path wrapped in a `<g>` transform for positioning and scaling. The renderer relies on raw SVG path data with explicit stroke and fill attributes, while the page styling comes from CSS applied to the HTML body.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A Buddha silhouette is repeated nine times in an overlapping composition, with each instance transformed via translation and scaling within an SVG. React renders the paths, which are hardcoded SVG path data, against a full-screen background image of flowers. The repeated layers create a dense, multi-colored visual effect through overlapping black strokes and fills, while the code demonstrates manual coordinate manipulation rather than using a data-driven library like D3.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A single SVG path of a Buddha silhouette is rendered eight times in React, each instance scaled, translated, and layered to create a dense, overlapping composition. The path data is drawn directly with a fixed `d` string, using `fill` and `stroke` set to different colors and opacities across the overlapping groups. The background uses a floral image via CSS, while the visualization relies on React elements and SVG `<g>` transforms to position each Buddha copy.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This example renders a repeated, overlapping Buddha silhouette as a decorative SVG composition. The React app draws the same path data multiple times, shifting and scaling each copy with SVG `g` transforms, and layers them with varied opacity and stroke settings against a floral background image. The code uses React and ReactDOM to mount the visualization, with the path geometry defined inline as SVG `d` strings.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization layers hundreds of semi-transparent circles over an intricate SVG path of a Buddha figure, creating a colorful, overlapping composition against a floral background image. React renders the circles with randomized positions and RGB fill values, while the Buddha path is drawn using SVG path data with a heavy stroke width. The code relies on React’s component structure and SVG elements, with no external data source, instead using procedural generation through nested array maps and Math.random() calls.

Loading thumbnail…

5 Buddhas

Five diamond-like polygons rotate and shift over a black background, rendered as an SVG inside a React application using ReactDOM. The code generates a grid of these shapes by mapping over an array of numbers, with each polygon’s position, fill color, and rotation determined by random values. No external data source is used; the visualization is purely algorithmic, leveraging React’s component structure to create the visual output.