Bharath Vupputuri

Activity 7.1 Question 2

This area chart displays the batting average of Indian cricketer MS Dhoni in One Day Internationals from 2010 to 2019. The chart uses a steel-blue filled area to show the trend over time, with the year on the x-axis and the average on the y-axis. The code builds the visualization using the D3.js library (v7), specifically employing `scaleTime`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft` to construct the scales, area path, and axes. Data is loaded from a CSV file hosted on GitHub, and the chart is rendered as an SVG.

Activity 7.1 Question 1

This visualization displays cricket bat sales by company as a pie chart, with each brand's sales value labeled on its corresponding slice. The chart is built using D3.js v5, fetching data from a GitHub-hosted CSV file and rendering with SVG. It employs d3.pie for slice generation, d3.arc for segment paths, and d3.scaleOrdinal for category colors, alongside a custom legend showing brand names and sales figures in thousands.

Activity 6 Question 4

This bubble chart visualizes airline ticket sales data from a CSV, plotting the number of routes on the x-axis against average ticket price on the y-axis. Each circle’s area encodes passenger volume, while color distinguishes airlines, with a legend and interactive tooltips showing exact values. The visualization uses D3 v7’s `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` APIs to map data dimensions to visual encodings, rendered as SVG circles. Animated tooltips appear on hover, and the chart includes labeled axes and a title, all built with D3’s selection and layout methods.

Activity 6 Tutorial 4

This interactive bubble chart, built with D3.js v7, visualizes the relationship between average horsepower, torque, and highway MPG across various car makes, such as BMW, Ferrari, and Toyota. Each bubble’s position is determined by the horsepower and torque scales, while its size encodes highway MPG and its color distinguishes the manufacturer. The visualization includes a tooltip that displays the car make on hover, along with legends for bubble size and color. The SVG-based chart uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for rendering and coloration.

Activity 6 Question 3

This scatter plot displays the relationship between PM2.5 air quality levels and the number of health complaints across eight dates in March 2023. Each point’s shape and color encode a severity level: circles represent level 1 (green), triangles level 2 (orange), and squares level 3 (red). The visualization uses D3 v6 with an SVG renderer, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.symbol` with a `shapeMap` to generate distinct point glyphs. The data is hardcoded in the script as a constant array.

Activity 6 Tutorial 3.2

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length for three species of iris flowers. Each flower is represented by a distinct geometric shape (circle, square, or triangle) based on its species, with a shape legend in the upper right corner for reference. The visualization is built using D3.js v7 with a modular approach, leveraging `d3.scaleLinear` for the axes, `d3.scaleOrdinal` with `symbolsFill` for shape encoding, and custom modules for axis rendering and legend construction. The data is loaded from a remote CSV file and parsed using `d3.csvParse`.

Activity 6 Tutorial 3

This scatter plot visualizes the Iris dataset, mapping petal length and width while coloring each point by species (setosa, versicolor, or virginica). The D3 v6 code loads CSV data from a GitHub repository, uses `scaleLinear` and `extent` for axes, and renders SVG circles with custom `rx` and `ry` attributes. Axis labels highlight the petal and sepal measurements, with the visualization filling the entire browser window.

Activity 6 Tutorial 2

Activity 6_Question 2

This example visualizes the distribution of product sales across five regions as a stacked horizontal bar chart, using data from a CSV file with product rows and regional percentage columns. D3.js v7 with SVG rendering builds the chart, where each bar segment’s length encodes the percentage value per region, and tooltips reveal precise sales figures on hover. The code leverages `d3.csv` for data loading, `d3.stack` for computing the stacked layout, and `d3.scaleOrdinal` to assign colors to regions, with axes and legends generated via D3’s scaling and axis APIs.

Activity 6 Question 1.2

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name. The visualization uses D3 v5 scales and SVG rendering within a React framework to map population values to bar lengths. The code employs `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` to load remote data. Population values are formatted using `siFormatter` to abbreviate large numbers (e.g., converting billions to "B").

Activity 6 Question 1

Activity 6 Tutorial 1