Sai Gottumukkala

A7 Q2

This area chart displays global average temperature changes over time, with a green filled region illustrating the temperature rise. Built with D3.js v7, it loads CSV data from a GitHub gist and maps the year and temperature values to the x- and y-axes using `d3.scaleLinear`. The visualization uses `d3.area` to generate the area path, while `d3.axisBottom` and `d3.axisLeft` render the axes. The chart is rendered as an SVG with a custom margin setup, and axis labels indicate the year and temperature in degrees Celsius.

Activity7 Q1

This pie chart visualizes the distribution of population (in millions) across income brackets, using a dataset loaded from a GitHub gist. The chart is rendered as an SVG with slices colored by income bracket categories, and includes a legend and axis labels for context. The visualization is built with D3 version 7, employing the `d3.pie` layout, `d3.arc` for generating slice paths, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. Data is parsed from CSV format and numeric values are coerced to numbers for aggregation.

Activity7 Tutorial

Activity 6 Question 4

A bubble chart plots student algebra scores against literature scores, with circle sizes encoding daily study hours. Each circle represents a student, and hovering reveals a tooltip with the student's name and exact values. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for the axes and `d3.scaleSqrt` for bubble radius. Data comes from a CSV file loaded via `d3.csv`, with interactive tooltips implemented through mouseover and mouseout event handlers.

Activity 6 Task 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position maps horsepower (x-axis) and torque (y-axis), while its radius and color encode highway MPG and car make respectively. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble size, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, showing the make of each vehicle. Legend circles indicate MPG values, with SVG rendering and CSS-based hover opacity transitions.

Activity 6 Question 3

This scatter plot visualizes the relationship between Physics and History scores for individual students, with each circle's color encoding the student's sex (steelblue for male, deeppink for female). The data is loaded from a remote CSV file using the D3.js v7 library and rendered as SVG elements. The code uses `d3.csv` to fetch and parse the data, `d3.scaleLinear` for both axes, and `d3.scaleOrdinal` for the categorical color mapping, with axes generated via `d3.axisBottom` and `d3.axisLeft`.

Activity 6 Task 3.2

This scatter plot visualizes the iris dataset, showing sepal length against petal length for three flower species, with each species represented by a distinct D3 symbol shape. The visualization is built using D3 v7, employing scaleLinear for axis scales, scaleOrdinal with symbolsFill for shape encoding, and a custom shape legend component. The plot loads data from a CSV file, converts numeric string fields to numbers, and renders the chart across the full browser viewport with labeled axes for sepal and petal length.

Activity 6 Task 3.1

Activity 6 Question 2

This stacked bar chart shows yearly sales totals for grocery, appliance, and toy categories across 2018–2020. Each bar segment represents one product category, with a legend identifying colors and a hover tooltip displaying the exact sales value. The visualization uses D3 v7’s `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to generate SVG elements from the provided CSV data. Interactive features rely on D3’s `.on('mouseover')` and `.on('mouseout')` event handlers, while axis labels and tooltips are styled using inline CSS.

Activity 6 Task 2

This chart displays the distribution of IMDb ratings across six movie genres, using horizontal stacked bars to show the proportion of films falling into five rating brackets from "below 5.0" to "above 8.5." The underlying data is a CSV file with genre rows and rating-category columns, rendered as SVG. The code uses D3 v7 APIs including `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft`, along with custom tooltips on mouseover.

Activity 6 Question 1.2

This example displays a horizontal bar chart of the 2010 population for 20 countries, sorted by country name. The bars use a light green fill, with blue tick marks on the x-axis and gray labels for countries. It is built with React and D3 v5, using `csv` for data loading, `scaleBand` and `scaleLinear` for scales, and SVG `rect` elements for the bars. The chart includes interactive tooltips showing the population value in billions, and axis labels for "POPULATION-2010" and "COUNTRY".

Activity 6 Question 1.2

This example displays the text “Hello VizHub!” in large centered type using D3.js version 6. It demonstrates a minimal D3 setup with a simple selector-based DOM manipulation through the `select` function, which sets the text content of a `#message` div. The code imports a string from a local ES6 module and applies basic styling from a separate CSS file. The visualization is static, with no interactive elements or data-driven rendering beyond the initial text assignment.

Activity 6 Question 1.1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. The visualization is built with React and D3 v5, where `d3.scaleBand` positions the categorical y-axis and `d3.scaleLinear` maps population values to bar widths. Data is loaded as a CSV via `d3.csv` from a GitHub repository, and SVG rectangles render the marks, with hover tooltips showing formatted population values using `d3.format`. Axis ticks and labels are generated by custom React components.

Activity 6_Task 1

Fork of Fork of Five Buddhas

Five Buddha silhouettes overlap in a single SVG view, each path drawn in translucent red, blue, and green tones against a fixed floral background photograph. The React app maps over a numeric array to render circles with randomized positions and RGB fill values, while static Buddha path data is transformed and scaled via SVG `<g>` elements. The visualization combines svg path rendering with React’s declarative component structure, using inline styles and raw path strings for the geometric figures.

Fork of Five Buddhas

Five Buddhas overlap in a dense, colorful SVG composition, each rendered as a polygon mesh built from a three-level nested `Array.map` over a static numeric array. The code randomly generates vertex positions, fill colors, and rotation transforms for every polygon, producing a chaotic, abstract mandala-like pattern. Built with React (version 16.10) and ReactDOM, the visualization renders directly as SVG elements in the browser. A single Buddha path from an external source is also embedded and scaled within the design.