180030215cse@gmail.com

@VenkateswaraRaoKolusu7·10 public vizzes

Activity-7_Q1

This pie chart visualizes product sales distribution across categories, using a standard D3 pie layout with labeled slices and a color-coded legend. The data is loaded from a remote CSV file via `d3.csv` and rendered as SVG. It uses `d3.pie()` for arc generation, `d3.arc()` for path construction, and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical colors, with text labels positioned using `arc.centroid`.

Nov 9, 2024

Loading thumbnail…

Activity-7_ Q2

This area chart displays monthly sales data for 2023, with months on the x-axis and sales in USD on the y-axis. The visualization uses D3 v6, loading data from a remote CSV file via `d3.csv`. It demonstrates modular ES6 imports, including a local `areachart.js` module that uses `d3.area()` to generate the filled path, `d3.scaleBand()` for the categorical x-axis, and `d3.scaleLinear()` for the continuous y-axis. The SVG rendering includes axis labels and a green-filled area.

Nov 9, 2024

Loading thumbnail…

Activity6-Task4_

This bubble chart visualizes the correlation between disease incidence and prevalence rates (per 100,000 population) alongside average age at diagnosis for 15 medical conditions. Each bubble’s position maps incidence and prevalence, while its size reflects the average diagnostic age. The visualization uses Chart.js on an HTML canvas with semi-transparent colors to distinguish diseases. The chart includes labeled axes for both rates, offering a clear comparison of how various diseases spread and persist across populations. The static rendering presents the data directly from embedded JavaScript objects without external data loading.

Oct 23, 2024

Loading thumbnail…

Activity6- Task4

This bubble chart visualizes the correlation between processor speed, RAM, and battery life across various devices, with bubble size representing battery life and color encoding device type. The SVG chart uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeCategory10` for color coding, and interactive tooltips on mouseover. A legend displays both battery life ranges and device color categories. The data comes from `gadgetdata.csv`, rendered as animated circles with D3 v7 selections.

Oct 22, 2024

Loading thumbnail…

Activity-6_Task-3

This example presents a scatter plot of US Census demographic data, comparing Action and Adventure ratings across platforms. It loads data from a CSV file hosted on GitHub and renders circles with tooltips showing platform names. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to coordinate scales and axes. The SVG output is sized to the window, with axis labels denoting Latitude and Longitude, and uses a steelblue fill for the plotted points.

Oct 22, 2024

Loading thumbnail…

Activity-6_Task2

This example presents a stacked horizontal bar chart of movie genres, comparing metrics like movie count, average rating, box office revenue, and awards won. The D3 v7 code loads data from a CSV file and uses `d3.stack()` to aggregate the numeric columns, with genres mapped to the y-axis using `d3.scaleBand()` and values positioned via a linear x-scale. Interactive tooltips appear on hover, and a legend identifies each color-coded metric. The visualization is rendered as SVG within a 960-by-500 canvas, using scales like `d3.scaleOrdinal()` for color assignment and `d3.axisBottom()` for the axes.

Oct 21, 2024

Loading thumbnail…

Activity -6_ Task-2

This horizontal bar chart displays the populations of the top 20 countries for the year 2020, using green bars sorted along a linear scale. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, while `csv` loads the dataset from a GitHub repository. SVG rendering provides the plot, with axis tick formatting converting values to billions via the D3 `format` function. Hover tooltips show precise population values through native SVG `<title>` elements.

Oct 21, 2024

Loading thumbnail…

activity-6_Task 1

This horizontal bar chart displays the population of ten countries for the year 2020, drawn as SVG rectangles using React. The chart uses D3 v5’s `scaleBand` and `scaleLinear` for axes and scales, with `format('.2s')` for tick labels. Data is loaded from a CSV file via D3’s `csv` function, then rendered with custom `AxisBottom`, `AxisLeft`, and `Marks` components.

Oct 20, 2024

Loading thumbnail…

6 Buddhas

Six overlapping Buddha silhouettes form a symmetrical mandala-like composition on a dark background with a faint floral photo overlay. Each figure is rendered as an SVG path with distinct color fills, layered to create a meditative, repetitive visual rhythm. The React app defines a fixed 960×1000 pixel viewport, positioning each Buddha with SVG transforms (translate and scale) and styling the background with a CSS opacity effect. The paths originate from inline coordinate data, with no external data source or interaction logic.

Oct 19, 2024

Loading thumbnail…

5 Buddhas

Five Buddha silhouettes overlap in a black-background canvas, rendered as geometric polygons scattered across the viewport alongside stylized golden Buddha path shapes. The visualization uses React and SVG, with polygon points generated through nested array maps and random number calculations. A large SVG path element defines the main Buddha figure, while the code employs Math.random() for positioning and RGB fill colors, with rotation transforms applied to polygon elements.

Oct 19, 2024