S

Sowjanya Devupalli

@sowjanya4u4ever·25 public vizzes

Loading thumbnail…

question 2

This example shows a stacked area chart that visualizes fruit quantities (apples, oranges, bananas) over time, with three semi-transparent colored layers representing each fruit category. The visualization uses D3.js v7 to load CSV data from a GitHub repository, then applies `d3.stack`, `d3.area`, and `d3.scaleBand`/`d3.scaleLinear` to compute and render the stacked areas as SVG paths. Axes with year and quantity labels are added via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

activity 7Question 1

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020 in the United States. Each slice is labeled with its death count in thousands, and a legend maps colors to country names. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to generate the SVG paths and text labels, with data loaded via `d3.csv` from a GitHub repository.

Loading thumbnail…

Activity 7 question 2

This example demonstrates a stacked area chart that visualizes fruit quantities across years. The visualization uses D3.js v7 to load CSV data from a GitHub repository and render the stacked areas with a categorical color scheme. The code employs D3's `d3.stack()`, `d3.area()`, `d3.scaleBand()`, and `d3.scaleLinear()` APIs to construct the chart, along with `d3.axisBottom()` and `d3.axisLeft()` for axes. The SVG output is styled with semi-transparent areas and labeled axes for year and fruit quantity.

Loading thumbnail…

Question 1

This example shows the top 10 countries by deaths from air pollution in 2020 as a donut-style pie chart. Each slice is labeled with its death count in thousands, and a legend lists the countries with corresponding color swatches and values. Built with D3.js v5, the code uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to compute and render the chart as SVG. Data is fetched as CSV from a GitHub repository, with sections colored via a fixed array of ten colors.

Loading thumbnail…

Activity6_Task3.1

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal length for different Iris species. The visualization uses distinct shapes (circles, squares, and triangles) to differentiate species, with a dedicated shape legend positioned on the right side of the chart. Built with D3.js v7, the code employs `d3.scaleLinear` for axes scaling and `d3.scaleOrdinal` with `d3.symbolsFill` to map species categories to symbol types. Data is loaded asynchronously from a GitHub-hosted CSV file, with axes labeled and styled through custom `d3.axisLeft` and `d3.axisBottom` calls.

Loading thumbnail…

Activity6_Task2(Question 3)

This stacked bar chart shows sales figures for five store locations, broken down by product category: Clothing, Equipment, and Accessories. The horizontal bars are segmented by category, with each segment colored distinctly and labeled in a legend. The visualization uses d3.stack() to compute stacked series, d3.scaleBand() and d3.scaleLinear() for positioning, and includes interactive tooltips that display the exact sales value for each category-store combination on hover. The data originates from an IMBD movie ratings source file, and the SVG rendering is styled with custom fonts.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, encoding petal length and petal width for individual flowers while coloring each point by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The visualization is built with D3 v6, loading CSV data via `d3.csv`, mapping values with `scaleLinear`, and rendering SVG circles. Axis labels are styled with green text, and the plot fills the entire browser window by using `window.innerWidth` and `window.innerHeight`. The chart displays four measurements per flower but plots only two dimensions at a time.

Loading thumbnail…

Activity6_Task3(Question 6)

This scatter plot visualizes candy data, showing the relationship between sugar percentage and win percentage. Each dot represents a candy type, colored red for chocolate candies and blue for non-chocolate candies. The visualization uses D3 v6's `csv` loader to fetch data from a GitHub repository, then employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create the axes. The SVG rendering includes labeled axes for sugar and win percentages, with the plot displayed across the full browser window using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Activity6_Task4(Question 9)

This visualization compares beverage manufacturers using a bubble chart where each bubble’s position maps glucose levels on the x-axis and beverage rating on the y-axis, with bubble size representing calorie content and color indicating brand (Dew, Sprite, Thumsup, Fanta, Maaza, Coke, Pepsi). Built with D3 v7, it renders as SVG with scales including d3.scaleLinear for axes and bubble radius, d3.scaleOrdinal with d3.schemeSet1 for categorical colors, and includes labeled legends for both size and brand. Data comes from an external CSV file.

Loading thumbnail…

activity 6_Task 1

