Skip to main content
Log in
A

arthireddykota@my.unt.edu

@arthireddykota28·25 public vizzes

Loading thumbnail…

Assignment-2 Question-2

This area chart displays vehicle prices across years, sourced from a CSV file loaded from GitHub. The visualization uses D3.js v7 to parse the data and render an SVG, mapping years to a band scale on the x-axis and prices to a linear scale on the y-axis. An area generator (`d3.area`) fills the region beneath the line in steelblue. The chart includes rotated tick labels for years, axis labels, and a title, all positioned within defined margins.

Apr 13, 2024
Loading thumbnail…

Assignment-2 Question-1

This pie chart displays the distribution of animal species by count, with each slice labeled with its value in thousands and accompanied by a legend. The visualization fetches data from a GitHub-hosted CSV file using `d3.csv`, then constructs the chart with `d3.pie` and `d3.arc` for the segments, while `d3.scaleOrdinal` assigns colors. Value labels are formatted via `d3.format` and positioned using `arc.centroid`. The D3 v5 code renders to an SVG canvas and includes styled legend rects and text elements.

Apr 13, 2024
Loading thumbnail…

Assignment 2 - Question-1

This pie chart displays animal species data, with each slice labeled by its value in thousands and accompanied by a color-coded legend. The visualization uses d3.pie and d3.arc to generate the chart, with d3.scaleOrdinal mapping species names to a fixed palette. Data is loaded asynchronously from a CSV file via d3.csv. Text labels inside slices use arc.centroid for positioning, while legend entries are manually placed with SVG elements.

Apr 13, 2024
Loading thumbnail…

question-1 Pie Chart

This pie chart visualizes the distribution of animal species by leg length and width, with each slice representing a category and its proportional value. The chart reads CSV data from a GitHub repository and renders slices as SVG paths using `d3.pie()` and `d3.arc()`, with colors assigned via `scaleOrdinal`. Labels and a legend are generated with D3 selections, and the chart updates responsively to the window size. The reusable `pieChart` module sets width, height, data, and value accessor through a fluent interface.

Apr 13, 2024
Loading thumbnail…

Assignment-2 Q-1

This animated scatter plot visualizes animal attributes, cycling through different x-axis metrics (leg width, body width, leg length, and body length) against body length on the y-axis. The visualization uses D3.js (v7) with SVG rendering, employing D3's `scaleLinear` and `axisBottom`/`axisLeft` for axes. Data from a CSV file is parsed and mapped to circles colored by species (Fish, Birds, Mammals, Invertebrates), with a legend and rotating axis labels updated via `setInterval`. The reusable `scatterPlot` module controls the plot's dynamic configuration.

Apr 13, 2024
Loading thumbnail…

Assignment-2Q-1

This interactive scatterplot, built with D3.js, explores relationships between measurements of animal body parts and leg dimensions. It visualizes a rotating set of scatter plots where the x-axis cycles through four attributes (Leg Width, Body Width, Leg Length, Body Length), while the y-axis consistently shows Leg Length, with data points colored by species (Fish, Birds, Mammals). The visualization animates through these combinations using `setInterval`, dynamically updating scales and axes via `scaleLinear` and `axisLeft`/`axisBottom`. Data is loaded from a remote CSV file using `d3.csv`.

Apr 12, 2024
Loading thumbnail…

Assignment-2Q-1

This interactive scatterplot, built with D3.js, explores relationships between measurements of animal body parts and leg dimensions. It visualizes a rotating set of scatter plots where the x-axis cycles through four attributes (Leg Width, Body Width, Leg Length, Body Length), while the y-axis consistently shows Leg Length, with data points colored by species (Fish, Birds, Mammals). The visualization animates through these combinations using `setInterval`, dynamically updating scales and axes via `scaleLinear` and `axisLeft`/`axisBottom`. Data is loaded from a remote CSV file using `d3.csv`.

Apr 12, 2024
Loading thumbnail…

Assignment-2.1

