Uday Vandanapu

Activity 7.1 Question 1

This pie chart displays literacy rates for 10 countries, with each slice labeled by its rate divided by 1000 and suffixed with "K," alongside a legend mapping colors to country names. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the SVG paths, with `scaleOrdinal` assigning colors from a hardcoded array. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and slice labels are positioned using the arc generator’s `centroid` method. The chart includes both slice text and a separate legend group, with formatted numbers via `d3.format`.

Nov 4, 2024

Fork of Fork of Hello VizHubActivity6_Question4.9

This bubble chart visualizes the relationship between sales volume (x-axis), price per unit (y-axis), and revenue (bubble size and color) for 20 vegetables. Each circle represents a vegetable, with revenue encoded by both radius and a color scale using `d3.scaleOrdinal` and `d3.interpolateTurbo`. The chart includes axis labels, a revenue legend with reference circles, and interactive tooltips via `d3.select`. Data is loaded asynchronously from a CSV file using `d3.csv`, and rendered as an SVG with D3 v7.

Oct 25, 2024

Activity6_Question4.9

This bubble chart visualizes the relationship between sales volume, pricing, and revenue for 20 vegetables using a CSV dataset. The x-axis maps quantity sold in pounds, the y-axis maps price per unit in USD, and bubble size represents revenue while color distinguishes vegetable types. Interactive tooltips appear on mouseover. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with interpolateTurbo for coloring, and SVG circles with event listeners for tooltip interactions. A legend indicates revenue bubble sizes, with all elements rendered as animated SVG.

Oct 25, 2024

Activity6_Question 1.1

A horizontal bar chart visualizes the population of 10 countries in the year 2000, using gray bars sorted by country name. The chart loads data from a CSV file via the `csv` function from d3.v5, which is then parsed and sliced to the top ten entries. The bars are rendered as SVG `<rect>` elements generated through React components (`Marks`), with scales created using `scaleBand` and `scaleLinear`. Axes are drawn with custom React components using d3’s tick methods, and population values are formatted using d3’s `format` function.

Activity6_Question1.2

