Skip to main content
Log in
R

RishithaGarnepudi@my.unt.edu

@rishithag927·16 public vizzes

Loading thumbnail…

SDV Project Visualization

This example shows a pie chart of technology usage hours grouped by relationship status, with data loaded from a CSV file hosted on GitHub. The chart uses D3 v6 APIs including `d3.csv`, `d3.pie`, and `d3.arc` to compute and draw the slices, alongside a custom ordinal color scale and a manually positioned legend built with SVG rectangles and text. The visualization includes a title and uses an SVG rendering approach within an HTML page.

Dec 2, 2024
Loading thumbnail…

Activity 7 Tutorial 2

This visualization shows population growth over time for the first five countries in a CSV dataset, displaying semi-transparent overlapping area charts for each country. The code loads data via `d3.csv`, parses population values across nine census years, and uses `d3.scalePoint` for the x-axis and `d3.scaleLinear` for the y-axis. It generates areas with `d3.area()`, colors them via `d3.schemeCategory10`, and renders with SVG paths, axes, and text labels. The chart includes a title, axis labels, and country labels positioned near each area’s final value.

Nov 2, 2024
Loading thumbnail…

Activity 7 Tutorial 1 - Question 1

This interactive D3 pie chart visualizes the percentage distribution of US population by state, displaying slices with distinct colors and a scrollable legend for identification. The code loads data from a remote CSV file using `d3.csv`, converts the percentage values to numbers, and uses `d3.pie()` and `d3.arc()` to generate the chart geometry. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to each state, while SVG text elements render the title and legend labels.

Nov 2, 2024
Loading thumbnail…

Activity 7 Tutorial

This animated scatter plot explores relationships among four Iris flower measurements (petal and sepal length and width) from a CSV data source. It cycles the x-axis through different attributes while keeping the y-axis constant, coloring points by species. Built with D3 version 6.7, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and updates the visualization via `setInterval`. The SVG output includes a custom legend and title, with points redrawn on each interval.

Oct 30, 2024
Loading thumbnail…

Activity 6_Task 2_Questions

A stacked horizontal bar chart visualizes the distribution of IMDb ratings across eight movie genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5." The chart reads values from a CSV file using D3's `d3.stack` and `d3.scaleBand` for the genre axis, while `d3.scaleLinear` handles the percentage axis. Color-coded segments use `d3.scaleOrdinal`, and interactive tooltips appear on mouseover via D3 v7 event handlers, displaying the exact percentage for each rating segment.

Oct 20, 2024
Loading thumbnail…

Activity6_Task4_Question

A bubble chart displays U.S. state populations from the 2020 census, plotting each state’s total population on the x-axis and its percentage of the national total on the y-axis. The bubble size and color encode population percentage, with hover tooltips showing state details. D3 v7 loads a CSV dataset and uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart with interactive mouse events.

Oct 20, 2024
Loading thumbnail…

Activity6_Task3_Question

This interactive scatter plot visualizes housing prices against area, with color encoding furnishing status (furnished, semi-furnished, unfurnished) using a d3.scaleOrdinal with green, orange, and red. The SVG renders circles from CSV data loaded via d3.csv, with linear scales for axes, axis labels, a title, and a legend. D3 v6 handles all layout and styling through d3.select, scaleLinear, axisBottom, and axisLeft.

Oct 20, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes, with bubble size encoding fuel efficiency and color distinguishing each manufacturer. Rendered as SVG with D3 v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color assignment, and `d3.interpolateTurbo` for a continuous color palette. Interactive tooltips appear on mouseover events, while legends explain the size mapping and categorical colors, with data sourced from a CSV file.

Oct 19, 2024
Loading thumbnail…

Activity6_Task3_3.2

This example visualizes the Iris dataset, mapping sepal length and petal length on the x- and y-axes while distinguishing species by shape. Each data point is a d3 symbol, rendered using `symbolGenerator`, with a shape legend showing the species categories. The code builds the visualization with D3 v7, using `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` from the `d3` module. Data is loaded as CSV from GitHub and parsed with `csvParse`. The scatter plot is drawn in an SVG canvas sized to the window, with axes and labels configured programmatically.

Oct 19, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). Built with d3.v6, the visualization uses `csv` to load data, `scaleLinear` for axis scaling, and `axisBottom`/`axisLeft` for tick marks. The SVG output renders circles with fixed radius, while the color mapping is handled by a switch statement in the `marker` function.

Oct 19, 2024
Loading thumbnail…

Activity 6_Task 2

A stacked bar chart displays the percentage distribution of IMDb rating levels across six movie genres, showing how genres like Documentary skew toward higher ratings while Action clusters at lower ones. Built with D3 v7, the chart uses a linear x-scale for percentages, a band y-scale for genres, and an ordinal color scale for rating categories. Hover interactions trigger tooltips with exact percentages via D3 event handlers, while SVG rectangles render the stacked data from a CSV file loaded with `d3.csv`.

Oct 19, 2024
Loading thumbnail…

Activity 6_question 1.2

A horizontal bar chart displays the 2010 populations of twenty countries, sorted by country name, using green bars on a white SVG canvas. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population data is loaded from a remote CSV file via `d3.csv`, with tick labels formatted using `d3.format` to abbreviate billions. Axis lines are styled blue, and the chart includes a labeled x-axis and tooltips showing the abbreviated population value for each bar.

Oct 19, 2024
Loading thumbnail…

Activity 6_Questions

This bar chart displays the population of ten countries in the year 2000, drawn as horizontal bars ordered by country name. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with data loaded via `d3.csv`. SVG rectangles represent values, and axes are rendered with custom React components.

Oct 19, 2024
Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 2020 populations of the top 30 countries from a GitHub-hosted CSV dataset. React components render SVG rectangles whose widths are scaled by d3.scaleLinear, while d3.scaleBand positions each country on the y-axis. The code uses d3.csv for data loading, d3.format for tick labels, and the AxisBottom and AxisLeft components to draw the chart’s axes.

Oct 19, 2024
Loading thumbnail…

Buddha_Activity 5_Questions

A decorative Buddha silhouette is drawn repeatedly as overlapping violet outlines, layered over a photographic flower background. The React application renders multiple SVG `<path>` elements from a single Buddha shape, each scaled and translated into a different position to create a dense, repeating pattern. The visualization uses React with ReactDOM to manage the SVG output, embedding a background image via an `<image>` element and styling the page with CSS.

Oct 19, 2024
Loading thumbnail…

Buddha

This piece presents a dense field of small, randomly colored and rotated polygons layered atop a large, intricate Buddha silhouette. The layered polygons create a textured, overlapping visual noise across the dark canvas. Built with React, the visualization uses SVG `polygon` elements with properties generated by `Math.random` for positioning, fill, and rotation, which are mapped over a fixed array. The Buddha shape itself is a detailed SVG `path` with complex coordinate data, rendered within the same scalable vector graphic.

Oct 10, 2024