T

tallapanenisahithi@gmail.com

@sahithitallapaneni·22 public vizzes

Loading thumbnail…

Activity 7-Q 2

This stacked area chart visualizes monthly sales volumes across eight chocolate types—including Dark, Milk, White, Ruby, Vegan, Caramel, Hazelnut, and Almond—using a color-coded legend. The visualization loads CSV data from a GitHub repository via `d3.csv`, then applies `d3.stack` with `.keys` and `d3.area` to generate layered SVG paths. It scales the x-axis with `d3.scaleBand` for months and the y-axis with `d3.scaleLinear` for total counts, while `d3.axisBottom` and `d3.axisLeft` render the labeled axes.

Loading thumbnail…

Activity 7-Q 1

This example displays the distribution of chocolate sales percentages across eight chocolate types using a pie chart with a manually constructed legend and axis labels. It loads sales data from a remote CSV file and renders the chart as an SVG using D3 v6. The code uses `d3.csv` to fetch data, `d3.pie` to compute arc angles, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` to assign colors to each chocolate type. A static legend lists each type alongside its percentage, while text labels are placed at arc centroids.

Loading thumbnail…

Activity 7- question 1

This animated scatter plot explores the classic Iris dataset, cycling through different measurements (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. It uses D3.js via the `csv` and `scaleLinear` APIs, with `select` for DOM manipulation and `setInterval` to trigger periodic updates. Each species (Setosa, Versicolor, Virginica) is color-coded, and the visualization includes a custom legend, axis labels, and a title, all rendered as an SVG with smooth transitions between dimensions.

Loading thumbnail…

Activity6- question 4

This bubble chart shows the correlation between average volume, average sugar, and calories per serving across 20 drink items using a static dataset loaded via `d3.csv`. Circles are positioned by linear scales for volume (x-axis) and sugar (y-axis), with radius encoding calories through another `d3.scaleLinear`. An ordinal color scale distinguishes drink categories, and hover tooltips display exact values. The SVG includes a calorie legend and category color key, rendered entirely with `d3.select` and `d3.axis` APIs.

Loading thumbnail…

Activity 6-Question 4

This bubble chart shows the correlation between average weight, average sugar, and calories per serving for various food items, with each circle's x-position mapping to weight, y-position to sugar, and radius to calorie count. A legend on the right decodes the circle sizes for calorie values, while a categorical color scale distinguishes the 20 food items. Interactive tooltips display exact values for each food on hover. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and radius, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom`/`d3.axisLeft` for chart axes. The data, loaded from `fooditems.csv`, is rendered as SVG circles with a black tooltip that follows the mouse.

Loading thumbnail…

Activity 6-task 4

This bubble chart displays the correlation between average sugar, average weight, and calories per serving for various food items. Circles are positioned by weight and sugar on the x and y axes, while the circle radius encodes calorie count, with a legend showing calorie values. A hover tooltip reveals exact food item, weight, sugar, and calorie details. Built with D3 v7, it loads fooditems.csv and uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.schemeCategory10`, and a simple SVG animation on hover to change opacity and stroke.

Loading thumbnail…

Activity 6 Question 2

This stacked bar chart shows movie genre preferences across five age groups, with each bar segment representing the percentage of respondents who rated a particular movie type. The visualization uses d3.stack() to compute cumulative values and d3.scaleOrdinal with a custom color palette to distinguish categories. Mouse interactions trigger tooltips that display exact percentages, while d3.axisBottom and d3.axisLeft render the axes with gridlines. The data originates from a CSV file, and the chart is rendered as SVG using D3 v7.

Loading thumbnail…

Activity6_question 3

This scatter plot visualizes World Happiness Report data from 2015–2023, comparing GDP per capita against happiness scores for three selected countries: the United States, Japan, and India. Each circle represents a yearly observation, colored by country via a categorical color scale. The visualization uses D3 v6 to load CSV data from a GitHub repository, with axes rendered using `axisBottom` and `axisLeft`, and scales defined through `scaleLinear` and `scaleOrdinal`. A custom legend, built with SVG rectangles and text, identifies the countries, while the plot dynamically sizes to the browser window.

Loading thumbnail…

Activity 6 task 3.2

This scatter plot visualizes the Iris dataset, using the `d3.scaleLinear` and `d3.scaleOrdinal` APIs to map sepal length and petal length to x and y positions, while encoding species with different shape symbols via `d3.symbolsFill`. The chart, built with D3 v7, includes axes from `d3.axisLeft` and `d3.axisBottom`, and a custom legend that lists the species shape mappings. Data is loaded asynchronously as CSV from a GitHub repository.

Loading thumbnail…

Activity6_task 3

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample, with point colors indicating the iris species (setosa, versicolor, or virginica). The visualization uses D3 version 6.7, loading data from a GitHub-hosted CSV via `d3.csv`. It employs `d3.select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG scatter plot, with axis labels for petal length and sepal length.

Loading thumbnail…

Activity 6 question 2

This example visualizes 2020 population data for 30 countries as a horizontal bar chart using React and D3 v5. It demonstrates loading CSV data from GitHub, mapping values with scaleBand and scaleLinear, and rendering SVG marks with interactive tooltips provided by SVG `<title>` elements. The chart includes styled axes with tick formatting that converts numbers to billions, using components like AxisBottom, AxisLeft, and Marks imported as local ES6 modules.

