Revanth putta

ACT6_TUT1

ACT6_TUT1_TASK1

A horizontal bar chart displays the top-ten most populated countries in 2000, using population data from the Activity6_Population.csv file. React renders the SVG, while D3’s `scaleBand` and `scaleLinear` compute the scales and `format` applies SI abbreviations. The marks are simple `<rect>` elements with D3 axes, and a tooltip shows each bar’s exact value.

ACT6_TUT4_TASK1

This bubble chart displays the relationship between employee count and annual revenue for ten major tech companies, with bubble size and color encoding each company’s innovation score. The visualization uses D3 v7 with SVG rendering, employing scaleLinear for the x and y axes, scaleSqrt for bubble radius, and scaleSequential with the Viridis interpolator for color. Hover interactions trigger a custom tooltip showing company details. Data is loaded asynchronously from a CSV file using d3.csv, with axes generated via d3.axisBottom and d3.axisLeft.

ACT6_TUT4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s x-position represents horsepower, y-position represents torque, and its radius encodes highway MPG, with color distinguishing car brands. Built with D3 v7, the SVG renders animated mouseover tooltips displaying the make. The chart includes axes with labels, a size legend for MPG values, and a color legend, using scales such as `d3.scaleLinear` and `d3.scaleOrdinal` applied to data from `bubblechart.csv`.

ACT6_TUT3_TASK1

This scatterplot explores the relationship between daily study hours and GPA for students across three academic tracks (CS, Data, AI). The visualization uses colored symbols—circles, squares, and triangles—to distinguish tracks, with tooltips revealing individual student details. Built with D3 v7, the chart employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color and shape encoding, and `d3.symbol` to generate the point markers. The data comes from a local CSV file, rendered as SVG with custom axes, title, and a legend.

ACT6_TUT3.2

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each point is rendered as a distinct symbol (circle, square, or triangle) corresponding to the flower species, with a custom legend explaining the shapes. The visualization is built using D3 v7, leveraging modules like `scaleLinear`, `scaleOrdinal`, `symbol`, and `csvParse`. Data is loaded asynchronously from a remote CSV file, and axes and labels are drawn via custom functions.

ACT6_TUT3

This chart displays a scatter plot of the Iris dataset, plotting petal length against petal width for individual flowers. Data points are colored by species: sky blue for setosa, light green for versicolor, and orange for virginica. The visualization is rendered as an SVG using D3 v6, with `scaleLinear` mapping the data to screen coordinates and `axisLeft` and `axisBottom` generating the axes. The code loads the dataset from a CSV URL via `csv()` and displays sepal length and width as attributes on each circle, though the point size remains fixed.

ACTIVITY 6 _ TASK 2.1

This example shows a stacked horizontal bar chart of student performance levels across five subjects, with each bar divided into percentages of Excellent, Good, Average, Below Average, and Poor ratings. The visualization uses d3.stack to compute the stacked series, d3.scaleBand for the subject categories, and d3.scaleLinear with a custom color palette to encode the performance categories. Interactive tooltips appears on hover to display exact percentages, while a legend identifies each performance level. The data comes from a CSV file loaded locally, and the chart is rendered as an SVG with D3 v7.

ACTIVITY2_R

This horizontal stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segmented into five rating categories from “below 5.0” to “above 8.5.” The chart uses d3.stack() to compute the stacked data and d3.scaleBand for the categorical y-axis, while d3.scaleLinear maps the percentage values. D3 v7 appends SVG rectangles for each segment, with mouseover tooltips displaying the exact percentage per rating category. The data comes from a CSV file loaded via d3.csv, and the chart includes custom color scales and axis labels.

ACT7_TUTORIAL

act7_task2

