G

group118sai@gmail.com

@SwamiPrakash771·21 public vizzes

Loading thumbnail…

Activity7_question2

This area chart visualizes the number of Netflix Movies and TV Shows released per year, using two semi-transparent filled paths to compare the growth of each content type over time. The visualization loads a CSV dataset from a GitHub gist, filters entries by type, and aggregates counts per release year using `d3.rollups`. Built with D3 v7, it renders SVG elements with `d3.area` generators, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and includes axes, labels, and a legend.

Loading thumbnail…

Activity7_Question1

This example visualizes the distribution of Netflix titles by type, showing the count and percentage of movies versus TV shows in a pie chart. The chart renders as an SVG with colored slices, percentage labels positioned at each arc’s centroid, and a legend beside the chart. Using D3 v6, the code loads data from a CSV file via `d3.csv`, aggregates counts with `d3.rollups`, and generates arcs with `d3.pie` and `d3.arc`. Color is assigned using `d3.scaleOrdinal` with `d3.schemeCategory10`.

Loading thumbnail…

Activity 7

This animated scatter plot cycles through four Iris flower measurements, displaying petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Each species—setosa, versicolor, and virginica—is color-coded with a legend. Built with React and D3, it uses `d3.csv` to load the Iris dataset, `scaleLinear` for axes, and a custom `scatterPlot` function. A `setInterval` updates the x-value mapping every few seconds, re-rendering circles and axes while appending static labels and a title via SVG.

Loading thumbnail…

Activity6_Question4

This bubble chart displays each company's revenue against its number of employees, with bubble size encoding growth rate and color mapping to individual firms. The visualization uses D3.js v7 scales and axes to plot the CSV data, along with interactive hover tooltips. Data points from companies like Apple and Amazon are plotted and distinguished by a custom color legend, offering a quick comparison of market performance and workforce scale across major corporations.

Loading thumbnail…

Activity6_ Question4

A bubble chart visualizes the relationship between revenue, employee count, and growth for ten major tech companies. Each circle's x-position maps to revenue, y-position to employee count, and radius to growth percentage, with color distinguishing individual companies through a custom `colorMap`. The visualization uses D3 v7 with SVG rendering, implementing `scaleLinear` axes and `scaleSqrt` for bubble sizing, alongside `d3.axisBottom` and `d3.axisLeft` for axis generation. A legend, positioned separately, maps company names to their respective colors using D3's selection and data join methods. Data originates from an embedded array within the HTML file.

Loading thumbnail…

Activity6_ Question4

A bubble chart visualizes sales and profit by country, with bubble size encoding market share and color distinguishing each region. The SVG renders circles positioned by linear scales for the x and y axes, while a sqrt scale maps market share to radius. Data loads from a CSV file via `d3.csv`, with D3 v7 handling scales, axes, and the `d3.schemeCategory10` color scale. Labels display country names at each bubble's center, with axis titles for sales and profit.

Loading thumbnail…

Activity6_Question4

