sumanthpenna0221@gmail.com

activity 7 Q1

This visualization uses a D3.js v6 pie chart to display the population distribution across continents. The chart shows proportional slices for each continent, colored with a categorical color scheme and labeled directly on the chart. A legend identifies each continent. The code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG paths and text labels. The data is loaded from a remote CSV file hosted on GitHub, and the chart is styled with a clean, white background and subtle shadows.

Activity 7 Q2

This visualization displays monthly average temperature data as an area chart, with a semi-transparent steelblue fill and red circular markers highlighting each month’s value at the top of the area. The chart uses an ordinal x-axis for months and a linear y-axis for temperature, rendered in SVG. The code loads data from a remote CSV file via `d3.csv`, then builds the area using `d3.area()` with `d3.scaleBand` for positioning and `d3.scaleLinear` for the y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Fork of Pie Chart

This fork of a pie chart visualizes population distribution by continent using a categorical color scale and labeled slices. The D3.js code loads CSV data from a GitHub gist, applies `d3.pie` to compute arc angles, and renders the result as SVG paths with `d3.arc`. Text labels are positioned at each slice’s centroid using `arc.centroid`. The chart is centered within a fixed 500×500 SVG canvas, with white stroke separators between slices and a clean, bordered container styled by CSS.

activity6_Task4 Question 4

This bubble chart displays smartphone specifications, plotting screen size on the x-axis against camera resolution on the y-axis, with bubble radius scaled by price and color encoding phone brand. The chart uses D3.js v6 with SVG rendering, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.schemeSet3` for brand colors, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. Data comes from the local `smartphones.csv` file, loaded via `d3.csv`.

activity 6 task 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle represents a make, positioned by horsepower on the x-axis and torque on the y-axis, with bubble size encoding highway MPG and color distinguishing car brands via `d3.scaleOrdinal`. Hovering reveals a tooltip with the make name. The visualization uses SVG rendering with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` for scales, plus a custom legend for size and color. Data comes from the bundled `bubblechart.csv` file.

Activity 6_question 3_task 1

A scatter plot visualizes wine quality against free and total sulfur dioxide levels, encoding quality ratings through a custom color palette and D3 symbol shapes. The SVG chart uses d3.csv to load WineQT.csv data, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for scales. Points are rendered as paths via d3.symbol(), with a legend matching quality values to colors and shapes. Grey serves as a fallback color for missing quality ratings.

activity 6 q 3

activty 6 task 3.2

This interactive scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length, with different species (setosa, versicolor, virginica) distinguished by distinct symbol shapes. It uses a D3 v7 data join pattern to render SVG mark paths, with scales generated by d3.scaleLinear and d3.scaleOrdinal. The chart includes axes with labels, a legend mapping species to symbolsFill shapes, and loads data asynchronously via CSV parsing from a remote GitHub repository.

activity 6 task 3.2

activity 6

activity 6_task 3

A scatter plot of the Iris dataset displays petal length and width, colored by species using skyblue, lightgreen, and orange markers. The D3 visualization loads data via `d3.csv`, maps values with `scaleLinear` and `extent`, and renders circles with `d3.select` and `.join`. Axis titles are added via `axisLeft` and `axisBottom`, with rotated text labels. The chart uses window dimensions, and the code imports D3 v6 from UNPKG, demonstrating local ES6 module usage.

activity 6 task 2 Q1

Assignment 2 2q

This stacked bar chart displays the estimated 2010 religious breakdown of the world’s 20 most populous countries, based on Pew Research data. Hovering over a bar reveals a tooltip with the specific religion, country, and population count, while hovering over the legend highlights individual religions by dimming other layers. The visualization uses D3.js version 3.5.5 with d3.layout.stack for stacking, d3.legend for the interactive color legend, and d3-tip for tooltips, rendered as an SVG with animated transitions.

Activity-6 Question-2

activity 6_task 2

This example visualizes the distribution of IMDb movie ratings across five genres as a stacked horizontal bar chart. It shows the percentage of movies within each rating bucket. The chart uses D3.js v7 to load CSV data, map it, and apply a stacked layout. It includes interactive tooltips and uses SVG rendering. The colors are assigned via a scaleOrdinal color scheme, and the axes are styled with a custom font.

Activity 6_Task Q1

This visualization shows a horizontal bar chart of the top 30 countries by population in the year 2000. The chart uses D3 v5 scales (scaleBand for the y-axis and scaleLinear for the x-axis) within a React framework, rendering bars as SVG rectangles. Population values are formatted using D3's format function, converting large numbers to abbreviated labels with 'B' for billions. The data is loaded from a CSV file using D3's csv function and styled with green bars, blue tick lines, and labeled axes.

Activity6_TaskQ2

