yashwanthkirla95@gmail.com

question 1

task9&10

task4.9

This bubble chart visualizes smartphone specifications, plotting storage capacity on the x-axis against RAM on the y-axis. Each data point represents a brand, with circle size reflecting battery capacity in milliamp-hours. The SVG rendering uses D3 v7 scales (`d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and a categorical color scale (`d3.scaleOrdinal`) to distinguish brands. A legend communicates battery size mapping, while hover effects increase bubble opacity. Data comes from an embedded CSV-style array of 16 phone models.

task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across vehicle makes. Each circle represents a car brand, with position on the axes showing horsepower and torque, while radius and color encode highway MPG and make identity. The visualization includes interactive tooltips, a legend for MPG bubble sizes, and a color legend for makes. It uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scaling, and SVG elements with mouse event handlers for tooltip display.

qu3.6

This scatter plot displays the relationship between age and income across a dataset, with each point colored by gender using a categorical color scale. The visualization loads CSV data from a GitHub repository and uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, `scaleOrdinal`, and `schemeCategory10` to map values to positions and colors. The SVG rendering fills the browser window, with axes labeled and styled via D3 selections.

q3.6

This scatter plot visualizes the Iris dataset, mapping petal dimensions for the x- and y-axes, with circles colored by species (setosa, versicolor, virginica) via a color marker function. The D3 v6 code loads CSV data from a GitHub gist using `d3.csv`, scales the numeric petal and sepal variables with `scaleLinear`, and renders the marks as SVG circles. Axes are drawn with `axisLeft` and `axisBottom`, and point size is fixed at a radius of 5 pixels. Sepal lengths and widths are implicitly stored in each datum but not plotted directly.

task3.2

task3.1

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with circles colored by species (setosa, versicolor, and virginica). The visualization also encodes sepal length and width as circle attributes, though these are set as `rx` and `ry`, which do not affect standard SVG circle rendering. The code loads data from a GitHub-hosted CSV using `d3.csv`, applies `d3.scaleLinear` for axes, and renders the plot with SVG circles, `d3.axisLeft`, and `d3.axisBottom`. Axis labels are added as text elements in green.

task2

This example presents a stacked horizontal bar chart titled "Most viewed sports," visualizing the percentage distribution of ratings across six sports (Football, Basketball, Cricket, Tennis, Golf, Athletics) using five rating categories from a CSV file. The chart uses `d3.scaleOrdinal` for color mapping and `d3.scaleBand` for the category axis, with `d3.stack` to aggregate the percentage data. Interactive tooltips display exact percentage values on mouseover, and the SVG rendering employs `d3.axisBottom` for the x-axis and custom styling from CSS.

task1

Task 1

dvtask1

buddha five

This visualization, rendered with React and SVG, displays a grid of overlapping diamond-like polygons arranged in a 21×21 matrix. Each polygon is randomly colored using RGB values with high intensities and rotated 45 degrees, creating a dense, vibrant pattern that evokes a sense of chaotic color noise. The piece is titled “buddha five” and is built from nested array maps, producing a kaleidoscopic, generative composition reminiscent of a Buddhist mandala, with an underlying sacred-geometry motif overlaid on a black background.