S

saimanvith22@gmail.com

@saimanvith22·23 public vizzes

Loading thumbnail…

Activity7_Task1

This example shows a pie chart of penguin species counts, with each slice labeled by species name and count, and a title reading “Dolphin Species.” The chart is rendered as an SVG using D3 v6, loading data from a remote CSV file. The code uses `d3.csv`, `d3.rollups` to aggregate counts, `d3.pie` and `d3.arc` for the layout and slice geometry, and `d3.scaleOrdinal` for slice colors. Labels are positioned with `arc.centroid`, and the chart is centered within a 500×500 SVG.

Loading thumbnail…

Fork of Activity7_Task2

This area chart visualizes population values across a small set of years, with the data sorted by year to create a continuous filled shape. The visualization uses D3 v7 to render an SVG, employing linear scales for both axes, `d3.area()` to generate the filled path, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The chart is drawn with a steelblue fill, black stroke, and labeled axes for Year and Population, based on hardcoded sample data.

Loading thumbnail…

Fork of Task 7

This pie chart shows the distribution of penguin species from a CSV dataset, displaying each species with its corresponding count labeled directly on the slices. The visualization uses D3 v6’s `pie()` and `arc()` generators to compute slice angles and paths, with `scaleOrdinal()` assigning categorical colors. Data is loaded asynchronously via `csv()` from a GitHub URL, and `d3.rollups()` counts occurrences per species before the SVG group is translated to center the chart. Slice labels combine species name and count, positioned using `arcGenerator.centroid()`.

Loading thumbnail…

Fork of Activity7_Task1

This D3.js (v6) SVG pie chart visualizes species distribution from a CSV file fetched from a GitHub repository. The pie chart displays each species as a colored slice with a text label at its centroid, using a custom ordinal color scale. A legend is also rendered, mapping species names to their corresponding colors. The chart is constructed using `d3.csv`, `d3.scaleOrdinal`, `d3.pie`, and `d3.arc`, with slices and legend elements appended via `d3.select` and the `.join` operator for data-driven rendering.

Loading thumbnail…

Activity7_Tutorial

This interactive D3.js scatter plot visualizes the Iris dataset, cycling through different combinations of sepal and petal measurements on the x-axis via a timer. A reusable scatter plot module (with configurable scales, axes, and margins) renders the data as colored circles, with species indicated by color. The animation updates the x-axis to show petal_width, sepal_width, petal_length, and sepal_length in sequence, dynamically re-drawing axes and labels. The plot is rendered as SVG, with a legend and title, using data from a remote CSV file.

Loading thumbnail…

Fork of Activity6_Question4

