R

rakesh.kavuru@outlook.com

@Rakz3438·16 public vizzes

Loading thumbnail…

Asst2_Q2

This area chart visualizes football scores over time, using a steelblue filled area to show the value of the ARG metric across a date range. The visualization maps dates to the x-axis and score values to the y-axis, with labeled axes for clarity. Built with D3.js v7, the code uses `d3.scaleTime`, `d3.scaleLinear`, and an `d3.area` generator to construct the path, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data is loaded from a remote CSV via `d3.csv` with `d3.autoType`, and date strings are parsed using `d3.timeParse`.

Loading thumbnail…

Asst2_Q1

This pie chart displays the distribution of scores across different genres, using platforms as slice labels. It loads a CSV dataset from a GitHub gist via `d3.csv`. The chart uses the `d3.pie` layout and `d3.arc` generators to create SVG paths, with colors assigned through `d3.scaleOrdinal` and `d3.schemeCategory10`. Hovering over a slice triggers a mouseover event that displays the Action value at the arc’s centroid using `arc.centroid`.

Loading thumbnail…

Tutorial6.1

This interactive scatter plot animates through four different axis pairings of the Iris flower dataset, cycling every few seconds. It displays points colored by species, with a legend labeling Setosa, Versicolor, and Virginica, using d3.csv for data loading and d3.scaleLinear for scaling. The animation is driven by setInterval, which updates the x-axis mapping and re-renders the SVG, using the scatterPlot custom module with d3.axisBottom and d3.axisLeft for axes.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes Test Cricket Records, plotting matches played against total runs for individual players, with each point colored by the player’s country using `d3.scaleOrdinal` and `d3.schemeCategory10`. The visualization loads CSV data via `d3.csv`, parses numeric fields, and renders an SVG with D3 v6, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and circle elements with fill opacity.

Loading thumbnail…

Tutorial 1

This visualization displays a horizontal bar chart comparing the 2020 populations of thirty countries. The bars are rendered as SVG rectangles, with length encoding population value. The code uses React with D3 v5, employing `d3.csv` to load data from a GitHub-hosted CSV file. Axes are built using `d3.scaleBand` and `d3.scaleLinear`, with a formatter converting values to billions. A tooltip showing the population value appears via an SVG `<title>` element on each bar.

Loading thumbnail…

Activity6_Ques4

This bubble chart visualizes the correlation between GDP per capita, life expectancy, and population area ratio across 20 countries. Each circle’s position encodes GDP per capita (x-axis) and life expectancy (y-axis), while its radius represents population density. The visualization uses D3 v7 with SVG rendering and interactive tooltips that display country-specific values on hover. A categorical color scale distinguishes countries, paired with a legend. The chart reads data from a CSV file and animates tooltip transitions, with circle opacity increasing on mouseover for enhanced readability.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble’s position on the x- and y-axes representing horsepower and torque, and its size mapping to MPG. The color of each bubble encodes the car make. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color, and `d3.csv` to load data. Interactive tooltips appear on mouseover, showing the make. Animated transitions and a legend for size and colors are included.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble colored by make and sized by MPG. It uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, while a legend shows bubble size values and a color key for each make. The SVG rendering includes animated hover effects via the style property and d3 transitions.

Loading thumbnail…

Task_3.2

This visualization shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis, with points styled by species using different D3 symbols. The code loads data from a CSV file via the Fetch API and parses it with d3.csvParse, then renders the plot using d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill for shape encoding, and d3.axisLeft/axisBottom via the custom axes module. A custom shape legend module displays the species categories using d3.symbol, while D3’s join pattern handles dynamic element updates.

Loading thumbnail…

Activity6_Task3.1

This example visualizes the Iris dataset as a scatter plot, displaying petal length and petal width on the axes while coloring each point by species (setosa, versicolor, or virginica). It also encodes sepal length and width as the x- and y-radii of the circular markers. The visualization loads CSV data from a GitHub gist, uses D3 v6 modules including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select`, and renders all marks as SVG circles. Axis labels are green, and the plot resizes to the full browser window.

Loading thumbnail…

Activity6_Que2

This stacked bar chart shows the percentage distribution of five IMDb rating levels (below 5.0 to above 8.5) across six product categories, illustrating how category influences ratings. Each horizontal bar represents one category, with colored segments for each rating range. Hovering over a segment displays an exact percentage via a tooltip implemented with D3 event handlers. The visualization uses d3.stack() to generate stacked data, d3.scaleOrdinal for colors, d3.scaleLinear for percentages, and d3.scaleBand for categories, rendering as SVG with axes from d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Activity6_tutorial

This stacked bar chart displays the percentage distribution of IMDb ratings across six movie genres, with each genre's horizontal segments summing to 100%. Hovering over a segment reveals a tooltip with the exact percentage for that rating level. The visualization is built with D3 v7, using `d3.stack()` to create the stacked data, `d3.scaleOrdinal()` for color mapping, and SVG rectangles for rendering. The chart includes axes, titles, and an interactive tooltip that updates via mouse events.

Loading thumbnail…

Activity_6_task1.1

This example shows a horizontal bar chart comparing population figures for ten countries in the year 2000, with country names on the y-axis and population values on the x-axis. The visualization uses D3 v5 for data processing, scales, and axis generation, while React manages the component structure and SVG rendering. Population data is loaded from an external CSV file via the `csv` function and formatted using the `format` API. The chart employs `scaleBand` and `scaleLinear` to map the data, with tooltips provided through SVG `<title>` elements.

Loading thumbnail…

activity 6_Task 1

This example shows the population of 20 countries in 2010 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning and a custom `tooltipFormat` that abbreviates large numbers. Data is loaded as CSV using `d3.csv` and sliced to the first 20 rows, while axis ticks are generated with `xScale.ticks()` and labeled via the `format` API.

Loading thumbnail…

6 Buddhas

Six Buddhas overlap in a dense, colorful composition, each rendered as a stylized SVG path filled with randomly generated RGB colors. The paths rotate and scale across the canvas, creating a layered, kaleidoscopic effect against a floral background image. The code uses React with ReactDOM to render the SVG elements, mapping over nested arrays to generate multiple instances of the Buddha path with random positions and transformations. The data originates from the path coordinates embedded in the source, with visual variety produced through Math.random calls for fill, opacity, and rotation.

Loading thumbnail…

5 buddhas

Five Buddhas displays a dense field of randomly generated, semi-transparent polygons that shimmer behind a single large, detailed line-art rendering of a seated Buddha. The background is produced through nested React map functions, creating points and polygons with random coordinates and vibrant colors. The Buddha figure itself is drawn as an SVG path, and the entire composition uses React to manage the SVG output.