S

saisathvikapotluri@gmail.com

@saisathvikapotluri·18 public vizzes

Loading thumbnail…

sathvikaact7_q2areachart

This area chart visualizes the distribution of diagnoses by count, using a smooth monotone curve to connect points across categorical diagnosis labels. The chart is rendered as an SVG via D3 v7, with an area path filled in steel blue beneath the line. The code groups the source CSV data with `d3.rollups` to count occurrences per diagnosis, then scales the x-axis with `d3.scalePoint` and the y-axis with `d3.scaleLinear`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

sathvikaact7_q1piechart

This pie chart visualizes the distribution of diagnoses from a health dataset. It shows the relative count of each diagnosis as segments of a circle. The chart is rendered as an SVG using D3 v7, with a legend to the right. The code loads data from a CSV file via `d3.csv` and computes the counts with `d3.rollups`. It then uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the arcs and colors, with a random color palette.

Loading thumbnail…

sathvikaact7_tutorial

This interactive scatterplot visualizes the classic Iris flower dataset, displaying petal and sepal measurements for three species. The visualization cycles through different axis combinations, with colors distinguishing species while a legend and axis labels update dynamically. It uses the D3.js library for data handling, scaling, and rendering, incorporating the `scatterPlot` module for axis construction and points. The animated transitions occur via `setInterval`, and the SVG circle elements are positioned using scaled coordinates.

Loading thumbnail…

Task1.2_act6

This horizontal bar chart visualizes the population of the top 20 countries for the year 2000, using a log-scaled x-axis that formats tick labels from millions to billions. Built with D3 v7, the visualization constructs linear scales and band scales to map population values and country names to SVG rectangles. The chart renders light green bars on an SVG canvas, with axes labeled “POPULATION-2010” and “Countries,” sourced from a CSV file fetched via d3.csv.

Loading thumbnail…

act6_Task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes, using circle size to represent fuel efficiency and color to distinguish brands. It loads CSV data with d3.csv, scales the axes with d3.scaleLinear, and maps bubble radius through a separate linear scale. Interactive tooltips appear on mouseover, while a legend explains the MPG sizing. The visualization is rendered as SVG with opacity changes on hover, built using D3 v7 selection and join methods.

Loading thumbnail…

act6_Task3.2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length, with species distinguished by different fill symbols. The visualization uses D3 v7 to map species to a categorical shape scale with symbols from `symbolsFill`, rendering each data point as a path mark positioned via linear scales. Species categories are identified through a custom shape legend, and the plot includes labeled axes. The iris data is loaded from a remote CSV file using `csvParse` and rendered with D3's `symbol` and `scaleOrdinal` APIs.

Loading thumbnail…

act6_task3.2

This scatter plot visualizes a synthetic flower dataset, comparing sepal length against petal length for three species. Each species is encoded using a distinct shape and color: circles for Florida, squares for Tropica, and triangles for Montana. The visualization uses D3 v7 with functions like `d3.symbol`, `d3.axisBottom`, and `d3.axisLeft` to render SVG shapes and axes. Data is loaded from a remote CSV file, processed by converting string values to numbers, and displayed with a custom legend.

Loading thumbnail…

act6_Task3.1

This scatter plot visualizes synthetic flower measurements, showing the relationship between petal length and petal width for three species (florida, tropica, montana) using colored circles. The visualization loads tab-separated data from a hosted CSV file via `d3.dsv` and renders an SVG graphic. It employs `d3.scaleLinear` for the x and y axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.scaleOrdinal` with a color range of skyblue, lightgreen, and orange to distinguish species.

Loading thumbnail…

act6_Task2

This example presents a stacked horizontal bar chart comparing the distribution of movie ratings across six streaming platforms: Netflix, Hulu, Amazon Prime, Disney+, HBO Max, and Apple TV. The ratings are divided into five percentage-based categories, from below 5.0 to above 8.5. Built with D3.js v7, the visualization uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal()` for the color scheme. The SVG rendering includes interactive tooltips that display the exact percentage for each rating category when hovering over a segment, with D3’s `axisBottom` and `axisLeft` for the percentage and platform axes.

Loading thumbnail…

