S

s.harshinisai01@gmail.com

@HarshiniSangadi·16 public vizzes

Loading thumbnail…

Activity 9.3

This area chart visualizes the growth percentage of AI over time, with years on the x-axis and growth percentage on the y-axis. The chart uses a smooth curve to connect data points, filling the area below the line in sky blue. The code imports D3 v7 functions like `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path. Data is loaded from a CSV file via `csv`, with axes rendered using `axisLeft`, `axisBottom`, and gridlines styled through CSS.

Loading thumbnail…

Activity 9.2

This pie chart visualizes glucose levels for patients with diabetes, where each slice represents a patient and the slice’s size corresponds to their Glucose value. The chart includes a legend that pairs each patient’s BMI with their glucose level, and the slices are sorted by glucose in descending order. The visualization uses D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate the SVG paths and color encoding. Data is loaded from a CSV file hosted on GitHub, and the chart is rendered within an SVG element on an HTML page.

Loading thumbnail…

Activity 9.2

A pie chart displays the distribution of the Outcome attribute in a diabetes dataset, showing the proportional split between two outcome categories. The visualization loads CSV data from a GitHub repository, then uses D3's pie generator and arc generator to construct the chart, with slices colored via a sequential ordinal scale. The chart includes a legend mapping each outcome to its corresponding color. The example demonstrates importing D3 modules and local ES6 modules, with rendering handled through SVG in an HTML page.

Loading thumbnail…

Activity 9.1

This animated scatter plot displays measurements from the Iris flower dataset, with points colored by species (setosa, versicolor, virginica). The visualization cycles through different feature combinations—petal width, sepal width, petal length, and sepal length—on the x-axis, while keeping sepal length on the y-axis. Built with D3.js, it uses a custom reusable `scatterPlot` component with `d3.scaleLinear` scales, axes, and a `setInterval` timer to update the plot dynamically. The SVG rendering includes a color-coded legend and axis labels.

Loading thumbnail…

Activity6_Task4.2

This interactive bubble chart visualizes the correlations between sepal length and petal length in the classic Iris dataset, with bubble size encoding sepal width. Each of the 150 flowers is represented as an SVG circle colored by species using `d3.scaleOrdinal` and the Turbo color map. Hovering a bubble triggers a tooltip via D3's event handlers that displays the species name. The chart includes labeled axes, a legend for size values using `d3.scaleLinear`, and a 400-pixel right margin for the legend, all rendered through `d3.svg` with animated transitions on the tooltip.

Loading thumbnail…

Activity6_Task4.1

This visualization shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble represents a make, with its position determined by horsepower (x-axis) and torque (y-axis), while the bubble’s radius encodes highway MPG and its color differentiates makes. The chart uses d3.csv to load and parse the data, d3.scaleLinear for axes and sizes, d3.scaleOrdinal with d3.interpolateTurbo for coloring, and d3.axisBottom and d3.axisLeft for axes. Custom tooltips appear on mouseover via event listeners, and a legend clarifies bubble size and color mappings.

Loading thumbnail…

Activity6_Task2.1

This example visualizes IMDb movie ratings across six genres using a stacked horizontal bar chart, showing the percentage distribution of ratings across five score categories from below 5.0 to above 8.5. The chart uses D3 v7's `d3.stack()` to compute stacked series and `d3.scaleOrdinal` with a custom color palette to distinguish rating categories. Interactive tooltips appear on mouseover using D3 event handlers, displaying the exact percentage for each genre and rating segment. The data is loaded from a CSV file and rendered as SVG elements within a 960x500 viewport.

Loading thumbnail…

Activity6_Task1

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020. It is built with React and renders to SVG. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.format` to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded asynchronously from a remote CSV file using `d3.csv`, and each bar includes a native SVG `<title>` element for hover tooltips.

Loading thumbnail…

activity 6_Task 1

This example displays a horizontal bar chart comparing the populations of ten countries for the year 2000. Using React and D3 v5, it loads CSV data via the `useData` hook, scales the bars with `scaleBand` and `scaleLinear`, and formats tick labels with `format`. The SVG renders through reusable `AxisBottom`, `AxisLeft`, and `Marks` components.

Loading thumbnail…

Activity6_Task3.4

This example demonstrates the fundamental "Hello World" pattern for the VizHub V3 Runtime Environment. It renders a single line of text with a large, adjustable font size directly into a container element. The code exports a `main` function that accepts a container and sets its inner HTML with inline styling, showcasing the simplified entry point that replaces the traditional `index.html` file. The use of an integer literal for font size highlights the platform's interactive widget system, where holding Alt and dragging the value provides immediate visual feedback.

Loading thumbnail…

Activity6_Task3.3

This scatter plot visualizes student performance by mapping math scores on the x-axis and reading scores on the y-axis, with each circle colored by gender (skyblue for female, lightgreen for male). The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select` to load data from a GitHub-hosted CSV and render SVG circles. Additional attributes for writing score and test preparation are stored but not visually encoded, while axis labels appear in green.

Loading thumbnail…

Activity6_Task3.2

This example visualizes the Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis. Data points are drawn as different shapes corresponding to the three iris species, with a custom shape legend explaining the mapping. The code uses d3.csvParse to load the data and d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to encode values and shapes. Axes are generated with d3.axisLeft and d3.axisBottom, while the visualization updates dynamically as data loads via a simple state-based rendering pattern.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, displaying petal length against petal width for individual flowers, with each point colored by species (setosa, versicolor, or virginica). The chart uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map values to coordinates, and render axes. Data is fetched from a GitHub-hosted CSV file, and the visualization is drawn as an SVG with circle markers, including axis labels styled in green.

Loading thumbnail…

Activity6-Task2

This visualization displays the Iris flower dataset as a stacked horizontal bar chart, showing the contribution of four measurements (sepal length, sepal width, petal length, and petal width) for each of the three iris species. The chart uses a diverging color scale to distinguish the measurements and includes interactive tooltips that reveal the precise value of a measurement when hovering over a segment. The code loads D3 v7 via UNPKG and uses the `d3.stack()`, `d3.scaleLinear()`, `d3.scaleBand()`, and `d3.scaleOrdinal()` APIs to process and position the data, while rendering the final output as SVG.

Loading thumbnail…

Activity6_Task1.2

A horizontal bar chart displays the population of twenty countries in 2010, ranked from top to bottom. Green bars extend from the left axis to the right, with a blue tick line marking the bottom axis. Built with React and D3 v5, the visualization uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and loads CSV data from a GitHub repository. Tooltips reveal the population value on hover, formatted with abbreviations like "B" for billions.

Loading thumbnail…

One Overlapping Another Image of Buddha

A repeating array of 441 randomly positioned, semi-transparent polygons, each filled with a bright color, is layered to create an abstract, kaleidoscopic composition. The polygons are drawn with rotation and overlaid on a black background. At the center, a detailed line-art vector portrait of Buddha, rendered in white, emerges as the focal point, with the colorful shapes surrounding and overlapping it to create a vibrant, meditative collage.