This horizontal bar chart shows the populations of 20 countries in 2010, sorted by country name. The chart uses React with D3 v5, employing `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis population values. Data is loaded via `csv` from a GitHub-hosted CSV file, with population values converted from thousands. The visualization renders as SVG, with tick lines styled in blue and bars in green, and includes formatted axis labels using `format('.2s')`.

Acyivity6_Question 2.3

This stacked bar chart shows the distribution of game ratings across six popular titles, with each bar segmented into five rating categories from "below 5.0" to "above 8.5" as percentages. The visualization uses d3.stack() to compute the stacked series, d3.scaleBand() for the game categories on the y-axis, and d3.scaleLinear() for the percentage scale on the x-axis. Interactive tooltips display the exact percentage for each rating segment on mouseover, while d3.axisBottom and d3.axisLeft render the axes with custom styling from the included stylesheet.

Activity6_Question4

This visualization displays a bubble chart showing the correlation between quantity sold, price per unit, and revenue for a dataset of fruits loaded from a CSV file. Each circle’s x-position encodes quantity sold (pounds), y-position encodes price per unit (USD), and radius encodes revenue, with color mapping to fruit type via a scaleOrdinal and d3.interpolateTurbo. The SVG is built using d3.v7 with axisBottom and axisLeft scales, and includes interactive tooltips on mouseover, plus legends for revenue size and fruit categories.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble’s size encoding highway MPG and its color representing the manufacturer. Built with D3 v7, the SVG visualization uses `d3.scaleLinear` for axes and bubble sizing, and `d3.scaleOrdinal` for color mapping. Hovering over a bubble triggers a custom tooltip via `mouseover`, `mousemove`, and `mouseleave` events, while a legend shows MPG values and make colors.

Task2_Question3

This stacked bar chart visualizes the distribution of movie ratings across six sports genres, showing the proportion of each rating category within every genre. The chart uses D3.js to render horizontally stacked bars and percentage axes, with genres like Football and Soccer displayed along the y-axis. The data is loaded from a CSV file, and interactive tooltips provide precise percentage values for each rating segment on hover, revealing the impact of genre on audience ratings. The visualization encodes the five rating ranges using color-coded segments that sum to 100% for each genre.

Activity6_Question 3

This scatter plot visualizes the Leaf dataset, showing flower length on the x-axis and flower width on the y-axis, with points colored by plant species (setosa, versicolor, or other). Each circle’s radius and fill color encode leaf dimensions and species type. The visualization uses D3 v6 via `d3.csv`, `scaleLinear`, `axisLeft` and `axisBottom`, rendering SVG circles sized with the `rx` and `ry` attributes. The data is loaded from a remote CSV file, and axes are labeled in green text.

Activity6_Question3

This example shows a stacked horizontal bar chart comparing the percentage of ratings (from below 4.0 to above 8.0) for six different vegetables, with each segment colored by rating category. It uses d3.stack to transform the CSV data into stacked series and d3.scaleOrdinal for color mapping. The visualization relies on d3.axisLeft and d3.axisBottom for axes, while custom mouseover events trigger opacity changes and a tooltip displaying the exact percentage for each segment. The chart renders as SVG with axes and labels styled via external CSS.

Activity6_Question3

This scatter plot visualizes the Superstore dataset, showing the relationship between Quantity and Profit, with points colored by Order Priority (Critical, Medium, High, and default categories). It uses d3.csv to load the data, d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.selectAll with .join to render SVG circles. The plot is rendered in an SVG element that fills the browser window, with axes labeled "Profit" and "Quantity" via appended text elements. Data is sourced from a GitHub-hosted leaf.csv file.

Activity6_Task 3.2

This D3.js visualization presents a scatter plot of the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. The plot encodes the species of each iris flower using distinct symbols, which are displayed in a legend on the right. The code utilizes `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.symbolsFill` and `d3.symbol` for the shape mapping. Data is fetched from a remote CSV file and parsed with `d3.csvParse`, while `d3.axisLeft` and `d3.axisBottom` render the axes.

Activity6_Task3.1

A scatter plot of the Iris dataset displays petal length and width, with each point colored by species (setosa, versicolor, virginica) using a fixed color mapping. The visualization is rendered as SVG via D3 v6, using `scaleLinear` for axes and `axisLeft`/`axisBottom` to draw ticks. Data is loaded as CSV from a GitHub repository, parsed with `csv`, and circles are bound to marks with `selectAll` and `join`. The code also references sepal dimensions in the data but does not use them in the plot.

Activity6_Task2

This visualization shows how IMDb movie ratings are distributed across genres as a stacked bar chart, with each bar representing the proportion of five rating ranges within a genre. Hovering over a segment reveals the exact percentage for that rating category. The chart uses a D3 v7 `d3.stack` layout with `d3.scaleOrdinal` colors and SVG rendering. Data is loaded from a CSV file, with axes formatted using `d3.axisBottom` and `d3.scaleBand`, and interactivity handled via mouse events with a custom tooltip.

Activity6_Question1.2

This bar chart displays the population of the top 10 countries in the year 2020, with countries listed on the y-axis and population on the x-axis. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and marks are rendered as SVG rectangles with tooltips showing formatted population values.

Activity6_Task 1

This bar chart displays the top 30 countries by 2020 population, ranked along a vertical band scale. The visualization uses D3 v5 for data loading and scale creation, with React components rendering SVG rectangles for each bar. The code applies `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, formatting tick labels with `d3.format`. Data is fetched as CSV from a GitHub repository, with values multiplied by 1000 to represent actual population figures.

Activity6_Task 1

This example displays the text "Hello VizHub" centered on a blank page. It demonstrates the basic setup of a VizHub project, importing the `select` function from the D3.js library and a local ES6 module. The code uses `select('#message').text(message)` to render the text inside the `div` element. The example primarily serves as a minimal template, loading D3 from a CDN via UNPKG and structuring files for modularity.

Activity6_Task 1

Uday Fork of 6 Buddas

A React-based visualization renders six overlapping Buddha silhouettes, each drawn as an SVG path filled with green and outlined in yellow, then transformed with varying scales and translations. The paths are layered atop a background image of flowers, with the composition anchored by a large HTML heading. The code uses React's JSX structure to generate the SVG elements, mapping coordinate data into path definitions.

Oct 17, 2024

Uday Fork of 6 Buddas

A grid of small, translucent, randomly colored rect elements is rendered first, creating a scattered backdrop. Over this, six nearly identical SVG paths, each depicting the outline of a Buddha, are drawn. The paths are positioned and scaled to overlap, and a flower-patterned background image is set via CSS on the body, which shows through the transparent SVG. The example uses React with ReactDOM to generate the SVG markup, while the paths are drawn using raw SVG path data.

Oct 17, 2024

Fork of 5 Buddhas

This visualization shows a chaotic field of overlapping, semi-transparent hexagons in a dark viewport, generated from a nested set of array iterations that produce random coordinates and RGB colors. Built with React and rendered as SVG, the code uses ReactDOM to mount the component, while the `Math.random()` function drives the stochastic placement and coloring of each shape. The piece also includes a static golden-hued Buddha silhouette path, layered beneath the hexagons in a single group transform, resulting in a dense, abstract composition where the figure is partially obscured by the generative elements.

Oct 17, 2024