This interactive scatter plot, rendered as an SVG with animation, visualizes animal measurements, with each point’s position and size mapping leg length, leg width, body length, and body width. Species are distinguished by color (skyblue, lightgreen, red, orange). The visualization cycles the x-axis through four measurement columns using `setInterval`, while the y-axis remains body length. Built with D3.js, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes, and the scatter plot is created using a custom `scatterPlot` module with a chained API. Data is loaded from a remote CSV file.

Apr 12, 2024
Loading thumbnail…

Activity-6 Question-4

This bubble chart shows the correlation between average computing time, cost, and duration across various devices. Each circle’s x-position represents computing time, y-position represents cost, and radius encodes duration, with colors categorizing device type. Rendered as an SVG using D3 v7, the visualization includes interactive tooltips on hover and a legend for duration values. Data is loaded from a CSV file, and scales like `d3.scaleLinear` and `d3.scaleOrdinal` drive the layout and color mapping.

Apr 5, 2024
Loading thumbnail…

Activity-6 Task-4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color distinguishing manufacturers. Built with D3 v7, the SVG renders circles positioned by scaled horsepower and torque axes, using `d3.scaleLinear` for coordinates and radius, and `d3.scaleOrdinal` with `d3.interpolateTurbo` for color. Interactive tooltips appear on mouseover, and a legend explains bubble sizes and colors. Data is loaded from a CSV file.

Apr 5, 2024
Loading thumbnail…

Activity-6 Question-3

A scatter plot visualizes an animal dataset, coloring points by species (Mammals, Birds, Fish, Invertebrates) with distinct hues. The chart maps leg length on the x-axis and leg width on the y-axis, while also encoding body dimensions through circle radii via rx/ry attributes. Using D3 v6, the code loads CSV data from a GitHub raw URL and employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes within an SVG rendered across the full viewport.

Apr 4, 2024
Loading thumbnail…

Activity-6 Task-3.2

A scatter plot displays sepal length against petal length for the Iris dataset, with species encoded by different point shapes. The visualization uses d3.scaleLinear for x and y axes, d3.scaleOrdinal with d3.symbolsFill for shape mapping, and d3.axisLeft/axisBottom for axes. The code loads CSV data from a GitHub repository and renders a shape legend with d3.symbol.

Apr 4, 2024
Loading thumbnail…

Activity-6 Task-3

This scatter plot displays the Iris dataset, using D3 v6 to map petal length and width as x- and y-coordinates. Circles are colored by species (setosa, versicolor, virginica) and sized with a fixed radius. The chart loads CSV data from a GitHub repository, uses `csv`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` for scales and axes, and renders as an SVG. Sepal and petal measurements are accessible through the same data parsing.

Apr 4, 2024
Loading thumbnail…

Activity-6 Question-2

This visualization shows the distribution of ratings for six vegetables, each broken into five percentage ranges. It uses D3 v7 to render a horizontal stacked bar chart as an SVG, with the vegetables on the y-axis and the percentage scale on the x-axis. The chart employs `d3.scaleLinear` and `d3.scaleBand` for scaling, `d3.stack` to aggregate data from the CSV file, and a custom tooltip that appears on mouseover to display the exact percentage for each rating category.

Apr 4, 2024
Loading thumbnail…

Activity-6 Task-3

This example visualizes the distribution of vegetable pH ratings across five categories, from below 5.0 to above 8.5, using a horizontal stacked bar chart. Each bar represents a vegetable, with segments colored by pH range and a tooltip showing the exact percentage on hover. The code loads D3 v7 via UNPKG, uses `d3.stack()` to compute stacked series, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` with gridlines for the percentage axis. Data comes from the included `data.csv` file, and the SVG rendering is driven by D3’s data-join pattern.

Apr 4, 2024
Loading thumbnail…

Activity-6 Task-2

This example visualizes the distribution of IMDb movie ratings across different genres using a stacked horizontal bar chart. Each bar represents a genre, with segments indicating the percentage of movies falling into five rating categories from below 5.0 to above 8.5. The chart employs D3 v7’s `d3.stack`, `d3.scaleOrdinal`, and `d3.axisLeft` APIs, with data loaded from a local CSV file. Interactive tooltips display precise percentages on mouseover, while the SVG rendering uses custom styling from external fonts.

Apr 4, 2024
Loading thumbnail…

