S

sagipavan2385@gmail.com

@pavansagi2385·20 public vizzes

Loading thumbnail…

Activity7.1_Question2

This visualization displays global CO₂ emissions over time as a green area chart, with the x-axis representing report years and the y-axis showing carbon output. The area chart is rendered using D3.js v7’s `d3.area()` generator, which fills the space between the line and the baseline. Data is loaded asynchronously via `d3.csv()` from a GitHub Gist, then mapped to linear scales (`d3.scaleLinear`) for positioning. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the SVG output is styled with a simple external stylesheet.

Loading thumbnail…

Activity7.1_Question1

This pie chart visualizes population distribution across age groups, with each slice labeled and colored by age range alongside a legend for quick reference. The chart is built using D3 v7, employing the `d3.pie()` and `d3.arc()` generators to compute slice angles and paths. Data is loaded asynchronously from a remote CSV file via `d3.csv`, with values parsed as numbers for aggregation. The SVG rendering includes simulated axis labels for "Age Range" and "Total Count," and colors are assigned using `d3.scaleOrdinal` with the `schemeCategory10` palette.

Loading thumbnail…

Activity7.1_Tutorial

This animated scatter plot cycles through different iris flower measurements from the classic Iris dataset. It displays petal width on the x-axis against sepal length on the y-axis, with points colored by species (setosa, versicolor, virginica). The visualization updates every few seconds, changing which measurement is plotted on the x-axis. Built with D3.js (v6.7.0), it uses the `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a custom `scatterPlot` module. The SVG rendering includes axis labels, a color legend, and a title, with all data loaded from a remote CSV file.

Loading thumbnail…

Activity 6 question 4

A bubble chart displays student performance, mapping math scores on the x-axis and reading scores on the y-axis, while the size of each orange circle encodes weekly study hours. Hovering over a circle reveals a custom HTML tooltip with the student’s name, exact scores, and study time. Built with D3 v7 and rendered as SVG with animations, the chart uses `d3.csv` to load the dataset, `scaleLinear` for axes, `scaleSqrt` for bubble radius, and `d3.axisBottom`/`axisLeft` to generate scales. Data comes from an embedded CSV with ten student records.

Loading thumbnail…

Activity 6 task 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for 31 car makes, with bubble size encoding MPG and color distinguishing manufacturers. A tooltip displays the car make on hover. The visualization uses D3 v7’s `d3.csv`, `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color, and SVG circles with mouse event handlers. It includes a legend with size reference circles for MPG values and a color legend listing makes, rendered as static SVG with animated hover opacity transitions.

Loading thumbnail…

Activity 6 Question 3

This scatter plot visualizes the relationship between Math and English scores for individual students, with points colored by gender (steelblue for males, deeppink for females). It uses the D3.js library (v7) to load a CSV dataset from GitHub, apply linear scales to both axes, and render the chart as SVG. The visualization includes labeled axes, a purple title, and a legend, all positioned using calculated margins. The code leverages `d3.scaleLinear`, `d3.extent`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to construct the plot, with circles appended via `g.selectAll('circle').data(data).join('circle')`.

Loading thumbnail…

Activity 6 Task 3.2

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length for different iris species. The visualization uses D3 v7 to render points with distinct shapes representing species categories, accompanied by axes and a shape legend to differentiate groups. Data is loaded from a remote CSV file via `csvParse`, with numerical parsing applied to measurement columns. The plot uses a linear scale for both axes and an ordinal scale for categorical species encoding, with the shape legend positioned independently of the main plot.

Loading thumbnail…

Activity 6 Task 3.1

This scatter plot visualizes the Iris dataset, showing petal length against petal width. Each circle represents a flower sample, colored by species: skyblue for setosa, lightgreen for versicolor, and orange for virginica. The SVG rendering uses d3.scaleLinear for axes, d3.extent for domain scaling, and d3.axisBottom/axisLeft for tick marks. Data loads via d3.csv from a GitHub repository, while circle elements are bound using d3.selectAll and .join().

Loading thumbnail…

Fork of Activity 6 task 3.1d

This fork of Activity 6 task 3.1d renders a scatter plot of the Iris dataset using D3 v6 with SVG. It plots petal length on the x-axis and petal width on the y-axis, coloring each circle by species (setosa, versicolor, virginica) via a switch statement. The code loads CSV data from a GitHub URL, applies linear scales with d3.scaleLinear, and draws axes with d3.axisLeft and d3.axisBottom. Axis labels display petal length and sepal length, while sepal measurements are also assigned as unused rx/ry attributes on the circles.

Loading thumbnail…

Fork of Activity 6 task 3.1d

