R

rakshithareddy217@gmail.com

@Rakshithagannu·23 public vizzes

Loading thumbnail…

Activity7(q-2)

This interactive scatterplot displays the relationship between age and BMI from a diabetes dataset. The visualization uses a gradient-filled area chart with smooth Catmull-Rom curves to show BMI distribution across age groups, with a tooltip that appears on hover. Built with D3.js, it employs a bisector for efficient data lookup, linear scales, and responsive hover elements including a dashed line and marker. The SVG rendering includes gridlines, axis labels, and a color-coded BMI category indicator that distinguishes between normal and high values.

Loading thumbnail…

Activity7(q-1)

A donut chart displays the distribution of car classes (unacc, acc, vgood, good) from a CSV dataset, showing each category's percentage share with a legend indicating counts. Built with D3.js, the visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for coloring, rendering as SVG. The chart positions the pie on the left and legend on the right, with bold white percentage labels on each slice and a title above. Data loads via `d3.csv` from a GitHub gist.

Loading thumbnail…

Activity7_tut-1

An animated scatter plot of the Iris dataset cycles through four floral measurements on the x-axis while keeping petal width on the y-axis. It uses D3 v6 with reusable modules, including `scaleLinear`, `axisLeft`, and `axisBottom` from the `scatterPlot` function, and renders as an SVG with colored circles representing species. The plot updates every few seconds via `setInterval`, and a legend labeled "Species" identifies the three iris types. Data is loaded as CSV from a remote gist.

Loading thumbnail…

Activity 6

This bar chart displays the population of 20 countries in 2010, sorted along a vertical categorical axis with horizontal bars scaled by population. The visualization uses React to render an SVG, with D3’s `scaleBand` and `scaleLinear` for positioning, axes created from custom components, and tooltips via SVG `<title>` elements. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Activity 6

