Skip to main content
Log in
M

msnikhil2608@gmail.com

@msnikhil2608·13 public vizzes

Loading thumbnail…

Activity 7 _ Q2

This area chart visualizes monthly visitor counts for 2024, using a steel-blue filled path to show trends over time. The D3.js v7 code loads CSV data from a GitHub repository, parses dates with `d3.timeParse`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The area shape is generated with `d3.area`, and the SVG output includes labeled axes for month and visitor numbers.

Apr 10, 2025
Loading thumbnail…

Activity 7_Q1

A pie chart displays the proportional spending across unnamed categories, with each slice color-coded and paired with a legend on the right side. The visualization loads CSV data from a GitHub repository using `d3.csv`, then constructs the chart with `d3.pie()` and `d3.arc()`. Color assignment uses `d3.scaleOrdinal` with the `schemeSet2` range. The SVG is rendered via D3 v7, with slices stroked in white and space reserved for axis labels.

Apr 10, 2025
Loading thumbnail…

Activity 6_ Question 4

This bubble chart shows how students’ algebra and literature scores relate to their daily study hours, with each circle positioned by the two exam scores and sized by study time. Hovering reveals a tooltip with the student’s name and exact values. The visualization uses d3.v7 to load a CSV file, apply linear scales for axes, and a sqrt scale for bubble radius. It renders as an SVG with axis labels and animated tooltip transitions.

Apr 4, 2025
Loading thumbnail…

Activity 6_ Task 4

This bubble chart visualizes the correlation between average torque, average horsepower, and highway MPG across vehicle makes. Each circle represents a car brand, with its x-position mapped to horsepower, y-position mapped to torque, and the circle’s radius encoding highway MPG. A legend shows the mileage scale, while hover tooltips reveal the make. The chart uses D3 v7 with SVG elements, `scaleLinear`, and `scaleOrdinal` for color encoding. Data comes from a CSV file, and the visualization includes animated transitions during tooltip display.

Apr 4, 2025
Loading thumbnail…

Activity 6_Question 3

A scatter plot displays student Physics scores against History scores, with each point colored by the student’s sex (female in pink, male in blue). The visualization uses D3 v7’s scaleLinear for axes, scaleOrdinal for color mapping, and d3.csv to load remote CSV data. Circles are rendered as SVG elements, with axes, a title, and a custom legend added via D3 selections. The chart highlights correlations between the two subjects while comparing distributions by gender.

Apr 3, 2025
Loading thumbnail…

Activity 6_Task 3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length. Each point is colored and shaped by species, with a custom legend explaining the symbols. The visualization uses D3 version 7, employing the `symbol()` API from `d3` to generate distinct mark shapes, `scaleLinear` for axes, and `scaleOrdinal` for the categorical species mapping. Data is loaded from a remote GitHub CSV file and parsed with `csvParse`. The chart is rendered using an SVG canvas.

Apr 3, 2025
Loading thumbnail…

Activity 6_Task 3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width as the primary x and y coordinates while encoding sepal dimensions as data attributes for each point. Circles are colored by iris species—setosa, versicolor, and virginica—using a switch statement. Built with D3 v6, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scales and axes, rendering SVG circles with data joined via `selectAll` and `join`. The CSV data is loaded asynchronously from a GitHub source, with a full-viewport responsive layout.

Apr 3, 2025
Loading thumbnail…

Activity 6_Question 2

This stacked bar chart visualizes sales figures for Grocery, Appliances, and Toys across three years (2018–2020), with each bar segment colored by category. Built with D3.js v7, it uses `d3.stack` to accumulate category values, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rectangles for rendering. Interactive tooltips appear on mouseover, displaying category and exact sales amount. The chart includes axis labels, a legend, and reads data from a local CSV file.

Apr 3, 2025
Loading thumbnail…

Activity 6_Task 2

This stacked horizontal bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of titles falling into one of five rating brackets from “below 5.0” to “above 8.5.” The chart uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` to construct the stacked layout and color encoding, while `d3.scaleLinear()` and `d3.scaleBand()` position the segments and genre categories. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating category. Data comes from a CSV file, rendered as SVG elements within a fixed 960×500 canvas.

Apr 3, 2025
Loading thumbnail…

Activity 6_Task 2

This stacked horizontal bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of titles falling into one of five rating brackets from “below 5.0” to “above 8.5.” The chart uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` to construct the stacked layout and color encoding, while `d3.scaleLinear()` and `d3.scaleBand()` position the segments and genre categories. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating category. Data comes from a CSV file, rendered as SVG elements within a fixed 960×500 canvas.

Apr 3, 2025
Loading thumbnail…

Activity 6_Question 1.2

A horizontal bar chart displays the populations of 20 countries in 2010, with bars sorted by country name along the y-axis and population values on the x-axis. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` to abbreviate tick labels (e.g., showing "1.2B" instead of 1,200,000,000). Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles with hover tooltips.

Apr 3, 2025
Loading thumbnail…

Activity 6_Question 1.1

This horizontal bar chart displays the population of ten countries in the year 2000, with each bar’s length proportional to its population value. The visualization uses a linear x-scale for population and a categorical y-scale for country names, with tooltips revealing the exact formatted population figures. Built with React and D3 v5, the code employs `scaleBand` and `scaleLinear` for scaling, `csv` for data loading from a remote GitHub source, and renders the chart as an SVG. The chart includes labeled axes for population and country, with the y-axis ordered by the country values.

Apr 3, 2025
Loading thumbnail…

Activity 6_Task 1

This bar chart displays the 2020 populations of 30 countries, sorted by country name along the y-axis. The visualization uses green horizontal bars to encode population values, with blue tick marks on the x-axis and a Poppins font for all text. The React application uses d3.scaleBand and d3.scaleLinear for scales, with d3.format for tick labels that convert large numbers into abbreviated forms. Data is loaded from a remote CSV file using d3.csv, and the chart renders as an SVG with interactive tooltips showing population values on hover.

Apr 3, 2025