This fork of Activity 6 task 3.1d renders a scatter plot of the Iris dataset using D3 v6 with SVG. It plots petal length on the x-axis and petal width on the y-axis, coloring each circle by species (setosa, versicolor, virginica) via a switch statement. The code loads CSV data from a GitHub URL, applies linear scales with d3.scaleLinear, and draws axes with d3.axisLeft and d3.axisBottom. Axis labels display petal length and sepal length, while sepal measurements are also assigned as unused rx/ry attributes on the circles.

Loading thumbnail…

Fork of Activity 6 task 3.1

This interactive scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). The visualization also encodes sepal length and width in the circle radius, though this behavior appears flawed as the code sets both `rx` and `ry` attributes without a clear geometric effect. Built with D3 v6, the example uses `d3.csv` to load remote data, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes, rendering circles in an SVG canvas with a full-window viewport.

Loading thumbnail…

Fork of Activity 6 task 3.1

This interactive scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). The visualization also encodes sepal length and width in the circle radius, though this behavior appears flawed as the code sets both `rx` and `ry` attributes without a clear geometric effect. Built with D3 v6, the example uses `d3.csv` to load remote data, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes, rendering circles in an SVG canvas with a full-window viewport.

Loading thumbnail…

Activity 6 task 3.1

This D3.js scatter plot visualizes the Iris dataset, encoding petal length and petal width along the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using a custom marker function. The chart uses `d3.csv` to load the external iris.csv file, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for ticks. Each circle is rendered via SVG, with sepal measurements additionally stored as data attributes, and the plot adapts to the full browser window.

Loading thumbnail…

Activity 6 Question 2

This stacked bar chart displays sales figures for Smartphones, Laptops, and Tablets across three years, using color-coded segments to show each category’s contribution to total annual sales. Built with D3.js v7 and rendered as SVG, the chart uses stacked rectangles via the `d3.stack()` API, with axes from `d3.axisBottom` and `d3.axisLeft`. Hover interactions reveal a tooltip with category-specific values. Data comes from a local CSV file and is processed through `d3.csv()`.

Loading thumbnail…

Activity6_task 2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, with each bar segmented into five rating ranges from below 5.0 to above 8.5. The chart uses a horizontal layout with percentage scales, enabling quick comparison of rating patterns between genres like Documentary and Action. Built with D3 v7, the visualization employs `d3.stack()` to compute stacked series, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. Interactive tooltips, implemented through mouse events, display exact percentages for each rating segment on hover, with the data sourced from a CSV file.

Loading thumbnail…

Activity 6 Question 1.2

This horizontal bar chart displays the population of twenty countries in 2010, sorted by country name. The visualization uses React with D3.js v5 for scaling and axis generation, rendering SVG elements. Data is loaded from a remote CSV file using D3's `csv` function. The chart employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with formatted tick labels showing values in billions.

Loading thumbnail…

Activity 6 Question 1.1

This visualization displays the populations of ten countries in the year 2000 using a horizontal bar chart. The bars are drawn as SVG rectangles, with each country’s name shown on the y-axis and population values on the x-axis, formatted in billions. The code uses React to manage components, while D3 v5’s `scaleBand` and `scaleLinear` handle the axes and data scaling. The dataset is loaded via the `csv` function from a GitHub-hosted CSV file. Hovering over a bar reveals its exact population through a native SVG `<title>` tooltip.

Loading thumbnail…

Activity6_Task1

This example visualizes the 2020 population estimates for 30 countries using a horizontal bar chart rendered as SVG in React. Population values are shown on the x-axis via a linear scale, with countries listed on the y-axis using a band scale. The code employs D3 v5 functions like `csv`, `scaleLinear`, `scaleBand`, and `max` through `useData` to load and process data from a GitHub CSV file. Axis components and bars are built with custom React components, and hover tooltips display formatted population values using the `format` API.

Loading thumbnail…

6buddhas

Six Buddhas overlap in a colorful, flower-patterned composition rendered as SVG paths. Each Buddha silhouette is drawn using a complex path definition, positioned and scaled through SVG transform groups, and filled with black strokes outlined in white. The code uses React to render the SVG elements within a div, with the background image loaded via CSS. The visualization layers multiple Buddha figures at different scales and offsets, creating a dense, overlapping pattern.

Loading thumbnail…

5 buddhas

Five layered Buddha silhouettes overlap in a grid of thousands of small, randomly rotated polygons on a black background. The work uses nested `Array.map` calls in React to generate SVG `<polygon>` elements, with each point and color derived from `Math.random()`. A fixed SVG path renders the central Buddha figure, while the chaotic geometric field creates a dense, textured effect. The code runs in React 16 with `react-dom` and renders entirely through inline SVG attributes.