Activity-6 Question-1.2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name. The chart is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Each bar’s length encodes population data loaded from a CSV via `d3.csv`, with axis ticks formatted using `d3.format`. SVG rendering includes interactive tooltips via `<title>` elements.

Apr 4, 2024
Loading thumbnail…

Activity-6 Question-1.1

This visualization presents a horizontal bar chart comparing the population of ten countries in the year 2000, with bars sorted by country and sized according to population values. The chart uses D3 v5 within a React framework, rendered as SVG, and applies a log-like tick formatting to abbreviate large numbers (e.g., converting billions to "B"). Data is loaded from a remote CSV file via D3's `csv` function, and the chart is composed using React components for the bottom axis, left axis, and marks, with axes styled with blue tick lines and green bars.

Apr 4, 2024
Loading thumbnail…

Activity-6 Task-1

This example shows a horizontal bar chart of 2020 population data for 30 countries, ranked from largest to smallest at the top. The SVG visualization uses React components to render the chart, with D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Bar lengths encode population values, and hovering over a bar reveals its formatted value via a tooltip. Axes are drawn with custom `AxisBottom` and `AxisLeft` components that generate tick marks and labels, while the data is fetched from a CSV file using D3’s `csv` function.

Apr 4, 2024
Loading thumbnail…

Activity-6 Question-1.1

This visualization displays population data for 30 countries using a horizontal bar chart, where each bar's length represents the population value. The chart is rendered as an SVG using React, with D3 v5’s `scaleBand` and `scaleLinear` functions managing the categorical y-axis and continuous x-axis scaling. Data is fetched from a CSV file and parsed with `d3.csv`, then formatted using D3’s `format` function to display values in billions. Tooltips appear on hover, showing the same formatted population values, while blue tick lines and green bars style the visualization.

Apr 4, 2024
Loading thumbnail…

6 Buddha

Six Buddha displays a dense scatter of small, semi-transparent squares scattered across a 1000-by-1000 SVG canvas. Generated from a 31-element array, each point’s x and y coordinates and RGB fill color are computed with JavaScript’s `Math.random()` within a nested `map` loop. The visualization is overlaid on a background flower image, with the primary Buddha shape drawn using an SVG `<path>` element, transformed and scaled via SVG `transform` attributes. React and ReactDOM manage the SVG rendering.

Apr 3, 2024
Loading thumbnail…

5 Buddha

Five Buddha displays a dense arrangement of 20 small diamond-shaped polygons repeated in a three-level nested loop, each with random positions, fills, and rotations overlaid on a large SVG path of a Buddha figure. The background is black, and the polygons use bright, semi-transparent colors generated via `Math.random()` for RGB values. Built with React and rendered as SVG, the visualization layers a procedurally generated chaotic pattern on top of a detailed path-based religious icon.

Apr 3, 2024
Loading thumbnail…

5 Buddhas

The visualization displays five overlapping polygonal shapes that suggest Buddha silhouettes, rendered in vibrant random colors against a black background. The shapes are generated through React's component-based architecture, using SVG polygons whose point coordinates are computed from randomization functions and the cubic exponentiation of array values. Each polygon is filled with RGB colors sampled from random values and rotated 45 degrees. The rendering relies on React 16.10 and ReactDOM to mount the SVG elements within the browser.

Apr 3, 2024
Loading thumbnail…

Fork of 5 Buddhas

A dense field of multicolored semi-transparent dots fills the screen, while a large white line drawing of a Buddha figure is overlaid on top, created from a complex SVG path. The dots are generated by three nested `Array.map` loops in React, randomly positioning 20 points per dimension. The SVG renders both the randomized circles and the fixed path, using React's `map` to produce elements and inline styles for fill and opacity.

Apr 3, 2024
Loading thumbnail…

5 Buddhas

A black background contains a field of small, randomly placed circles with varied colors and opacity. Overlaid on this is a large, single-line SVG path of a seated Buddha figure, drawn with a thick stroke. The circles are generated by nested array maps using JavaScript’s `Math.random`, while the Buddha path uses explicit SVG path data with `transform` to scale and position the figure. The visualization combines simple generative graphics with a detailed vector illustration.

Apr 3, 2024