S

sushanthkodipyaka@gmail.com

@sushanthkodipyaka·17 public vizzes

Loading thumbnail…

Ques2

This area chart displays the count of sales for each region, using a smooth, curved line to connect data points across the categorical x-axis. The chart is rendered as an SVG using D3 v5, with scales for the band and linear axes, and includes axis labels and gridlines. It loads sales data from a CSV file and applies D3’s `area` generator with `curveBasis` to create the filled area beneath the line. Sales values are parsed as numbers, and the chart is styled with custom CSS for tick labels, axis colors, and the shaded area fill.

Loading thumbnail…

Ques1

This pie chart visualizes the count of sales across different regions from a CSV dataset. The pie slices show sales values in thousands, with a legend on the right identifying each region and its corresponding value. The chart uses D3 v5, including the `pie` and `arc` functions to generate segments and compute centroids for labels. Data is fetched asynchronously using `d3.csv`, and colors are mapped via `scaleOrdinal`, with axis labels added manually via SVG text elements.

Loading thumbnail…

Activity6-Question2

This stacked horizontal bar chart shows the distribution of music ratings percentages across five platforms: Spotify, YouTube, Apple, Amazon, and Tidal, segmented into five rating categories from below 5.0 to above 8.5. Each bar segment’s length corresponds to the proportion of ratings in that category, with hover interactions revealing exact percentages via a tooltip. Rendered with D3 v7 using `d3.stack()` and `d3.scaleOrdinal` for coloring, it employs SVG axes from `d3.axisBottom` and `d3.axisLeft`, reading data from a CSV file. The chart includes a legend and uses percentage labels formatted with `d3.format`.

Loading thumbnail…

Activity6-Question4

This bubble chart visualizes the relationship between healthcare spending (USD) and life expectancy across several countries from 1970 to 1974. Each bubble represents a country-year observation, with bubble size encoding the year and color distinguishing countries. Hovering over a bubble reveals a tooltip with exact values. The chart uses d3.v7's scaleLinear for axes and bubble sizing, scaleOrdinal for coloring, and SVG circles with transition-based tooltip interactions. Data is loaded from a local CSV file.

Loading thumbnail…

Activity6-task4

This bubble chart visualizes the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size and color) for various car makes. The chart uses a linear scale for both axes, with bubble size representing highway MPG and color encoding the car manufacturer. Built with D3.js v7, it renders as an SVG with animated transitions. The visualization includes interactive tooltips that display the car make on hover, along with legends for both bubble size and color categories. The data is loaded from a local CSV file.

Loading thumbnail…

Activity6-question3

This visualization displays the Exoplanets dataset as a scatter plot, with orbital period on the x-axis and mass on the y-axis. The code uses D3 v6 to load CSV data from a GitHub repository and render SVG circles, color-coded by detection method (Radial Velocity, Transit, or other). It applies scaleLinear for both axes, axisLeft and axisBottom for ticks, and custom CSS styling for labels. The plot also encodes distance and year values as rx and ry attributes on the circles, though these do not visually affect the circle rendering since the radius is fixed.

Loading thumbnail…

question3

The visualization displays a dense, layered cluster of diamond shapes in vivid, randomized colors, overlapping over a stylized Buddha figure rendered as an SVG path. A background flower image sits behind the composition. Built with React and rendered as SVG, the code generates the diamonds through nested array maps that compute random positions and fill colors using `Math.random()`. The Buddha path is drawn via an SVG `<path>` element with a complex `d` string, transformed and scaled within a `<g>` group.

Loading thumbnail…

Buddhas

A generative Buddhist-inspired artwork uses nested `Array.map` iterations in React to create overlapping SVG `<polygon>` elements, each with randomized coordinates, color values, and rotation transforms. The rendered composition layers thousands of semi-transparent diamond shapes across a black background, producing a dense, kaleidoscopic effect. The code also embeds a large static Buddha silhouette path, scaled and positioned within the SVG, contrasting the chaotic geometric field with a recognizable figurative form. React renders the SVG declaratively, while the randomized values are computed inline during each render.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes are rendered as dense, layered SVG paths on a black background. The visualization uses React to map nested loops over a numeric array, generating hundreds of semi-transparent circles with random positions and RGB colors that create a scattered, colorful halo around each central figure. The Buddha path itself is drawn with a thick stroke, and the entire composition is scaled and translated. The code imports React and ReactDOM, with styling set through an external HTML file.

Loading thumbnail…

Activity6-task3.2

This interactive scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for different iris species. The shape of each point encodes the species, with a legend explaining the mapping. Built with D3 v7, the visualization uses the scaleLinear function for axes and scaleOrdinal for shape encoding. Data is loaded from a CSV file, parsed with csvParse, and positioned using the symbol generator. The plot is rendered into an SVG, with axes created via the axisLeft and axisBottom APIs.

Loading thumbnail…

Activity6-task3

This visualization displays the Iris dataset using a scatter plot, mapping petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, virginica). The code loads data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles as SVG elements with `d3.axisLeft` and `d3.axisBottom` for axes. Additional attributes for sepal dimensions are stored but not visualized. The chart uses red-labeled axes with green text and a full-screen responsive SVG canvas.

Loading thumbnail…

Activity6-Task2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating levels from "below 5.0" to "above 8.5." The visualization uses d3.stack() to compute the stacked segments, d3.scaleBand() for genre positioning, and d3.scaleLinear() for the percentage axis. Hovering over any segment displays a tooltip with the exact percentage for that rating level within the selected genre. Colors are assigned via d3.scaleOrdinal() with an array of five categorical colors, and all elements are rendered as SVG.

Loading thumbnail…

Activity6-Question1.2

This example displays the population of 20 countries for 2020 as a horizontal bar chart, with country names on the y-axis and population values formatted in billions on the x-axis. Using React and D3 v5, it loads CSV data via the `csv` function from a GitHub URL, then employs `scaleBand` and `scaleLinear` for the axes. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with bars colored light green and tooltips showing formatted values.

Loading thumbnail…

Activity6-Question1

This example displays a horizontal bar chart ranking ten countries by their 2020 population, using green bars on an SVG canvas. The chart includes labeled axes and a formatted tooltip for each bar. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a GitHub-hosted CSV file. Axis components and marks are rendered as separate ES6 modules, with population values converted from strings to numbers.

Loading thumbnail…

Activity6-task1

This example displays a horizontal bar chart ranking populations of 30 countries in 2020, using green bars with a blue axis grid. The visualization is built with React and rendered as SVG, using D3 v5 scales (`scaleBand`, `scaleLinear`) and `format` for tick labels. Data is loaded via `csv` from a GitHub-hosted CSV file. The chart includes a bottom axis, left category labels, and a "POPULATION-2020" title, with hover tooltips showing formatted values.

Loading thumbnail…

Activity6-task1

This example shows a horizontal bar chart ranking the 30 most populous countries or regions in 2020, with bar length encoding population counts in thousands. Each bar includes a hover tooltip displaying the exact value. The visualization uses React to render SVG elements, with D3’s `csv` loader fetching data from a GitHub-hosted CSV file. Scales are created implicitly via the `xScale` and `yScale` props, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels using D3’s scale methods.

Loading thumbnail…

Buddha5

The visualization depicts an abstract, colored Buddha formed by overlapping translucent SVG circles, each with randomly generated positions and vibrant RGB fill values, layered over a pre-defined Buddha path. The circle positions derive from a loop using a cubic function and `Math.random()`, creating a scattered, generative effect. Built with React and ReactDOM, the SVG output includes a detailed path for the Buddha silhouette, while the black background and high-resolution styling enhance the artwork’s visual impact.