A bar chart displays the top 30 countries by population in 2010, using a horizontal layout with countries on the y-axis and population values on the x-axis. The chart renders as SVG within a React application, using D3’s `scaleBand` and `scaleLinear` to position bars and axes. Population values are parsed from a CSV file and formatted with D3’s `format` function, converting values from millions to billions with a custom tick label. The visualization includes styled axes, a chart title, and tooltips that show the precise population value for each bar when hovered.

Fork of Activity 6_Task 1 Question 1.1

activity 6_Task 1

This example displays a horizontal bar chart of population data for 30 countries in 2020, with country names on the y-axis and population on the x-axis. The visualization uses React to render SVG elements, with D3 v5 providing the `scaleBand`, `scaleLinear`, `max`, and `format` functions for scaling axes and formatting tick labels. Data is loaded from a CSV file using D3's `csv` function and parsed into numeric population values. Blue tick lines, gray text, and green bars style the chart, with hover tooltips showing formatted population values.

activity 6_Task 1

This bar chart visualizes the 2020 population estimates for 30 countries, sorted by country name along the vertical axis. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, with SVG rectangles rendered via the `Marks` component. Horizontal axis labels apply D3’s `format` with a custom `.2s` tick formatter to abbreviate large numbers (e.g., “B” for billions). Data is loaded asynchronously from a CSV via `d3.csv` and multiplied by 1000 for actual population values.

activity 7

This example shows the top 30 most populous countries in 2020 as a horizontal bar chart, with each bar’s length encoding population and a native SVG `<title>` element providing hover tooltips. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format('.2s')` to abbreviate tick labels (e.g., “1.2B”). The data is loaded asynchronously from a CSV file using D3’s `csv` function, and axes are rendered as custom SVG components.

question 3

A React and SVG visualization renders overlapping Buddha silhouettes generated from a path dataset, with each copy randomly positioned, scaled, and colored using RGB values from Math.random(). The code builds an SVG canvas of 1000x1000 pixels, maps over a 30-element array to create nested repetitions, and applies opacity for blending. The composition sits atop a floral background image, using React's component structure and SVG path elements to produce a layered, abstract collage effect.

Fork of 6 Buddha sumanth

A colorful array of small shapes is rendered over a floral background image, with each element using random positions and semi-transparent fills. A single detailed Buddha silhouette path is overlaid on top, scaled and translated into view. The visualization uses React to render SVG elements, mapping nested arrays to generate multiple copies of the same shape with randomized `x` and `y` coordinates and RGB color values. The background image is set via CSS, while the Buddha path is drawn using SVG `<path>` data.

Fork of buddha sumanth

This example renders six identical Buddha images in a vertical stack, each horizontally flipped to create a mirrored reflection effect against a floral background. The page loads a single remote image URL and uses plain JavaScript DOM manipulation to create the repeated elements, with CSS flexbox controlling the layout and the `transform: scaleX(-1)` property performing the mirroring. All styling, including the background image and container spacing, is defined in an external stylesheet, while the script runs on the `DOMContentLoaded` event to populate the container.

budha

Six nearly identical Buddha images are arranged in a vertical column, each one a direct reflection of the next. A JavaScript `DOMContentLoaded` event handler programmatically creates six `div` elements with the class `reflection`, appending an `img` element with `src` set to `buddha.jpg` to each. The page uses plain HTML, CSS, and vanilla JavaScript to repeat the same image six times without any data-driven logic or external visualization libraries.

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Six overlapping Buddha images appear in a row, each horizontally flipped and displayed inside a 150-pixel square on a green background with a floral photo backdrop. The example uses React’s `DOMContentLoaded` event to create six `div` elements with class `reflection`, appending an empty `<img>` tag to each. Styling via CSS applies `transform: scaleX(-1)` for the mirror effect and `background-image` for the flower texture. The image source is empty, so the Buddhas remain blank placeholders.

6 BUDDHA

A generative Buddha portrait combines a sparse scattering of small SVG circles with a single intricate SVG path traced as a face silhouette. The circles are placed at random coordinates derived from an array and rendered with random RGB colors and opacity, creating a textured halo. Built with React, the visualization uses JSX to map nested arrays into `<HEXAGON>` elements, while the path string defines the Buddha’s outline. The result overlays a precise geometric line drawing with chaotic, colorful points, all within an SVG canvas sized at 960 by 1000 pixels.

5 BUDDHA

This example uses React to render a series of repeated Buddha images in a simple HTML layout, creating a mirrored or cascading visual effect. The code imports a single image file, `buddha.jpg`, six times within a dedicated `<div>`, with styling controlled by an external `styles.css`. The visualization demonstrates basic image repetition and placement within a React component, relying on standard HTML `<img>` tags and CSS for presentation rather than a data-driven or interactive approach.