kowshiksamudrala08@gmail.com

Task9-Question 1

This example shows a pie chart of product categories with quantities, rendered as an SVG within a D3.js visualization. It uses a tabular dataset in text format, parsed via `d3.csvParse` and grouped by product category. The chart is generated with `d3.pie()`, `d3.arc()`, and a color scale from `d3.scaleOrdinal()`. A legend is built with D3 selection operations, and hover tooltips are added using SVG `title` elements.

Apr 26, 2024

Task 9 Tutorial

This interactive scatter plot visualizes the Iris flower dataset, cycling through different combinations of sepal and petal measurements on the x-axis every few seconds. Using D3 v6, the code loads CSV data from a GitHub gist and renders animated SVG circles colored by species. A custom `scatterPlot` ES6 module handles scales and axes, while `setInterval` triggers updates to the x-value mapping, creating a looping multi-view exploration.

Apr 26, 2024

Airplane Crash Project 3 - Aviation Accidents For the top 5 Aircraft Types

This visualization presents a multi-chart analysis of aviation accidents, featuring a bar chart of the top 5 aircraft types, a line chart of accidents over time, and a pie chart of the top 5 locations. The code uses D3 v7 APIs such as `d3.rollup`, `d3.scaleBand`, `d3.scaleTime`, and `d3.pie` to process and render the data from a CSV file. Interactive tooltips appear on hover, and the charts employ SVG rendering with color-coded legends.

Airplane Crash Project 2 - Top 5 Geographical Distribution of Aviation Accidents

This example presents three complementary charts analyzing aviation accidents from a historical dataset. A line chart displays the total number of accidents per year, a pie chart highlights the top five geographical locations by accident count, and a bar chart ranks the top five aircraft types. All charts use D3 v7 with SVG rendering and include interactive tooltips on hover. The visualizations are generated from a CSV file hosted on GitHub, with data aggregated using `d3.rollup`, scales created with `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleBand`, and the pie chart built using `d3.pie` and `d3.arc`.

Airplane Crash Project 2

This visualization presents the distribution of aviation accidents using three charts: a line chart showing accidents over the years, a pie chart highlighting the top five accident locations, and a bar chart displaying the top five aircraft types. It loads data from a CSV file via d3.csv and uses d3.rollup to aggregate accidents by year, location, and aircraft type. The line and bar charts employ d3.scaleTime, d3.scaleBand, and d3.scaleLinear, while the pie chart uses d3.pie and d3.arc. Interactive tooltips appear on hover, and SVG elements render the charts with d3.axis for ticks.

Airplane Crash Project - Aviation Accidents Over the Years

This visualization presents multiple perspectives on aviation accidents using historical crash data from 1908 to 2023. A line chart with circle markers displays accident counts per year, while a pie chart highlights the top five geographic locations and a bar chart shows the five most common aircraft types. Built with D3 v7, the example uses d3.rollup for data aggregation, d3.scaleTime and d3.scaleBand for positioning, and d3.pie with d3.arc for the pie slices. Interactive tooltips appear on hover for each chart type.

Activity6_Task2

This example visualizes IMDb movie ratings across six genres, displaying the percentage distribution of ratings in five categories using a stacked horizontal bar chart. The chart uses D3 v7 with SVG rendering, employing `d3.stack()` to compute stacked series, `d3.scaleBand()` for genre positioning on the y-axis, and `d3.scaleLinear()` for percentage values. Interactive tooltips appear on mouseover, showing the exact percentage for each rating category. Data comes from a local CSV file loaded with `d3.csv`.

World Population Dynamics

This visualization displays stacked bar charts comparing population projections for the top five countries in 2023, 2030, and 2050. The chart uses D3.js v7 to load CSV data, sort by population, and generate a stacked layout with color-coded segments per year. Hovering a bar turns it red, while clicking shows the exact population value via an alert. The SVG rendering includes axes for country names and population counts, with data sourced from a GitHub-hosted CSV file.

Final Project Bar Chart

This bar chart displays Data Science Salaries from 2020 to 2024, sourced from a CSV file in a GitHub repository. The visualization uses D3 v5 to render an SVG with a blue bar for each year's average salary. It includes an interactive tooltip that appears on mouseover, showing the specific year and salary value. The chart features rotated x-axis labels and styled axes, with the bars animated via D3's transition methods for the tooltip opacity.

Final Project Pie Chart

This pie chart visualizes average annual salaries for data science roles from 2020 to 2024, using a dataset loaded from a GitHub-hosted CSV file. The chart displays each year as a colored slice with labels showing the year and computed average, alongside a legend identifying the year for each segment. The visualization is built with D3 v5, using `d3.pie`, `d3.arc`, `d3.rollup` for data aggregation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The SVG rendering positions slices via arc centroids, with a legend positioned to the right of the chart.

Fork of Activity6_Question4

