vaishalireddy55555@gmail.com

Q2Task9_VaishaliKonda

Task9_Vaishalikonda

Fork of Hello VizHub

Q4_Activity8

Q3_Activity8

Q1Task2

A horizontal stacked bar chart displays the proportional breakdown of five rating categories for six named categories, sourced from a local CSV. The implementation uses D3 v7's `d3.stack` and `d3.scaleOrdinal` to generate SVG rectangles, with `d3.axisBottom` and `d3.axisLeft` for scales. Hover interactions reveal per-segment percentages via an HTML tooltip, while a color scale and axis labels clarify the distribution.

Q2_Activity8

Q1_Activity8_VaishaliKonda

A bar chart displays the population of ten countries in the year 2000, sourced from a CSV file loaded via d3.csv. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear mapping categorical country names and quantitative population values. The d3.format function formats tick labels using SI notation, replacing 'G' with 'B'. Tooltips, implemented with SVG `<title>` elements, show the exact population value on hover. Axes and bars are styled with CSS, and the chart is rendered within a fixed 960x500 viewport.

Tutorial4

This bubble chart explores the relationship between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius represents highway MPG and its color distinguishes the car manufacturer. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color mapping, and SVG circles with interactive tooltips on mouseover. The legend explains both the MPG sizing and the color mapping for each make based on data from `bubblechart.csv`.

Tutorial3.2

This example shows an interactive scatter plot of the Iris dataset, encoding species as symbol shapes and displaying a custom shape legend. It demonstrates modular D3 v7 code organization, with separate ES6 modules for axes, scatter plot rendering, and legend construction. The visualization uses D3 scales (scaleLinear, scaleOrdinal), symbol generators, and CSV data loading from a GitHub gist. The code also highlights VizHub’s pattern of state management and re-rendering through a setState function, alongside dynamic SVG resizing to the window.

Tutorial3.1

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with each point colored by species (skyblue for setosa, lightgreen for versicolor, and orange for virginica). It also encodes sepal length and width as the `rx` and `ry` attributes on each circle, though the rendering uses a constant radius. The visualization loads data via `d3.csv` from a GitHub gist, uses `d3.scaleLinear` and `d3.extent` for scales, and renders SVG circles with axes via `d3.axisLeft` and `d3.axisBottom`. Custom axis labels are added with rotated text.

Tutorial2_Activity8

This example visualizes IMDb movie ratings across genres using a 100% stacked bar chart, where each horizontal bar shows the proportion of ratings falling into five categories from below 5.0 to above 8.5. The chart uses D3 v7’s `d3.stack()` to compute the stacked segments and `d3.scaleOrdinal` for color encoding, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating category, while the data comes from a local CSV file loaded through D3’s data parsing methods.

Activity8 - Vaishalikonda

5 Buddhas

5 Buddhas uses React and SVG to render five overlapping, semi-transparent Buddhas generated from triangular polygons. The visualization layers randomized shapes and colors atop the Buddha figures, with each polygon rotated and filled using random RGB values derived from Math.random(). The composition blends geometric abstraction with the iconic Buddha silhouette against a black background, creating a psychedelic, generative art piece.