Loading thumbnail…

Activity 6 question 3

This example displays the distribution of movie ratings across six genres, with each genre’s ratings segmented into five ordered categories from “below 5.0” to “above 8.5.” The visualization uses horizontal stacked bars to compare proportions, with each bar’s segments colored and labeled. The D3 library is loaded via UNPKG and used to render the chart, employing the `d3.csv` to parse the data and `d3.scaleBand` for the x-axis. Tooltips appear on hover, displaying the exact proportion for a given segment. The code imports D3 functions through ES6 modules and leverages custom CSS for styling fonts and tooltips.

Loading thumbnail…

Fork of Activity 6 Task 2

This example visualizes IMDb movie ratings across six genres with a stacked horizontal bar chart. Each bar represents a genre, segmented by rating categories from "below 5.0" to "above 8.5," showing the proportion of films in each rating band. The visualization uses D3 v7 with d3.stack, d3.scaleBand, and d3.scaleLinear to construct the chart, and includes interactive tooltips that display exact percentages on mouseover. The SVG rendering loads data from a local CSV file and applies a custom color scale for the rating categories.

Loading thumbnail…

Activity 6 Tutorial 2

This example demonstrates the basic setup and modular structure of a VizHub project, showing how to import D3 functionality and local ES6 modules. The page displays a large, centered text message "Hello VizHub!" using D3's `select` to target a div and set its text content. It includes a stylesheet for formatting, loads D3 v5 from a CDN via UNPKG, and shows the use of regular expressions and a constant variable in JavaScript. The code serves as a minimal template for organizing D3-based visualizations with external dependencies and modular code structure.

Loading thumbnail…

Activity6-question 1.2

This horizontal bar chart displays the population of 20 countries in 2010. The visualization sorts countries along the y-axis using a band scale, with bar lengths proportional to population values on a linear x-axis. Built with React and D3 v5, the example loads CSV data and renders an SVG using local ES6 modules for axes and marks. Custom tick formatting converts large numbers to abbreviated “B” notation for billions, and tooltips show formatted values on hover.

Loading thumbnail…

Activity6-question 1.1

This bar chart displays the population in the year 2000 for ten countries, 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 functions like `scaleBand` and `scaleLinear` for the scales and `format` for tick labels. Data is loaded from a CSV file via D3's `csv` function. The chart includes blue tick lines, green bars, and a title, with tooltips showing formatted population values.

Loading thumbnail…

Activity 6_task 1

This bar chart displays the 2020 population estimates for 30 countries, sourced from a CSV file loaded via d3.csv. The visualization uses React with D3 v5, employing scaleBand and scaleLinear for axes and rendering SVG rectangles for each bar. The chart includes labeled axes with formatted tick values, converting billions to a readable format, and tooltips showing exact population values on hover.

Loading thumbnail…

Activity 6-tutorial 1

This example demonstrates a minimal D3.js setup that renders a centered message using the `select` API from D3 v5, loaded via UNPKG. It shows how to combine a local ES6 module (`myMessage.js`) with imported D3 functions to dynamically set the text content of an HTML element. The code also includes a styled message via CSS and illustrates basic module imports and regex variable declarations.

Loading thumbnail…

buddha

A generative Buddha-shaped artwork rendered in black and white, composed of thousands of overlapping diamond polygons that form a dense, textured silhouette. The visualization uses React to build an SVG scene, with nested array mappings creating each polygon at randomized positions and scales. Colors are applied via the `rgb()` function with values derived from `Math.random()`, though the black background and translucent shapes produce a monochrome appearance. The central Buddha figure is drawn from a large SVG path, while the surrounding generative elements scatter across the 960×1000 canvas.

Loading thumbnail…

question 3

A grid of small, randomly colored squares is rendered over a photographic background of flowers. The visualization repeatedly maps over an array to generate multiple layers of elements, each with random positioning and fill colors, creating a chaotic, abstract pattern. Built with React and rendered as SVG, the code uses nested `A.map()` calls, `Math.random()` for coordinates and RGB values, and SVG `path` data to draw a Buddha figure overlaid on the flower image.

Loading thumbnail…

question 6

This example overlays a single repeating Buddha path with thousands of randomly placed triangular polygons, creating a dense, colorful collage against a black background. Each polygon is positioned and rotated using multiple nested `Array.map` calls over a generated numeric array, with random values determining coordinates, fill color, and rotation. The artwork is rendered as SVG within a React application, using React DOM to mount the component and inline SVG elements like `<polygon>` and `<path>` to compose the final image.

Loading thumbnail…

buddha

A generative Buddha-shaped artwork rendered in black and white, composed of thousands of overlapping diamond polygons that form a dense, textured silhouette. The visualization uses React to build an SVG scene, with nested array mappings creating each polygon at randomized positions and scales. Colors are applied via the `rgb()` function with values derived from `Math.random()`, though the black background and translucent shapes produce a monochrome appearance. The central Buddha figure is drawn from a large SVG path, while the surrounding generative elements scatter across the 960×1000 canvas.