This bubble chart visualizes the correlation between avocado attributes, plotting Total Volume against Total Bags while using bubble size for Average Price and color for avocado type. Built with D3 v7, it loads data from a CSV file and renders an SVG with interactive tooltips. The chart includes a legend for bubble size and type colors, using d3.scaleLinear and d3.scaleOrdinal for encoding. Hovering over a bubble reveals detailed attribute values via a custom tooltip.

Fork of Activity6_Question4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle's position encodes horsepower and torque, while its radius represents highway MPG, and color distinguishes the manufacturer. The visualization includes interactive tooltips that display the car make on hover. Built with D3 v7, the code uses `d3.csv` for data loading, `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and SVG for rendering with mouse event handlers.

Activity6_Task4

This visualization displays the correlation between average horsepower, torque, and highway MPG across 31 car makes using a bubble chart. Each circle’s position represents horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG and color distinguishes the manufacturer. The chart includes an interactive tooltip that reveals the car make on hover, implemented with D3 v7 event handlers. A legend shows both the MPG size scale and color-coded makes. Data is loaded from a local CSV file and rendered as SVG with a linear color scale using `d3.interpolateTurbo`.

Fork of Activity6_Question 3

This scatter plot visualizes the relationship between alcohol content and density for different wine types, with a shape-based legend distinguishing categories. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, and `symbolsFill` from the d3 module, along with custom ES6 modules for axes and legend rendering. Data is fetched from a GitHub-hosted CSV file and parsed with `csvParse`. The visualization updates responsively to window size and demonstrates a declarative SVG-building pipeline using `select` and `join` operations.

Activity6_Task3-2

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with species encoded by different symbol shapes. The visualization loads the data from a remote CSV file using `d3.csvParse` and renders it using D3 v7. It employs `scaleLinear` for axes, `scaleOrdinal` for shape mapping, and `axisLeft`/`axisBottom` for tick marks. A custom shape legend, built with `d3.symbol`, displays the species labels.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses D3 v6 with `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data from a GitHub-hosted CSV and render SVG circles. Axis labels for petal length and sepal length are added with lower-case text, using a green font.

Fork of Activity6_Question 2

This stacked bar chart visualizes the distribution of performance ratings across six academic subjects, using data from a CSV file. Each bar is segmented into five percentage ranges, from below 60% to above 90%, with colors mapping to each category. Built with D3 v7, the visualization uses `d3.stack()` to create the stacked series, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and an SVG renderer. Interactive tooltips display exact percentage values on mouseover, while a legend identifies the rating categories.

Fork of Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, showing the percentage of titles falling into five rating brackets from “below 5.0” to “above 8.5.” The data is loaded from a CSV file and rendered as horizontal bars using D3.js v7’s `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` APIs. Each genre row is segmented by rating category, with interactive tooltips displaying exact percentages on mouseover. The SVG output includes labeled axes and a color legend, processed entirely through D3’s data-join pattern.

Fork of Fork of activity 6_ Q1.2

This example displays a horizontal bar chart of population data for 20 countries, with each bar’s length proportional to the 2010 population value. The visualization uses D3’s `scaleBand` and `scaleLinear` for axis scaling, with formatted tick labels. Built with React and rendered as SVG, it loads data from a remote CSV via D3’s `csv` utility. Interactivity is basic, with tooltips showing the population value on hovering over a bar.

Fork of activity 6_ Q1.1

This example displays a horizontal bar chart of population data for ten countries in the year 2000. A React functional component renders SVG elements, using D3’s `scaleBand` and `scaleLinear` to position the bars and axes. The chart loads CSV data via `d3.csv` from a GitHub repository, formats the tick labels with `d3.format`, and includes tooltips on each bar using SVG `<title>` elements. Axis components are built as separate ES6 modules for bottom and left orientations.

Fork of activity 6_ Q1.1

This bar chart displays the populations of 30 countries in 2020, ordered along a vertical band scale. Each bar’s length encodes population via a linear scale, with axis ticks formatted in billions and a labeled horizontal axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` from D3 for scales and `csv` to load data from a GitHub-hosted CSV. SVG rendering is handled through React components, with tooltips provided by native `<title>` elements.

activity 6_Task 1

This bar chart displays the top 30 countries by 2020 population, using horizontal bars to compare values against a linear scale. The visualization sorts countries vertically with a band scale, formats tick labels using D3’s `format` function to abbreviate numbers, and renders axes and marks as SVG elements within a React component. Data loads asynchronously via `d3.csv` from a remote GitHub repository, with tooltips showing formatted population values on hover.

Buddhaaa1

The piece presents an abstract, data-driven portrait of the Buddha, constructed from thousands of overlapping, semi-transparent polygons that form a swirling mass of color atop a traditional SVG path outline of the figure. Built with React and rendered via SVG elements, the work uses nested `A.map` iterations to generate polygons with randomized coordinates, fill colors from an `rgb` function, and rotation transforms, creating a chaotic yet intentional visual texture. The underlying path data for the Buddha’s silhouette is hardcoded in the source, while the generative layer adds a dynamic, almost psychedelic quality to the otherwise static form.

Mar 24, 2024