V

varshithainaganti@gmail.com

@VarshithaInaganti·23 public vizzes

Loading thumbnail…

Activity_7.1_Question2

This visualization shows two area series representing session rates over time, allowing direct comparison of the two metrics on a shared time axis. Built with D3.js version 3, the chart uses SVG rendering and separate area paths with distinct colors (limegreen and orangered) at 50% opacity. Data is loaded from a remote CSV file, parsed using `d3.csv` with custom type conversion, and mapped to time and linear scales (`d3.time.scale`, `d3.scale.linear`). Axes are generated via `d3.svg.axis`, while the areas are created with `d3.svg.area`, each anchored to the chart’s baseline.

Loading thumbnail…

Activity_7.1_Question_1

This pie chart displays vehicle types and their registration counts, with proportional slices labeled in thousands and a corresponding color-coded legend. It loads CSV data from a GitHub gist, calculates the pie layout using `d3.pie`, and renders SVG paths with `d3.arc`. The visualization uses `d3.scaleOrdinal` for slice colors, formats values with `d3.format`, and appends legend rectangles and text labels. The chart is centered in an SVG and includes a title, with values shown numerically inside each segment.

Loading thumbnail…

Activity7.1_task

This animated scatterplot cycles through different iris flower measurements on the x-axis, coloring each species (setosa, versicolor, virginica) with distinct colors (skyblue, lightgreen, orange). Using the D3 v6 library, the visualization employs `csv` to load Iris dataset from a GitHub gist, `scaleLinear` for axes, and `setInterval` to rotate through columns. SVG circles update positions with transitions, while text labels and legends re-render dynamically with each interval tick.

Loading thumbnail…

Activity7_Task

An interactive scatterplot of Fisher’s Iris dataset animates through four measurement combinations using a rotating interval. The visualization cycles the x-axis among petal width, sepal width, petal length, and sepal length while coloring points by species. Built with D3.js version 6, it combines a reusable `scatterPlot` module with SVG circle rendering, `scaleLinear` axes, and `setInterval` to update selections. The iris.csv data loads from a GitHub gist, and the full-screen layout includes custom legends, title, and axis labels.

Loading thumbnail…

Activity6_Question2

This example visualizes mobile phone sales data from a CSV file as a horizontal stacked bar chart, displaying yearly sales figures for Apple, Samsung, Motorola, and Google. The chart uses D3.js v7 to load data, apply sequential color scales, and render the SVG with axis labels and a tooltip that reveals specific sales values on hover. The code demonstrates importing D3 via UNPKG, using utility functions like `d3.stack()` and `d3.scaleBand()`, and structuring chart elements with an SVG canvas.

Loading thumbnail…

Activity6_Question4

This bubble chart displays the relationship between sepal length and sepal width for three Iris species, with petal length encoded as bubble size and species shown by color. The visualization uses the D3.js v7 library to render SVG circles, with linear scales mapping sepal measurements to x and y coordinates. A tooltip reveals species, sepal length, and sepal width on mouseover. The chart includes a legend showing species color assignments and is built from the Iris dataset loaded via `d3.csv`.

Loading thumbnail…

Activity6_Question4

This example displays a static "Hello VizHub!" message centered on the page in large text. It demonstrates the integration of D3.js v5 and local ES6 modules within the VizHub environment. The code imports the `select` function from D3 to target the `#message` div and sets its text content using a value imported from `myMessage.js`, while also defining unused variables and a regular expression in the main script.

Loading thumbnail…

Activity6_Question4

This example displays a static "Hello VizHub!" message centered on the page in large text. It demonstrates the integration of D3.js v5 and local ES6 modules within the VizHub environment. The code imports the `select` function from D3 to target the `#message` div and sets its text content using a value imported from `myMessage.js`, while also defining unused variables and a regular expression in the main script.

Loading thumbnail…

Activity6_Task4

This interactive D3.js v7 bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes from a CSV file. Each circle’s position maps horsepower and torque values, while its radius encodes MPG and its color distinguishes the manufacturer. The visualization includes a tooltip that displays the make on mouseover, plus dual legends for MPG scaling and color-coded makes. The SVG rendering uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal for categorical coloring, and d3.interpolateTurbo for the color palette.

Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the relationship between Quantity and Profit in the Superstore dataset, with points colored and shaped according to Order Priority. Using D3.js v6, it loads CSV data via a GitHub gist and maps values to linear scales. The visualization creates SVG paths with distinct d3.symbol shapes—squares, diamonds, circles, and triangles—based on priority level. Axes are rendered using d3.axisLeft and d3.axisBottom, with custom styling applied to tick labels and axis titles.

Loading thumbnail…

Activity6_Task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length and petal length along the x- and y-axes. It uses D3 v7 to load and parse the data via `csvParse`, and renders marks with `scaleLinear` and an ordinal shape scale using the symbols from `symbolsFill`. A custom legend displays the three species categories. The visualization is drawn in an SVG container sized to the window, with axes and labels generated by custom `axes` and `shapeLegend` modules.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while encoding species with distinct colors. The visualization uses D3 v6, loading data from a CSV file and rendering circles as SVG marks. It demonstrates D3's scaleLinear, extent, axisLeft, and axisBottom APIs to construct the chart, with a custom marker function assigning skyblue, lightgreen, or orange based on species. The plot includes rotated axis labels and uses window dimensions for responsive sizing.