This bubble chart visualizes regional product sales against profit, with each bubble’s size, x-position, and y-position mapping to sales volume and profit respectively. The visualization uses D3.js v7’s `scaleSqrt` for bubble radius, `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for color coding. The chart renders as an SVG element, loading data from a local `data.csv` file. Labels identify each region, while axis formatting appends “Sales” and “Profit” to tick values, and the `axisBottom` and `axisLeft` APIs generate the chart’s axes.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes, using data from `bubblechart.csv`. The chart encodes horsepower on the x-axis, torque on the y-axis, and highway MPG as both bubble size and color, with a legend and interactive tooltips. Built with React and D3 v7, it uses `d3.scaleLinear` for axes and bubble scaling, `d3.scaleOrdinal` for color assignment, and SVG animation for hover effects. The visualization is rendered via `d3.select` and `.join` operations, with tooltips appearing on mouseover.

Loading thumbnail…

Activity6_Task4

This example demonstrates a minimal HTML page that renders the text “Hello HTML!” centered on a blank canvas. The page uses plain CSS to set the font size and alignment of the message, while basic JavaScript is not employed, relying solely on static markup. The code defines a single styled `div` element, showcasing how CSS can control typography and layout in a bare-bones HTML document without external libraries or frameworks. It serves as a simple starter template for web development.

Loading thumbnail…

Activity6_Question3

This example shows quarterly sales trends for five product categories (Electronics, Furniture, Clothing, Toys, Books) as a scatter plot with color-coded circles. The visualization uses d3.csv to load data from data.csv, then applies d3.scalePoint for the quarter axis and d3.scaleLinear for sales values, with d3.scaleOrdinal and d3.schemeCategory10 for color mapping. Circles are appended for each category per quarter, while axis labels and a legend are generated using d3.axisBottom, d3.axisLeft, and d3.select. The SVG rendering uses D3 v7 within a React project, producing a static chart with a white background and black-stroked data points.

Loading thumbnail…

Activity6_Question2

A stacked bar chart displays quarterly revenue across five product categories—Electronics, Furniture, Clothing, Toys, and Books—from Q1 2022 through Q2 2024. The chart uses D3 v7 to load CSV data, stack values with `d3.stack`, and render series as SVG rectangles with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Color encoding uses `d3.schemeTableau10`, and each segment is labeled with its value. A separate SVG legend lists the five categories.

Loading thumbnail…

Activity6_Task3_2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length, with points colored by species according to a shape legend. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` and `symbolsFill` for categorical shape encoding, and `axisLeft`/`axisBottom` for labeled axes. The plot dynamically updates its size to fit the viewport, fetching data from a raw GitHub CSV file hosted by the author.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with each point colored by species (setosa, versicolor, or virginica) using D3 v6. The visualization loads CSV data from a GitHub repository, employing `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axis scales. Circles are drawn via SVG selections, with fill colors determined by a switch statement on species, and the code also assigns `rx` and `ry` values from sepal measurements. The chart fills the browser window, with styled axis labels for petal and sepal lengths.

Loading thumbnail…

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres, using stacked horizontal bars to show the percentage of movies in five rating bins from "below 5.0" to "above 8.5." The chart employs D3 v7’s `d3.stack`, `d3.scaleOrdinal` with a categorical color palette, and `d3.scaleBand` for the genre axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating segment. Data is loaded from a local CSV file and rendered as SVG.

Loading thumbnail…

Activity6_Que1_2

This example presents a horizontal bar chart comparing the 2010 populations of twenty countries, rendered as SVG within a React application. The data is loaded from a CSV file using `d3.csv`, with bars drawn as `rect` elements whose widths are scaled by `d3.scaleLinear`. Axes are generated with `d3.scaleBand` and custom components, while tick labels use `d3.format` to abbreviate large numbers. Hovering over a bar reveals the precise population value via a native SVG `<title>` tooltip.

Loading thumbnail…

Activity6_Que1_1

This visualization displays the top 10 countries by population in the year 2000 as a horizontal bar chart rendered with SVG. React manages the component state while D3 v5 handles data loading via `d3.csv` and scales including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values are formatted using `d3.format` with a custom tick formatter that converts gigabytes to billions. Bars are generated as SVG `rect` elements with tooltips showing formatted values, and the chart includes labeled axes with gridlines and a custom Poppins font.

Loading thumbnail…

Activity6_Que1_1

This chart, built with React and D3 v5, displays a horizontal bar chart ranking the 2020 populations of 30 countries. The bars are rendered as SVG rectangles, with a linear scale for the population axis and a band scale for the categorical country axis. D3’s `scaleLinear`, `scaleBand`, and `format` APIs handle scaling and tick label formatting, converting values like 1.5G to 1.5B. The data is loaded from a remote CSV file and sliced to the top 30 rows.

Loading thumbnail…

Activity6_Task1

A horizontal bar chart visualizes the 2020 population for 30 countries, ranked from largest to smallest. The chart uses D3 v5 scales and SVG rendering within a React framework, with bars colored light green. Data is loaded from a remote CSV file. The chart displays population values using a linear scale, with axis ticks formatted to show values in billions. Tooltips reveal exact population figures.

Loading thumbnail…

6 Buddhas

Six Buddhas overlap in orange and blue tones atop a floral background image, each figure composed of looping SVG paths that create the appearance of multiple translucent silhouettes. The visualization uses React 16 to render 1,000 randomly positioned circles alongside six Buddha path drawings, with each path defined as a single `d` attribute string containing cubic Bézier coordinates. The rendering approach layers React's JSX markup with SVG elements, utilizing `Math.random()` to generate circle positions, radii, and RGB color values. The overlapping composition suggests spiritual multiplicity through both the repeated Buddha forms and the abundance of small decorative particles.

Loading thumbnail…

Fork of 6 Buddhas

A dense field of colorful, semi-transparent triangles animates across a black canvas as they rotate and shift position. The composition forms an abstract, textured visual pattern with a large, ornate Buddha silhouette rendered in paths overlaid on top. Built with React and ReactDOM, the visualization generates random triangle coordinates and colors using JavaScript’s `Math.random()` within a nested loop structure, while a detailed SVG path defines the central Buddha figure. The SVG is rendered directly through React’s `svg` element with `<polygon>` and `<path>` components.

Loading thumbnail…

5 Buddhas

A dense constellation of overlapping diamond-shaped polygons fills a black canvas, rendered in vivid, randomly generated RGB colors. Built with React and SVG, the visualization uses nested array mappings to generate each polygon’s points, fill, and rotation, with random values driving the chaotic layout. The piece is anchored by an intricate Buddha silhouette path, layered among the abstract geometric forms.