act6_Task1

A horizontal bar chart displays the 2000 population estimates for ten countries, sorted by country name along the y-axis and population count along the x-axis. The visualization uses D3 v7’s `d3.scaleLinear` and `d3.scaleBand` to map data, with `d3.axisBottom` and `d3.axisLeft` rendering tick labels, and custom `AxisBottom.js`, `AxisLeft.js`, and `Marks.js` modules drawing light green SVG rectangles for each bar. Data is loaded asynchronously from a remote CSV file via `d3.csv`.

Loading thumbnail…

act6

This bar chart displays the population of ten countries in the year 2000, with countries on the y-axis and population on the x-axis. Light green horizontal bars, rendered as SVG rectangles, convey each country's population magnitude. The visualization uses D3 v7 with a linear x-scale and a band y-scale, fetching its dataset from a CSV file via `d3.csv`. Axis components are built using `d3.axisBottom` and `d3.axisLeft`, with custom tick formatting replacing "M" with "B" for millions.

Loading thumbnail…

Activity 6 Task 1 Q1.1

This example shows a horizontal bar chart of the top ten countries by population in the year 2000, sorted in descending order. The visualization loads CSV data from a GitHub gist, parses and cleans numeric fields, then renders SVG rectangles using D3 v7’s scaleBand for the categorical country axis and scaleLinear for population counts. It employs modular components for the bottom and left axes, with axis labels styled via CSS classes. The data is filtered to exclude missing values before sorting and slicing.

Loading thumbnail…

act6t1

This example displays a simple web page with the text "Hello VizHub!" centered on the screen. The visualization is minimal, consisting only of a static greeting message. The code uses D3.js version 6, specifically the `select` API, to target the HTML element with the ID `message` and set its text content. The styling is defined in a separate CSS file with a large font size and centered alignment. The implementation imports a local ES6 module to provide the greeting string.

Loading thumbnail…

activity 6_Task 1

This example displays a simple web page that renders the text “Hello VizHub!” centered in the browser using D3.js version 6. The visualization imports the `select` function from D3 to target the `#message` div element and sets its text content from a custom ES6 module named `myMessage`. The page structure is defined in HTML, with styling controlled by an external CSS file that dictates the large font size and center alignment. The code demonstrates a minimal data-visualization setup, using D3’s DOM manipulation API to update the page dynamically.

Loading thumbnail…

question 3

A randomized SVG visualization uses nested React maps to render hundreds of semi-transparent, rotated polygons with random colors and positions, creating a dense, abstract composition over a floral background image. The code generates coordinate arrays and applies Math.random() for each point, fill, and rotation value within the polygon elements. React 16.10 and ReactDOM render the output to the DOM, with the visualization titled "Six Reflection Buddha" despite its chaotic, generative appearance.

Loading thumbnail…

5 Buddhas

A field of hundreds of randomly generated, semi-transparent SVG polygons fills the screen, each rotated and colored using JavaScript's `Math.random()` within a React component. Above this chaotic backdrop, a single detailed SVG path depicting a Buddha figure is embedded. The visualization is built with React and rendered to SVG, relying on nested array maps to produce the abstract background and hardcoded path data for the centralized silhouette.

Loading thumbnail…

Fork of 5 Buddhas

Five semi-transparent, multicolored Buddha silhouettes overlap and rotate slightly over a black background. The shapes are drawn as SVG polygons with random RGB fill values and opacity, arranged in a layered composition. The visualization uses React and ReactDOM to render the SVG elements, while the Buddha paths are defined using raw SVG path data. A grid of small, randomly placed triangles also populates the canvas, created through nested array maps; the geometric forms are placed at deterministic positions based on the array index, and the piece is generated from JavaScript code with no external data source.

Loading thumbnail…

5 Buddhas

Five Buddhas renders five overlapping Buddha head silhouettes formed from SVG paths, layered over a black background with randomly positioned, translucent circles. Built with React and ReactDOM, the visualization uses nested `A.map()` loops to generate the circles, assigning random RGB fills and coordinates via `Math.random()`. The SVG paths define the intricate Buddha shapes, which are scaled and translated into a colorful, abstract composition.