This area chart displays the number of tourists visiting various countries from 2014 to 2020, with each country rendered as a distinct filled area. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleBand` for the x-axis and manual data parsing via `d3.csvParse` on hardcoded CSV strings. The chart encodes time-series data across seven years, with areas filled in semi-transparent steelblue to show trends and magnitude differences between nations.

ACT_TASK1

This pie chart visualizes the distribution of happiness scores across 20 countries, aggregating all remaining nations into an "Others" slice. Built with D3 v6, it uses `d3.pie` and `d3.arc` to generate the segments, `d3.scaleOrdinal` with `schemeCategory10` for coloring, and a custom legend rendering via `d3.select`. The data is loaded through `d3.csv` from a remote Happiness dataset, processed to highlight the top-scoring countries.

ACT7_TASK1

ACT6_TASK4.2

ACT6_TASK4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. The x-axis maps horsepower, the y-axis maps torque, while the size of each bubble encodes highway MPG and the color distinguishes different car manufacturers. A legend showing the MPG scale is on the right, and color-coded dots identify each make. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, and `d3.interpolateTurbo` to assign a color to each make. The SVG render includes an interactive tooltip that appears on mouseover, displaying the car make. Data is loaded from a local CSV file.

ACT6_TASK3.3

ACT6_TASK3.2

ACT6_TASK3

ACT6_TASK2.2

This interactive stacked bar chart visualizes religious demographics across countries, showing population distributions by religion for nations like China, India, and the United States. The D3.js v7 visualization uses d3.stack to process CSV data into hierarchical series, with d3.scaleBand for x-axis positioning, d3.scaleLinear for y-axis scaling, and d3.scaleOrdinal for categorical color encoding. Built with React's useContainerDimensions hook for responsive sizing, the visualization renders SVG elements and supports click interactions that highlight the selected country with a black border stroke.

ACT6_TASK2.2

This stacked bar chart displays the projected 2020 population distribution for ten countries, split into three synthetic demographic groups. Built with React and D3 v5, it uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render SVG rectangles. Data comes from the UN Population 2019 CSV, processed by `d3.csv`. Each bar segment's length reflects a fixed percentage of total population, with colors assigned via `d3.scaleOrdinal`.

ACT6_TASK2

The visualization displays the distribution of IMDb movie ratings across six genres, using horizontally stacked bars to show the proportional share of five rating brackets from "below 5.0" to "above 8.5." Each genre row is segmented with colors mapped via `d3.scaleOrdinal`, and the segment lengths encode the percentage via a `d3.scaleLinear` x-axis. Tooltips, triggered by mouse events, reveal the exact percentage for a hovered segment using d3's selection and formatting APIs. The chart reads from `data.csv` and renders shapes as SVG elements within an HTML page.

ACT6_TASK2

A stacked bar chart displays the distribution of IMDb rating categories across six movie genres, with each bar representing a genre and segments showing the proportion of ratings from "below 5.0" to "above 8.5". The visualization uses d3.stack() to compute layered data and d3.scaleOrdinal for color encoding, rendering SVG rectangles within a band scale for genres. Interactive tooltips, implemented via mouse events and a positioned HTML div, reveal exact percentages per segment on hover, while axes and labels are generated using d3.axisBottom and d3.axisLeft.

ACT6_TUT1_TASK3

This stylized bar chart uses a horizontal layout to compare the 2010 populations of twenty countries, encoding values with bar lengths on a linear scale. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes and positioning, with SVG `<rect>` marks that display a tooltip on hover. The chart applies a clean, minimal aesthetic with a Poppins font, custom tick and axis styling, and a teal fill for bars. Data is loaded from a CSV file hosted on GitHub, and axis labels are formatted to abbreviate large numbers, such as replacing 'G' with 'B'.

activity 6_Task 1

This visualization is a horizontal bar chart that displays the top 10 most populous countries based on 2019 United Nations data, with population values shown on the x-axis and country names on the y-axis. The chart uses React to render SVG elements, with axes generated by the `AxisBottom` and `AxisLeft` components, and data bars drawn by the `Marks` component. The population data is loaded from a CSV using d3's `csv` function, and the scales are created using `scaleBand` and `scaleLinear`.

Fork of 5Buddha_1

This example renders a dense, kaleidoscopic SVG composition of rotated, semi-transparent polygons whose coordinates and fill colors are generated by nested iterations over an array of numbers, using random values to produce chaotic, layered visual noise. A large embedded SVG path, representing the outline of a Buddha figure, is placed over this abstract background. The visualization is built with React and ReactDOM, directly constructing SVG elements like `<polygon>` and `<path>` within a React component, and uses JavaScript’s `Math.random()` for both positioning and color generation, running entirely in the browser.

Fork of Five Buddhas

A single ornate path of the Buddha, defined as an SVG `d` string, repeats across the canvas in overlapping, scale-transformed groupings. Each layered copy uses a distinct solid fill color, creating a dense, kaleidoscopic pattern of interlocking figures. The React component renders these repeated `<path>` elements via JSX within an SVG container, with each group repositioned using translation and scaling transforms to create depth and visual clutter. The background is a fixed, full-screen flower image, against which the vibrantly colored figure stands out.