Loading thumbnail…

Activity6_Task2

A stacked bar chart displays the distribution of movie ratings across six genres, with each bar segmented by rating level from “below 5.0” to “above 8.5.” Hovering over a segment reveals a tooltip with the exact percentage for that rating within the genre. The visualization uses d3.stack to compute the stacked data, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis. Color is mapped via d3.scaleOrdinal to five distinct hues. The SVG rendering includes axis labels and a title.

Loading thumbnail…

Activity_6_Question_1.2

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with countries on the y-axis and population on the x-axis. The code uses React with SVG rendering and D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` to load and format the data from a GitHub-hosted CSV file. Blue tick marks and green bars are styled via CSS, while native SVG `<title>` elements provide tooltips. The chart includes rotated country-name labels and formatted population ticks using D3’s `format` specifier.

Loading thumbnail…

Activity_6_Question_1.1

This horizontal bar chart displays the population of ten countries for the year 2000, using a logless linear scale. Built with React and rendered as an SVG, it imports D3 v5 functions like `scaleBand`, `scaleLinear`, and `format` to position bars and axes. The chart loads data from a CSV file, uses a custom `useData` hook, and includes separate modules for the bottom axis, left axis, and rectangular marks. Hovering over a bar reveals a native tooltip showing the formatted population value, while axis ticks are styled with blue lines.

Loading thumbnail…

Activity_6_Task_1

This example displays a horizontal bar chart of population data for 30 countries from 2020, with bars extending from a left-aligned axis and a formatted x-axis showing population counts. It is built with React and D3 v5, loading data from a CSV file using `d3.csv` and rendering SVG elements via React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and custom tick formatting to abbreviate large numbers. Interactive tooltips show exact formatted population values on each bar.

Loading thumbnail…

Activity_6_Question_1.1

This example demonstrates a minimal VizHub project that renders a user-defined message to the browser. It loads D3 version 5 via the `d3.min.js` script and uses the `select` function to target the `#message` div, setting its text content through D3. The code also imports a local ES6 module, `myMessage.js`, which exports a personalized string, and applies styling through an external CSS file for centered, large text.

Loading thumbnail…

Activity_6

This example demonstrates basic VizHub project structure with modular ES6 imports and D3.js integration. It renders a simple text message centered on the page using D3’s `select` function to target a div element and set its content. The code imports `select` from the D3 library via UNPKG, imports a string from a local `myMessage.js` module, and applies styling through an external CSS file. The example highlights how to combine CDN-loaded libraries, local modules, and styles in an HTML document.

Loading thumbnail…

6_Reflections_of_buddha

A meditative Buddha silhouette is rendered as a decorative overlay on a floral background image. The example uses React to generate a grid of 20 small semi-transparent colored circles scattered across the SVG canvas, layered beneath a single detailed SVG path depicting the Buddha figure. The visualization is built with React, rendering SVG elements, and uses the CSS background-image property to display the floral photograph. The code demonstrates composing generative abstract shapes with a fixed iconographic path.

Loading thumbnail…

Fork of 6_buddhas

This visualization is a React-based SVG rendering of a flower-themed image overlaid with a grid of dots, created using raw JavaScript loops and `Math.random()` to generate positions, colors, and opacity values. The code draws a detailed Buddha-like path using an SVG `<path>` element with a complex `d` attribute, scaled and translated within the viewport. A loop constructs arrays and maps over them to place circular points across the canvas, while the CSS applies a background image and global styling. The example combines procedural randomness with static vector artwork in a single interactive scene.

Loading thumbnail…

6_buddhas

A colorful, flower-themed visualization displays multiple overlapping renderings of a Buddha silhouette, each drawn as an SVG path and scattered across the canvas at random positions. The React component maps over nested arrays to generate numerous small, semi-transparent circles with randomized RGB colors, creating a dense, textured backdrop. The primary Buddha paths are repeated and transformed using SVG `<g>` elements with translate and scale operations, while the code relies on React's `ReactDOM` and inline SVG elements rather than external visualization libraries.

Loading thumbnail…

5 buddhas

Five semi-transparent Buddhas overlap on a black background, each drawn as an SVG path with a five-pixel stroke. The composition is built in React, using `ReactDOM` to render an SVG canvas where the paths are generated from an array-mapped collection of circles. Random RGB values and positions create a colorful, layered effect, while the Buddha silhouettes are static path data repeated five times. The rendering relies on React’s virtual DOM to manage the SVG elements efficiently.

Loading thumbnail…

5_buddhas

A circular field of overlapping, rotated polygonal shapes fills the screen, each with semi-transparent fill colors that blend to create a dense, chaotic pattern. A central Buddha figure, rendered as an SVG path, is overlaid on top of this background. The polygons are generated by nested loops using React and array maps, with random values controlling position, color (using `rgb`), and rotation, while the Buddha path is drawn as a separate SVG `<path>` element within a `<g>` transform.