gouthamigongidi2457@gmail.com

activity 6_Task 1

This chart displays the 2020 population estimates for 30 countries as a horizontal bar chart, sorted with the largest populations at the top. Each bar’s length encodes the population value, with a tooltip showing the formatted number on hover. The visualization uses React with D3’s `scaleBand` and `scaleLinear` to map data to SVG rectangles, while `AxisBottom` and `AxisLeft` render axes with custom tick formatting that converts billions and millions into readable labels. Population data is loaded asynchronously via `d3.csv`.

Nov 15, 2024

Activity 7-QUE2

This chart displays global temperature anomalies from 1880 to 2023 as an area plot, with a blue-to-green gradient fill beneath the line. It shows yearly temperature deviation in degrees Celsius from a baseline, with labeled axes and a title. The visualization uses D3.js v7, loading CSV data via `d3.csv` and rendering shapes as SVG paths with a linear gradient defined through `linearGradient`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

activity7_QUE1

This interactive pie chart visualizes tourism revenue distribution by country, with each slice labeled with its corresponding value in billions of dollars and a color-coded legend. The chart is built using D3.js v7 with SVG rendering, employing the `d3.pie` layout, `d3.arc` for path generation, and `d3.scaleOrdinal(d3.schemeCategory10)` for categorical colors. Data is loaded as CSV from a GitHub Gist and aggregated using `d3.rollup` and `d3.sum`. Text labels are positioned using `arc.centroid` with an offset factor.

Fork of Vinila_7.1.QUESTION-1

This example presents a pie chart visualizing the number of vehicles seized across American states. Using D3.js v5, the chart displays proportional slices for each state, with labels and a legend showing state names and seizure counts. The code loads data from a remote CSV file and employs D3 APIs such as `pie`, `arc`, `scaleOrdinal`, and `svg` selections to render the visualization, with a legend generated using custom SVG elements.

activity7.1-q1

This interactive scatter plot, built with D3.js, visualizes the Iris flower dataset, mapping petal and sepal measurements. The visualization cycles through different measurement combinations on the x-axis at timed intervals, with each species (Setosa, Versicolor, and Virginica) represented by a distinct color. The code uses D3's `select`, `csv`, and `scaleOrdinal` APIs to load data, render SVG circles, and generate a legend. A static pie chart displaying elephant species populations is also included in the `scatterPlot.js` module, using `pie` and `arc` for its layout.

activity7_tutorial

This animated scatter plot cycles through different Iris flower measurements, displaying petal width and sepal length on the axes while each species is colored distinctly. The visualization uses D3.js (v6) to load CSV data from a GitHub gist, render SVG circles and axes, and update the plot at intervals via `setInterval`. The code demonstrates a reusable `scatterPlot()` function with configurable scales and margins, alongside custom legend elements and axis labels.

activity 6_Q1.2

This example displays a horizontal bar chart ranking the populations of 20 countries in 2010, using a linear scale for population values and a band scale for country names. The visualization is built with React and D3 v5, leveraging `scaleBand`, `scaleLinear`, `max`, and `format` for axes and tick labels. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles with tooltips showing formatted population values.

Oct 25, 2024

activity 6_Q1.1

A horizontal bar chart displays the populations of ten countries in the year 2000, using D3 v5 scales and React components. The chart reads CSV data from a Gist URL, formats axis tick labels with D3's `format` function, and renders SVG rectangles for each bar with tooltips. The axes use `scaleBand` and `scaleLinear`, while the y-axis labels are positioned via the `scaleBand` bandwidth property.

Oct 25, 2024

Activity6_Que4

A bubble chart from a CSV dataset shows the correlation between average horsepower, torque, and highway MPG for electric vehicles. Each circle's position encodes horsepower on the x-axis and torque on the y-axis, while its radius scales with highway MPG and color distinguishes vehicle make. Interactive tooltips display the make on hover. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and event handlers, rendering in SVG. A legend encodes bubble size and color.

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble’s position mapping horsepower on the x-axis and torque on the y-axis, while radius encodes MPG and color distinguishes manufacturers. The visualization includes an interactive tooltip that displays the car make on hover, plus legends for both bubble size and color categories. The chart is rendered as SVG using D3 v7, employing `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color assignment, and event handlers for tooltip display. Data comes from a CSV file with aggregated averages per make.

Activity6_Q3

This scatter plot visualizes the relationship between square footage and price for real estate properties across various European cities, with each point colored by city and a tooltip revealing detailed property information. Built with D3.js v7, it renders as an SVG using `d3.scaleLinear` for the axes, `d3.scaleOrdinal` with `d3.schemeSet2` for color encoding, and interactive mouseover events to show tooltips. The visualization also includes a legend listing all cities, with data loaded from the local `data.csv` file.

Activity6_task 3 .2

This example displays a scatter plot of Iris flower measurements, showing sepal length against petal length for three species. The visualization uses distinct symbols for each species, with a shape legend positioned in the upper right corner to identify the categories. Built with D3 v7, the code imports specific modules such as `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` for scaling and symbol generation. The plot loads data from a CSV file hosted on GitHub, parsing it with `csvParse` and converting numeric fields before rendering. Axes and labels are created using reusable axis functions.

Activity6_Task2 que 2

This stacked bar chart shows the genre distribution of famous Indian singers, with each bar representing an artist and segments showing proportions of Bollywood, Classical, Pop, Folk, Sufi, EDM, and Rap. The chart uses d3.stack() to create the stacked segments, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.scaleOrdinal for color encoding. Hovering over a segment reveals the exact percentage for that genre, as demonstrated by Arijit Singh's Bollywood dominance or Badshah's Rap and EDM focus. The data comes from data.csv, rendered as SVG with interactive tooltips.

Activity6_Task3

This scatter plot visualizes the Iris dataset, displaying petal length against petal width for individual flowers. The visualization, built with D3 v6 and rendered as an SVG, uses colored circles to distinguish between the three Iris species: setosa, versicolor, and virginica. The code loads data from a CSV file and applies the `d3.scaleLinear` API for both the x and y axes, with `d3.axisLeft` and `d3.axisBottom` for the chart’s labeled axes.

Activity6_Task2 que2

This stacked bar chart visualizes the impact of movie genres on IMDb ratings, showing the proportional distribution of five rating levels within each genre. The horizontal bars, rendered as SVG rectangles, display percentages that sum to 100% per genre. Hovering over any segment reveals a tooltip with the exact percentage for that rating level. The visualization uses D3 v7’s `d3.stack()` for data stacking, `d3.scaleBand()` for genre positioning, and `d3.scaleOrdinal()` with a custom color palette. Mouse events (`mouseover`, `mousemove`, `mouseout`) trigger the interactive tooltip, while axes are generated with `d3.axisLeft()` and `d3.axisBottom()`.

ACTIVITY 5 QUESTION 3

A Buddha statue silhouette is formed by a dense scattering of semi-transparent colored rectangles, stacked and overlapped across an SVG canvas atop a floral background image. The brushstroke-like texture emerges from nested array maps that generate hundreds of random positions, sizes, and RGB colors, while a fixed vector path defines the figure. Rendering leverages React 16 with SVG elements, using pure JavaScript math for stochastic variation.

Oct 18, 2024

Activity6_Task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar segment representing the proportion of movies falling into five rating brackets from "below 5.0" to "above 8.5". Hovering over a segment displays a tooltip with the exact percentage. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked bars, `d3.scaleOrdinal()` for color encoding, and `d3.axisBottom()`/`d3.axisLeft()` for axes, rendering as SVG with data from a CSV file.

Oct 17, 2024