This visualization shows the population of 30 countries in 2020 as a horizontal bar chart. The React-based code uses D3 v5 to load CSV data, and employs `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. The SVG rendering includes custom axis components and rectangle marks, with tooltips showing formatted population values. Data originates from a GitHub-hosted CSV file, and the chart is rendered entirely with SVG elements.

Loading thumbnail…

Activity 6_Task 1 (question 2)

This example shows a horizontal bar chart of population data for 20 countries in 2010. The chart maps country names to the y-axis and population to the x-axis, with light green bars and blue tick marks. It uses React components with D3 v5 scales (`scaleBand`, `scaleLinear`), `csv` for data loading from a GitHub-hosted CSV, and SVG rendering. The x-axis labels are formatted using D3’s `format` function with SI prefixes (e.g., “B” for billions), and tooltips display the formatted population via an SVG `<title>` element.

Loading thumbnail…

Activity 6_Task 1 (question 1)

This example shows a horizontal bar chart ranking the populations of ten countries for the year 2000, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements via D3’s `scaleBand` and `scaleLinear` for positioning, while `AxisBottom` and `AxisLeft` components generate tick marks and labels. Data is loaded as CSV from a GitHub repository, with population values converted from thousands. Tooltips display formatted population figures using D3’s `format(‘.2s’)`.

Loading thumbnail…

2 budha reflection

A dense scatter of colored dots overlays an ornate SVG line drawing of a seated Buddha, creating a layered, psychedelic composition. Small circles, generated randomly via nested array maps, appear across the canvas with varying RGB colors and opacity. The Buddha path itself uses raw SVG `path` elements rendered through React components, with the image scaled and translated via SVG transforms. The visualization combines generative randomness with structured vector art.

Loading thumbnail…

6 buddha reflection

A dense arrangement of overlapping diamond-shaped polygons forms a kaleidoscopic backdrop, with a single Buddha silhouette path rendered in the center atop the layered pattern. The visualization uses React to generate SVG elements, mapping nested arrays to create hundreds of semi-transparent, randomly colored and positioned polygons with rotational transforms. A hardcoded SVG path draws the Buddha figure, which is translated and scaled into place against the black background. The code relies on React's component model with JSX to construct the SVG structure dynamically.

Loading thumbnail…

Question 3

The visualization displays a Buddha silhouette rendered as a dense, colorful SVG path composition over a floral photographic background. It uses React with ReactDOM to render 30 nested map iterations that generate hundreds of semi-transparent circular elements with randomized positions and RGB color values. The main artistic feature is a complex SVG path drawing of a Buddha figure, transformed and scaled, which overlaps with the generated geometric patterns. The code leverages React's JSX syntax within an SVG container, combining algorithmic generative art with a traditional path-based illustration.

Loading thumbnail…

2 buddha Reflection

A generative mandala of layered Buddha silhouettes emerges from overlapping, randomly positioned circles rendered in React. The SVG visualization uses React’s `map` method to draw 8,000 translucent circles with randomized coordinates and RGB color values, while a complex SVG path, defined in JSX, traces a detailed Buddha figure scaled and translated across the canvas. The composition blends geometric abstraction with a recognizable religious icon on a black background.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) across various car makes. Each circle represents a car brand, with its position determined by the horsepower and torque values, while the bubble radius encodes highway fuel efficiency. Hovering over a circle reveals a tooltip displaying the car make. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble sizing, and `d3.interpolateTurbo` to assign colors to different makes. The chart includes a legend for bubble sizes and color-coded car makes, rendered as an SVG with interactive tooltips.

Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, showing sepal length versus petal length for three flower species. The visualization uses d3.v7 with scaleLinear for axes, scaleOrdinal with symbolsFill to encode species as different point shapes, and a custom legend. Data loads asynchronously from a GitHub-hosted CSV file, parsed with csvParse, with axes and shape legends created via reusable D3 modules. The plot updates automatically when the data arrives.

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays population figures for ten countries, using horizontal bars sorted by the dataset’s original order. The visualization loads data from a CSV file, multiplies each population value by 1,000, and renders it as SVG rectangles. It uses D3 v7’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to generate the labeled axes. The chart applies margins and a steelblue fill to the bars via CSS.

Loading thumbnail…

Fork of Food Production Stacked Bar Chart

This stacked bar chart displays the estimated 2021 food production across continents, with bars showing tonnage of various food categories. The visualization uses D3's `scaleOrdinal` with `schemeCategory10` for colors and `flatRollup` to reshape the CSV data from the Kaggle world food production dataset. The `stackedBarChart` function builds stacked rects using `stack()` and `scaleLinear` for x-values, while the adjacent `colorLegend` provides interactive highlighting, dimming non-hovered segments and drawing a stroke on the selected category.

Loading thumbnail…

question

This stacked bar chart displays the estimated religious composition of the 20 most populous countries in 2010, using data from the Pew Research Global Religious Landscape. Each bar represents a country’s total population in millions, segmented by religion and colored via d3.scaleOrdinal with the schemeCategory10 palette. Hovering over a legend item highlights bars for that religion and fades others, while also drawing a stroke around matching segments. The visualization is built with D3’s stack layout to compute layer offsets and flatRollup to structure the data, with axes rendered by the @curran/responsive-axes component.

Loading thumbnail…

Activity6_Task2(Question 1)

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The horizontal bars are sorted by population, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `csv` for data loading, and renders SVG `rect` elements via the `Marks` component. The chart applies a custom Poppins font, teal bar color, and axis tick styling for a polished presentation.

Loading thumbnail…

Activity6_Task2(question 1)

This bar chart displays the top 10 most populous countries as of January 1, 2024, using a vertical bar layout with axes labeled for country names and population in thousands. The visualization fetches data from the UN population estimates dataset via `@curran/un-population-estimates-2024`, filters for country entries, and sorts them in descending order. It renders with D3 scales (`scaleBand` and `scaleLinear`) and includes axis labels from the `@curran/axis-labels` library. The chart uses standard SVG rectangles for bars and a light gray inner rectangle background.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb ratings across movie genres, with each bar segment representing the percentage of films within a specific rating bracket. The visualization uses a horizontal stacked bar layout, with genres on the y-axis and percentage on the x-axis. Hovering over any segment displays a tooltip with the exact percentage for that rating category within the genre. The chart is built with D3.js v7 and rendered as an SVG, using the `d3.stack()` function to compute the stacked segments and `d3.scaleOrdinal()` for color encoding. Data is loaded from a local CSV file.

Loading thumbnail…

5 buddha reflection

Five overlapping Buddha silhouettes in black and white create a ghostly, layered composition on a black background. The piece uses React with ReactDOM to render SVG polygons with randomized coordinates, fill colors, and rotation transforms, while a detailed path defines the Buddha's outline. The visualization uses a loop to generate a grid of semi-transparent shapes, producing a shimmering, kaleidoscopic effect over the central figure.