This interactive bar chart visualizes the population of ten countries in the year 2000. The chart uses a horizontal layout with a band scale for the categorical country axis and a linear scale for the population axis. Built with React and D3 v5, the visualization renders as an SVG with custom axis components and rectangular marks. Data is loaded from a remote CSV file, and each bar includes a tooltip that formats large population values using the `d3.format` function with SI prefixes.

Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot of the classic Iris dataset, showing sepal length against petal length, with each point’s shape indicating its species. It uses D3 v7 with the `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to create the plot and a custom shape legend. The visualization loads the CSV data via a remote URL, parses it with `csvParse`, and renders the chart using an SVG canvas. The code organizes chart components into local ES6 modules for axes, scatter plot, and legend, imported through `import` statements.

Loading thumbnail…

Activity6_q4

This visualization shows the correlation between different movie rating ranges across six genres, using a bubble chart to display the percentage of ratings in the 5.0-6.5 range on the x-axis and the 7.5-8.5 range on the y-axis. Each genre is represented by a colored bubble, with the bubble size indicating the percentage of ratings in the 6.5-7.5 range. The code uses D3 v7 to create the SVG-based visualization, employing d3.scaleLinear for axes and bubble size, d3.axisBottom and d3.axisLeft for gridlines, and interactive tooltips on mouseover. Data is embedded directly in the script from a CSV file.

Loading thumbnail…

Activity6_q3

This example visualizes car performance by plotting horsepower against highway MPG for various automotive brands. The scatter plot uses D3 v7 to render SVG circles colored by vehicle category—Economy, Standard, Luxury, or Sports—with axes, labels, and a legend. A second chart, created with Chart.js, displays average horsepower per make as a horizontal bar chart, using Papa Parse to load data from bubblechart.csv and categorizing brands through a custom JavaScript function.

Loading thumbnail…

Activity6_q2

This horizontal stacked bar chart compares three performance metrics—horsepower, torque, and highway MPG—across 31 car makes, sorted by their combined total. Each make’s bar segments show the average value for each metric, with red, green, and yellow segments representing horsepower, torque, and MPG respectively. The visualization is rendered using Chart.js with PapaParse handling the CSV data from `bubblechart.csv`. The chart uses stacked horizontal bars with the `indexAxis` option set to `'y'`, displaying tooltips that show precise numeric values for each segment.

Loading thumbnail…

Fork of Hello VizHub

This stacked bar chart displays population trends for multiple countries from 1950 to 2020, using a CSV dataset loaded via d3.csv. The visualization uses D3 v7’s d3.stack, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to render stacked segments per country, with an SVG output and an auto-generated legend for each year column. Axes are added via d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Activity6_task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle is positioned by its horsepower and torque values, while the circle’s size represents highway MPG and its color encodes the car brand. Built with d3.v7, the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color palette. Hovering reveals a tooltip with the car make. Data comes from `bubblechart.csv` and is rendered as SVG with basic animation transitions for tooltip appearance.

Loading thumbnail…

Activity6_Task4

This bubble chart compares average horsepower and torque for various car makes, with each bubble's size representing highway MPG. The visualization is built with D3.js (v7) and uses an SVG rendering, where bubble color is assigned via a turbo-interpolated ordinal scale based on car make. The chart includes a legend for bubble size and interactive tooltips on hover, implemented using D3's selection and event handling APIs. The code reads from a CSV file and uses D3's scale functions for positioning and sizing.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, with ratings grouped into five levels from below 5.0 to above 8.5. Each bar segment represents a genre's proportion of a rating category, and hovering over a segment displays the exact percentage via a tooltip. The code uses `d3.stack()` to create the stacked data structure from CSV input, `d3.scaleBand()` for the genre axis, and `d3.scaleLinear()` for the percentage scale. The visualization renders as SVG with five color-coded rating categories and includes axis labels and a title.

Loading thumbnail…

Activity6_Task4

A bubble chart displays the relationship between average horsepower, torque, and highway MPG for various car makes. The visualization uses a linear scale for each axis, with bubble size and color encoding the MPG value and manufacturer, respectively. Tooltips reveal the car make on hover. Built with D3.js v7, the chart renders as an SVG, incorporating a legend for MPG values and a color legend for car makes.

Loading thumbnail…

Activity6_Task4

This bubble chart compares average horsepower and torque for various car makes, with each bubble's size representing highway MPG. The visualization is built with D3.js (v7) and uses an SVG rendering, where bubble color is assigned via a turbo-interpolated ordinal scale based on car make. The chart includes a legend for bubble size and interactive tooltips on hover, implemented using D3's selection and event handling APIs. The code reads from a CSV file and uses D3's scale functions for positioning and sizing.

Loading thumbnail…

Activity6_Qu-2

This stacked bar chart visualizes the percentage distribution of movie ratings across different genres, with each bar segment representing a rating category. The chart uses a horizontal layout where genres appear on the y-axis and percentage values on the x-axis. Users can hover over individual segments to see precise percentage tooltips, and clicking a segment displays the value in an alert. The visualization is built with D3.js v6, using `d3.stack()` for data stacking, `d3.scaleBand()` for the categorical axis, and `d3.scaleLinear()` for the numerical axis. Data comes from a CSV file containing genre and rating percentage columns.

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the relationship between bill length and flipper length in the Penguins dataset, with each circle representing an individual penguin. The plot uses a light gray inner rectangle to delineate the plotting area, with axes and labels clearly indicating the measured variables. The visualization is built using D3's select, join, and scaleLinear APIs, along with axis label utilities, to create a customizable and reusable chart component.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). The visualization uses d3.v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `csv` loads the remote GitHub-hosted data. Circles are appended via data joins, with `cx` and `cy` positions scaled from the parsed numerical values, and fill colors assigned per species. The SVG renders full-window, with axis labels noting petal length and sepal length metrics despite the plot’s primary dimensions.

Loading thumbnail…

Activity 6

This bar chart displays the population of 20 countries in 2010, sorted along a vertical categorical axis with horizontal bars scaled by population. The visualization uses React to render an SVG, with D3’s `scaleBand` and `scaleLinear` for positioning, axes created from custom components, and tooltips via SVG `<title>` elements. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

6 buddhas

A colorful, flower-background scene displays six overlapping Buddha silhouettes, each rendered in varied hues and transparencies. The visualization uses React to generate the SVG layout, with JavaScript loops and `Math.random()` determining the position, radius, and RGB fill of numerous decorative circles layered over the paths. ReactDOM mounts the application, while the Buddha shapes themselves are defined by complex SVG path data, transformed and scaled for artistic overlap.

Loading thumbnail…

6 BUDDHAS

Six Buddhas overlap in a kaleidoscopic arrangement on a black background, each rendered as a dense SVG path of tiny coordinates. The composition uses React and ReactDOM to generate a 960x1000 canvas, with a loop that places 20 circles at random positions and fills them with semi-transparent RGB colors. The central Buddha figure is drawn from a long SVG path string, transformed and scaled, while the overall effect layers these elements into a vibrant, chaotic visual mosaic.

Loading thumbnail…

6 buddhas

Six overlapping Buddha silhouettes cascade diagonally across a dark SVG canvas, each rendered as a black path with white stroke and progressively scaled down. A dense field of 9,261 randomly positioned circles fills the background with translucent blue-tinted colors, generated via nested array maps in React. The visualization uses ReactDOM to render SVG elements, with circle coordinates and fills determined by `Math.random()` calls. Six separate `<g>` transforms apply translations and scaling to repeat the same Buddha path data at decreasing sizes, creating a layered composition against the randomized dot pattern.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes float against a black background, each built from densely repeated, randomly colored SVG polygons. The shapes emerge from nested array mappings in React that generate rotated, semi-transparent diamond forms. A large SVG path traces a single Buddha figure, rendered with JSX inside the React component. The visualization uses plain SVG primitives, React’s `map` method, and randomized color and position values to create a kaleidoscopic, layered composition.