This bubble chart displays the correlation between population, urban population, and median age for several countries across different years, with bubble size encoding median age and color distinguishing the year. A tooltip appears on mouseover, showing country, year, population, and urban population. The visualization is built with D3 v7, using `d3.csv` for data loading, `d3.scaleLinear` for axes and bubble sizing, and `d3.scaleOrdinal` with `d3.schemeCategory10` for year colors, all rendered as SVG circles with interactive event handlers.

Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius and color represent highway MPG and manufacturer, respectively. Rendered as an SVG with D3 v7, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` to map data. Interactive tooltips appear on hover, and a legend explains the bubble sizing. Data is loaded from a local CSV file.

Loading thumbnail…

Activity4_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway fuel efficiency across car makes, with horsepower on the x-axis, torque on the y-axis, and bubble size encoding MPG. Each bubble is colored by make using a d3.scaleOrdinal with interpolateTurbo, and hovering reveals a tooltip with the car make. The visualization includes a legend for bubble size and uses d3.csv, d3.axisBottom, and d3.axisLeft to render the SVG with animation.

Loading thumbnail…

Fork of Activity6_Question3final

This scatter plot visualizes the Palmer Penguins dataset, mapping bill length on the x-axis against flipper length on the y-axis. Each point is colored by penguin species using a d3.scaleOrdinal with skyblue, lightgreen, and orange. The code loads data via d3.csv, parses numeric columns, and renders SVG circles with d3.scaleLinear extents, axisBottom, and axisLeft. Axis labels are added as SVG text with rotation, and the chart resizes to the window dimensions via margin calculations.

Loading thumbnail…

Fork of Task3Quesyfy

This example displays car prices against model year as a blue-circle scatter plot. It uses D3 version 6 APIs including `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`. The visualization loads data from a remote CSV file containing penguin records, though the title indicates car prices, and renders an SVG output that fills the browser window. The code calculates the axis ranges dynamically from the dataset’s minimum and maximum values.

Loading thumbnail…

Fork of Activity6_Question3

This example displays a scatter plot of car prices against model year, using blue circles positioned on an SVG canvas. It loads car price data from a GitHub-hosted CSV file and parses the price field as a number. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data to x and y coordinates with labeled axes. The plot fills the entire browser window, with the title styled in red italics.

Loading thumbnail…

Activity6_Tutorial3.2

This example demonstrates a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It visualizes the three iris species using distinct shapes via a categorical scale and includes a custom shape legend. The visualization loads CSV data from a GitHub repository, uses d3.csvParse to parse it, and builds the chart with d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom. Axes and legend are modularized into reusable ES6 modules.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and sepal length along the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). The SVG chart uses D3 v6 scaling via `scaleLinear`, `extent` for domains, and `axisLeft`/`axisBottom` for labeled axes. Circle marks are generated with `selectAll` and `join`, and colors are assigned using a switch-based marker function. Data is loaded as CSV from a GitHub repository, with the page sized to the full window.

Loading thumbnail…

Activity6_Question_2

This stacked bar chart shows the distribution of book ratings across six genres, with each bar representing the percentage of ratings falling into five categories from “Below 5.0” to “Above 8.5.” The visualization uses d3.stack() to create the stacked segments, d3.scaleOrdinal for color encoding, and d3.scaleBand for the genre axis. Hovering over any segment displays a tooltip with the exact percentage for that rating category. The chart is rendered as an SVG using D3 v7, with data loaded from a CSV file.

Loading thumbnail…

Fork of Activity6_Question2.1

This stacked horizontal bar chart visualizes IMDb movie rating distributions across four genres—Fiction, Non-Fiction, Sci-Fi, and Biography—using percentage bands from below 5.0 to above 8.5. The d3.v7 code loads CSV data via d3.csv, applies d3.stack and d3.scaleOrdinal for color mapping, and renders SVG rectangles with d3.axisBottom and d3.scaleBand. Interactive mouseover events trigger tooltips displaying exact percentages, while D3 formatting (d3.format) handles numeric precision.

Loading thumbnail…

Fork of Activity-6 Question2

This stacked bar chart shows how movie ratings vary across genres, with each bar divided into rating categories and the total always equaling 100%. Hovering over a bar segment reveals a tooltip with the exact percentage for that rating within the selected genre. The visualization uses D3 v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to generate SVG rects, with `d3.axisBottom` and `d3.axisLeft` for axes. A custom tooltip displays precise values, while the color palette distinguishes rating levels.

Loading thumbnail…

Activity6_Task2

This example visualizes IMDb movie ratings by genre using a stacked horizontal bar chart. Six genres are compared across five rating categories (below 5.0 through above 8.5), with each bar segment representing the percentage of films in that rating range. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` for data stacking, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and `d3.scaleOrdinal()` for color encoding. Interactive tooltips display exact percentages on mouseover events, while the data comes from a CSV file loaded directly in the code.

Loading thumbnail…

Fork of Activity6_Question2

This bar chart visualizes the population of 20 countries for the year 2020. It uses D3.js version 5 within a React framework to render SVG elements for the axes and bars. The chart retrieves its data from a CSV file and uses `d3.scaleBand` and `d3.scaleLinear` to map country names and population values to the visual space. Bars include tooltips showing the population with a `d3.format` wrapper.

Loading thumbnail…

Fork of Activity6_Question1

This chart displays the populations of ten countries in 2020 as horizontal bars, ranked along a categorical y-axis. Population values are encoded as bar lengths. The visualization uses React for rendering and D3 version 5 modules including `scaleBand`, `scaleLinear`, `format`, and `csv` for data loading. The data comes from a CSV file hosted on GitHub, with values multiplied by 1000. The SVG is built from custom React components for axes and marks.

Loading thumbnail…

Activity6_Task1

This bar chart displays the 2020 population of 30 countries, with countries listed on the vertical axis and population values represented by horizontal bar lengths. The visualization is built using React with D3 v5 for data loading and scales, rendering to SVG. The code uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` for abbreviating population labels (e.g., converting billions to "B"). Data comes from a remote CSV file via `d3.csv`, with population values multiplied by 1000 during parsing.

Loading thumbnail…

5 buddhas polygon

A grid of small, randomly colored, diamond-shaped polygons is overlaid with a large, green-bordered Buddha silhouette rendered as an SVG path. The polygons are generated through nested array maps, with positions, fill colors, and rotations determined by `Math.random()`. The visualization uses React to manage the SVG output, combining generative randomness with a fixed religious icon for a chaotic yet structured composition.

Loading thumbnail…

6 Buddhas with image background

Six overlapping Buddha silhouettes, each rendered as an SVG path, are stacked and scaled against a photographic background of green flowers. The paths are drawn with thick strokes and subtle color variations, creating a layered, translucent composition. The visualization is built with React and ReactDOM, using a static array of path data to define the Buddha shapes. The SVG is displayed over a CSS background image, with the body styled in black.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes in red, orange, green, blue, and purple float over a dark floral background. Each figure is drawn as a single complex SVG path, scaled and translated to create a layered, translucent composition. The React app maps over an array of five elements to render the paths, with the SVG output driven entirely by static path data.