akhillenkalapally1999@gmail.com

Question 1 - Pie Chart

This pie chart displays the distribution of users across Android, iOS, and BlackBerry OS, with each slice labeled by its percentage share. The visualization uses D3 v6’s `pie`, `arc`, and `scaleOrdinal` APIs to generate the chart, while `csv` loads and aggregates the underlying data from a remote gist. Rendered as SVG, it also includes a legend and title, with slice labels positioned via `arcPath.centroid` and formatted using `d3.format`.

Apr 13, 2024

Fork Question4-Bubble chart

This bubble chart visualizes the correlation between GDP per capita, life expectancy, and population-area ratio for 20 countries. Each circle represents a country, with its x-axis position reflecting GDP per capita, y-axis position reflecting life expectancy, and bubble size proportional to population density. The chart uses D3.js v7 with the `scaleLinear` API for axis and bubble scaling, and the `scaleOrdinal` API for color assignment. Interactive tooltips display precise country data on hover, while an SVG-based legend identifies each nation’s color.

Fork Tutorial 4-Bubble chart

This bubble chart shows the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size and color) across 31 car makes. Each bubble represents a make, colored via a d3.scaleOrdinal with an interpolateTurbo palette derived from the dataset. The chart includes axes with labels, a legend for bubble size (Highway MPG) and color, and a hover tooltip displaying the make name. It is rendered as SVG using d3.csv for data loading, with animations on mouseover and mouseleave.

Fork Activity6_ Question-3.2-Scatter plot with shape

This scatter plot visualizes the relationship between matches played and total runs for Test cricket players, with each point shaped according to the player's country. The D3 v6 code loads a CSV dataset, maps quantitative values to x and y axes, and uses a sequential color scale with symbols like circles and squares. The chart is rendered as an SVG using d3.scaleLinear, d3.extent, and d3.symbol, with axes generated via d3.axisBottom and d3.axisLeft.

Fork Activity6_Question-3.1-Scatter Plot

This scatter plot visualizes Test Cricket Records, showing the relationship between matches played and runs scored for individual players. Each circle represents a player, colored by their country using a categorical color scale. The visualization uses D3.js v6 with SVG rendering, employing d3.scaleLinear for both axes, d3.extent to compute domains, and d3.axisBottom/axisLeft for tick marks. Data is loaded asynchronously from a CSV file via d3.csv, with dimensions calculated from the browser window size.

Fork Activity6_ Tutorial 3.2-Scatter Plot With Shape

This scatter plot visualizes the Iris dataset, showing sepal length against petal length for three species. Each species is represented by a distinct symbol shape, with a legend mapping species to shapes. The visualization uses d3.scaleLinear to map data values to coordinates, d3.scaleOrdinal with symbolsFill for shape encoding, and custom axes and legend components. Data is loaded via fetch and parsed using d3.csvParse, then rendered with d3-selection and d3-symbol APIs.

Fork Activity6_Tutorial-3.1-Scatter Plot

This example displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis while color-coding each point by species (setosa, versicolor, or virginica). The visualization uses D3.js v6 to load the data from a CSV file via `d3.csv`, then renders circles in an SVG container. Scales created with `scaleLinear` and `extent` position the marks, while `axisLeft` and `axisBottom` generate the axes. The plot fills the browser window, with axis labels styled in green.

Fork Activity6_Question2

This stacked bar chart visualizes the distribution of IMDb ratings across six categories, illustrating how category influences ratings. Each horizontal bar segments proportions of ratings into five bands, from “below 5.0” to “above 8.5,” with segment lengths scaled by the percentage of ratings in each band. Hovering over a segment highlights it and displays a tooltip showing the exact percentage for that rating band within the category. The chart uses D3.js v7 with the `d3.stack` API to construct the stacked bars, `d3.scaleOrdinal` for color coding, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft`/`d3.axisBottom` for axes, all rendered as an SVG from the provided CSV data.

Fork Activity 6_Tutorial-2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar divided into five rating brackets from below 5.0 to above 8.5. Hovering over a segment reveals a tooltip with the exact percentage for that rating level within the selected genre. Built with d3.v7, the visualization uses d3.stack for horizontal stacking, d3.scaleOrdinal for color encoding, and d3.select to handle mouse events. The data is loaded from a local CSV file.

Fork Activity 6_Question1.2

This example shows a horizontal bar chart of 2010 population data for the world’s most populous countries, sorted by country name. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names and population values to pixel coordinates. Data is loaded asynchronously via `csv` from a GitHub-hosted CSV file, and each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Fork Activity 6_Question1.1

This chart displays the populations of ten countries in the year 2000 as horizontal bars. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and renders SVG rectangles. The dataset is loaded via D3’s `csv` function from a GitHub repository, with axis ticks and tooltips formatted using `format('.2s')`.

Fork of Activity 7

This chart shows the top 30 most populous countries in 2020 using horizontal bars, with the bar length encoding each country’s population in billions. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for the axes and rendering marks as SVG `<rect>` elements. Data is loaded from a remote CSV file via D3’s `csv` module. The y-axis labels are positioned inside the left margin, and the x-axis uses a SI formatter to convert values like 1.4G into 1.4B for readability.

Fork of 6 Buddha

A fork of six Buddha images renders as a dense, overlapping pattern within a 1000 by 1000 SVG canvas. The code uses React to map over an array, generating numerous semi-transparent rectangles with random positions and RGB colors via `Math.random()`. A single large Buddha path is then scaled and translated, layered over the colorful grid to create a psychedelic, collaged composition on a flower-patterned background.

Fork of converting 2buddha's to 5buddha's - overlapping Buddha

This example renders a dense field of overlapping diamond polygons, layered with random rotations, positions, and vivid RGB coloring. It visualizes a generative, abstract composition built from repeated diamond shapes whose coordinates, sizes, and hues are derived from JavaScript’s `Math.random()`. The SVG output is constructed through nested React `map` operations within a React component, while the page also displays a large Buddha path rendered as an SVG `<path>` element. The visualization demonstrates the contrast between procedural geometric generation and a fixed, detailed vector illustration.

Fork of converting 2buddha's to 5buddha's - overlapping Buddha

converting 2buddha's to 5buddha's - overlapping Buddha

The visualization presents a chaotic overlay of hundreds of randomly generated, semi-transparent polygons, rendered atop a single, intricate Buddha silhouette path. The polygons are computed via triple-nested loops over an array, using `Math.random()` to determine their position, color, and rotation, resulting in a dense, abstract mass. The Buddha path is hardcoded in SVG and scaled and translated into the center, creating a stark contrast between the organic, hand-drawn curve and the algorithmic noise. The React application uses the `react` and `react-dom` libraries to construct the SVG canvas, which is displayed on a green background.

2colors in buddha-overlapping buddha

This example renders an overlapping Buddha silhouette in two colors against a black background. The visualization combines a static SVG path of the Buddha outline with hundreds of semi-transparent circles, each positioned and colored randomly via nested `map` calls. The circles use `Math.random()` for coordinates and RGB fill values, creating a scattered, colorful overlay. Built with React and rendered as SVG, the piece relies on the `react` and `react-dom` libraries to compose the scene.