keerthana11.mcs@gmail.com

Activity7_Q2

This visualization displays the distribution of BMI values across age groups from a diabetes dataset, distinguishing between normal and high BMI categories. The interactive chart uses D3.js to render a blue gradient area plot with smooth Catmull-Rom curves, complemented by gridlines and labeled axes. As users move their cursor across the chart, a dashed hover line, circular marker, and tooltip dynamically appear to reveal the exact age, BMI value, and category of the nearest data point. The data is loaded remotely via d3.csv and processed with d3.bisector for efficient mouse position lookups.

Nov 6, 2024

Activity7_Q1

A pie chart visualizes the distribution of car classes from a CSV dataset, showing the proportions of categories like 'unacc', 'acc', 'vgood', and 'good' as colored slices with percentage labels. The chart uses D3.js (version 7.8.5) with the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute and render the pie geometry and colors. A legend on the right lists each class with its count. The SVG is built programmatically, with data loaded asynchronously from a GitHub-hosted CSV file.

Nov 6, 2024

Activity6_Q4

This bubble chart, titled "Correlation Between Movie Rating Ranges by Genre," visualizes the relationship between the percentage of ratings in the 5.0–6.5 range and the 7.5–8.5 range across six movie genres, with bubble size encoding the 6.5–7.5 rating proportion and color distinguishing genres. It uses d3.v7 to append SVG circles, scaleLinear for axes and sizing, and scaleOrdinal for color mapping. Interactive tooltips appear on mouseover, while the data is embedded directly from a CSV file.

Activity6_Task4

A bubble chart shows how average horsepower, torque, and highway MPG correlate for 31 car brands, with each circle’s x-position mapping to horsepower, y-position to torque, and radius to highway MPG. Color encodes the car make, and a tooltip displays the brand on hover. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and SVG circles with mouse-event handlers for interaction. Data is loaded via `d3.csv` from a local file.

Activity6_Q3

This example visualizes the performance of car brands by means of an SVG scatter plot and a Canvas-based bar chart. The scatter plot, created with D3 v7, maps each vehicle’s horsepower to its highway MPG and colors points by category (Economy, Standard, Luxury, Sports). The bar chart, rendered via Chart.js, aggregates average horsepower per make using a horizontal bar layout with a custom legend derived from CSV data. Axes are generated using `axisLeft` and `axisBottom` utilities.

Activity6_Task3.2

This example presents a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, while using different marker shapes to distinguish the three flower species. The visualization imports D3 v7 modules such as `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to build the chart and axes. It also includes a custom shape legend rendered via `symbolGenerator`. Data is loaded asynchronously from a CSV file using `csvParse`, with numeric fields parsed before the plot is updated.

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species (setosa, versicolor, or virginica) using a custom color function. The visualization uses D3 v6 APIs including `csv` for loading remote data, `scaleLinear` for axis scaling, and `axisLeft`/`axisBottom` for rendering axes with custom tick styling. The SVG rendering is generated through D3's selection and join operations, with axis labels styled in green Times font.

Activity6_Q2.1

This example displays a horizontal stacked bar chart comparing car performance metrics—horsepower, torque, and highway MPG—across various makes. Chart.js renders the data, with each bar segment colored red, green, or yellow accordingly, and the chart is sorted by total performance. The data is loaded from `bubblechart.csv` using PapaParse, and the code groups entries by make, calculating average values for each metric before visualization.

Activity6_Task2

This stacked horizontal bar chart visualizes IMDb rating distributions across six movie genres, using five rating bands from "below 5.0" to "above 8.5." Each bar segment’s length encodes the percentage of films in that genre falling within each rating range. The visualization uses d3.stack for the stacked data, d3.scaleOrdinal for categorical color mapping, and d3.scaleLinear for the x-axis. Hovering over a segment triggers a tooltip showing the precise percentage. Data comes from the included `data.csv` file, and the chart is rendered as SVG within a 960x500 pixel canvas.

Activity 6_Q1.2

This bar chart displays the population of 20 countries in 2010, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population data is loaded via `d3.csv` from a GitHub-hosted CSV and rendered as SVG rectangles. Axis components and marks are built as separate ES6 modules, with tick labels formatted using `d3.format`.

Activity 6_Q1.1

This horizontal bar chart displays the population of the top 10 countries in the year 2000, ordered alphabetically by country name. The visualization uses React and D3 v5, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a remote CSV file via `d3.csv`, and bars are rendered as SVG rectangles with tooltips showing formatted population values using `d3.format`.

Activity 6_Task 1

This bar chart ranks 30 countries by their 2020 population, using a horizontal layout with the country names on the y-axis and population values on the x-axis. The SVG is rendered with React, using D3’s `scaleBand` and `scaleLinear` for axes, and `format` for tick labels that abbreviate large numbers (e.g., “1.2B”). Data is loaded from a remote CSV via `d3.csv`, and each bar’s tooltip displays the exact abbreviated population value. The axes and marks are built with custom ES6 modules for bottom ticks and left labels, with the chart styled by CSS classes.