honeyravuri.711@gmail.com

@R-NANDINI·14 public vizzes

activity7_question2

This example shows a stacked area chart of course enrollment by category (Technology, Business, Design) over time, where the colored regions represent the number of students enrolled in each category per year. The chart is rendered as an SVG using D3 v7, with `d3.csv` loading the data from a GitHub gist, `d3.area` generating the stacked paths, and `d3.scaleLinear` mapping the year and enrollment values. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with a legend and axis labels included.

Apr 11, 2025

Loading thumbnail…

Activity-7_Question-2

This chart displays course enrollment trends across different categories over time, with sequential area layers that stack to show the total enrollment distribution. The visualization uses an HTML5 canvas rendered through JavaScript with the D3.js library, where the x-axis represents time and the y-axis encodes enrollment counts. The data is loaded from a CSV file, and the chart applies a categorical color scheme to distinguish each enrollment category. The area chart is constructed using stacked polygon paths, with mouseover tooltips highlighting specific data points for detailed inspection.

Apr 11, 2025

Loading thumbnail…

Activity-7_Question-1

This D3.js pie chart visualizes box office earnings for a dataset of movies, with each slice sized by revenue and labeled with the film’s title and earnings in millions. Hovering over a slice reveals a tooltip with genre, release year, IMDB rating, and franchise details. The visualization uses `d3.pie`, `d3.arc` for slice geometry, and `d3.scaleOrdinal` for color mapping, with custom SVG text labels, connector polylines, and a legend listing each movie’s earnings. Data is loaded asynchronously from a CSV URL via `d3.csv`.

Apr 11, 2025

Loading thumbnail…

Activity-6_Question-4

This bubble chart visualizes the environmental impact of urban parks by plotting park area on the x-axis, annual visitors on the y-axis, and tree density as bubble size, with color encoding city. Each circle represents a park from the loaded CSV data, and hovering reveals the park name and air quality index via a tooltip. Built with D3 v7, the visualization uses d3.scaleLinear for axes and bubble radius, d3.scaleOrdinal with d3.interpolateTurbo for city colors, and includes legends for tree density and city categories.

Apr 6, 2025

Loading thumbnail…

Activity-6_Task-4

This animated D3.js bubble chart explores the correlation between average horsepower, torque, and highway MPG for various car makes, using data from a GitHub-hosted CSV file. SVG circles are positioned by horsepower on the x-axis and torque on the y-axis, with radius encoding highway MPG and color distinguishing makes via a d3.scaleOrdinal with interpolateTurbo. Interactive tooltips appear on mouseover, while custom legends for bubble size and car makes clarify the encodings.

Apr 6, 2025

Loading thumbnail…

Activity-6_Question-3

A scatterplot shows the relationship between fuel efficiency and horsepower for a set of cars, with each point colored by car type. Built with D3 v6, the visualization uses `d3.csv` to load the data, `d3.scaleLinear` for the x- and y-axes, and `d3.scaleOrdinal` with a Tableau and Set3 color scheme to distinguish categories. Hovering reveals a tooltip with the model, type, and values. A legend and axis labels are drawn via SVG, with all marks rendered as `circle` elements.

Apr 6, 2025

Loading thumbnail…

Activity-6_Task-3.2

This scatter plot displays the Iris dataset, plotting sepal length against petal length, with points shaped according to species. The visualization uses a D3 v7 selection-flows API, importing `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to map data values to positions and shapes. A custom legend shows the species-to-shape mapping, and axes are rendered via `axisLeft` and `axisBottom` from the D3 library. The data is fetched from a CSV file hosted on GitHub and parsed with `csvParse`.

Apr 5, 2025

Loading thumbnail…

Activity-6_Task-3.1

This scatter plot visualizes the Iris dataset, showing petal length against petal width with points colored by species (setosa in skyblue, versicolor in lightgreen, and virginica in orange). The visualization uses D3 v6 APIs including `d3.csv` for data loading, `d3.scaleLinear` for the x and y axes, `d3.extent` to compute data domains, and `d3.axisLeft`/`d3.axisBottom` for axis rendering. The SVG is sized to the browser window, with data fetched from a GitHub-hosted CSV file. The code also stores sepal dimensions in each mark, though these are not used in the final rendered circles.

Apr 5, 2025

Loading thumbnail…

Activity-6_Question-2.1

A stacked bar chart visualizes device usage proportions across five age groups, sourced from CSV data. It reveals how smartphone reliance decreases with age while tablet, laptop, and desktop usage generally increases. Built with D3 v7, the chart uses SVG rendering, a linear x-scale for percentages, a band y-scale for age categories, and an ordinal color scale. The stacked layers are created via `d3.stack()`, with tooltips showing exact percentages, and axes are formatted using `d3.axisBottom` and `d3.axisLeft`.

Apr 5, 2025

Loading thumbnail…

Activity-6_Task-2

A stacked horizontal bar chart displays the percentage distribution of IMDb ratings across six movie genres, with each bar segmented into five rating categories from below 5.0 to above 8.5. The visualization uses d3.stack to generate the stacked series and d3.scaleOrdinal for color mapping, rendering SVG rectangles with tooltips that show exact percentages on mouseover. Data comes from a CSV file, and axes are created using d3.axisBottom and d3.axisLeft.

Apr 5, 2025

Loading thumbnail…

Activity-6_Question-1.2

This bar chart displays population figures for 20 countries from a 2010 dataset, ordered along a vertical categorical axis with horizontal bars extending proportionally to population values. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data loads asynchronously from a CSV file via `d3.csv`, with bars drawn using SVG `rect` elements filled in red.

Apr 4, 2025

Loading thumbnail…

Activity-6_Question-1.1

A horizontal bar chart displays the population of the top 10 countries in the year 2000, sorted with the largest population at the top. Each blue bar represents a country’s total population, with the x-axis formatted in billions and the y-axis listing country names. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with a custom tick format. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

Apr 4, 2025

Loading thumbnail…

Activity6_Task-1

This horizontal bar chart displays the population figures for the top 30 countries in 2020, using the d3.scaleBand and d3.scaleLinear APIs to map country names and population values. The graphic presents light green rectangles for each country, with axes labeled "Countries" and "POPULATION-2020," and the population values are formatted in billions or millions using d3.format. The chart is rendered as an SVG using D3 v7, pulling data from a CSV file hosted on GitHub, and the population values are extracted specifically from the '2020' column for each row.

Apr 3, 2025

Loading thumbnail…

Activity6_Task-1

This bar chart displays the population estimates for the top 30 countries in 2020, sorted along a horizontal axis with country names on the vertical axis. The visualization uses D3 v7’s scaleLinear and scaleBand to map population values to bar widths and categories to vertical positions, rendered as SVG rectangles. Data comes from a CSV file loaded via d3.csv, with axis labels formatted using d3.format to abbreviate large numbers like millions and billions.

Apr 3, 2025