maneeshraja47@gmail.com

Act_6_Q4

This bubble chart visualizes the relationship between Arable Land per Capita and Food Exports per Capita across over 50 countries, with bubble size encoding population and color distinguishing Developed, Developing, and Least Developed nations. The visualization reveals that highly populated countries like China and India cluster in the bottom-left, showing low values in both metrics, while smaller Developed economies achieve higher export performance. The chart uses d3.scaleLinear for axes, d3.scaleSqrt for bubble radius, and d3.scaleOrdinal with d3.schemeSet1 for color encoding, rendered as SVG circles within a 960x500 canvas. Data is loaded from a CSV file using d3.csv.

Nov 19, 2025

Act_6_Q4

This bubble chart compares global cities by per-capita GDP, average temperature, and population, with bubble size encoding population and color encoding continent. It uses D3 v6 to render an SVG visualization, employing `d3.scaleLinear` for the x/y axes, `d3.scaleSqrt` for bubble radius, and `d3.scaleOrdinal` with a category color scheme. Data is loaded via `d3.csv` from a GitHub Gist, and the chart includes both color and size legends.

Nov 19, 2025

Activity_6_q3

This scatter plot from D3 v6 visualizes movie box office performance, plotting Budget on the X-axis against Box Office revenue on the Y-axis, with points colored by Genre. The chart reveals a strong positive correlation between production cost and revenue, with Action films clustering in the upper right at high budgets and revenues, while Dramas concentrate in the lower-left with lower values. The code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` to map coordinates and colors, while axes and legends are drawn with `d3.axisBottom` and `d3.axisLeft`. Data loads from a CSV file via `d3.csv` and renders as SVG circles.

Nov 19, 2025

Fork of Activity_7_11815718_Q2

This example visualizes daily website traffic for 2025, displaying a time-series area chart with a path that fills the space between the x-axis and the visitor counts. The x-axis is scaled by date, and the y-axis is scaled linearly to the maximum visitor value. Built with D3 v7, the code loads a CSV file from a GitHub gist, parses dates and numeric values, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG output. The chart includes axis labels and monthly tick formatting.

Nov 10, 2025

Activity_7_11815718

This animated scatter plot visualizes the Iris dataset, cycling through different flower measurements every five seconds. Colored circles represent individual flowers, with skyblue for setosa, lightgreen for versicolor, and orange for virginica, alongside a color legend and axis labels. The visualization uses the D3 library’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to load data and render scales and axes within an SVG. A custom `scatterPlot` function manages the plot’s reusable properties, while `setInterval` triggers updates to swap the x-axis variable.

Nov 9, 2025

Activity_7_11815718

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against petal width on the y-axis, with each point colored by species and accompanied by a legend. Built as a reusable D3 module, it uses `d3.csv` for data loading, `scaleLinear` and `scaleOrdinal` for scales, and `axisBottom` and `axisLeft` for axes. The chart renders as an SVG, filling the browser window, and includes a styled title and axis labels.

Nov 5, 2025

Activity6_question4

A bubble chart plots engine displacement against fuel economy for various car models, with the bubble size encoding vehicle weight and the color encoding the number of cylinders via a categorical color scheme. The visualization uses D3 v7 to load CSV data, apply linear scales for the axes and a square-root scale for bubble radii, and render SVG circles. It also includes a legend showing the cylinder count categories.

Activity6_Question4

This scatterplot visualizes movie runtime against rating, with each fixed-radius circle representing a film and colored by simplified genre. The chart includes hover tooltips displaying movie name, primary director, and release year. Data loads from a CSV and is preprocessed using custom genre aggregation, runtime parsing, and numeric conversion logic. The visualization is built with React and D3 v7, using `scaleLinear`, `scaleOrdinal`, `schemeTableau10`, `axisBottom`, and `axisLeft` for axes, scales, and legends.

Activity6_Question4

This interactive bubble chart visualizes the relationship between video game review scores, average hours played, and copies sold. Each circle represents a game, positioned along the x-axis by review score and y-axis by play time, with circle size encoding sales volume. Color distinguishes game genre, and hovering reveals a tooltip with exact details. Built with D3.js, the visualization uses `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` for encoding, while `join('circle')` renders the animated bubbles. Data is loaded from a GitHub Gist CSV file, and the SVG output includes legends for size and genre.

Fork of Week 10: IMDB Top 250 Movies Scatter Plot: Rating vs. Runtime

This scatter plot visualizes the relationship between IMDb ratings and runtimes for the top 250 movies, with each point colored by simplified genre. Hovering a circle reveals a tooltip showing the movie title, director, and release year. Built with React and D3 v7, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal` with `schemeTableau10`, and `d3.axisBottom`/`axisLeft`. Runtime strings are parsed from "2h 22m" format into minutes, while genres are preprocessed into a simplified top-seven category before rendering.

Activity6_task4_question

This bubble chart visualizes movie runtime trends over time for top-rated films from IMDb, with each circle’s radius scaled by rating and color-coded by simplified genre. The D3 v7 visualization uses `scaleLinear` for year, runtime, and radius scales, plus `scaleOrdinal` with `schemeSet2` for genre colors. Data preprocessing splits multi-genre entries into top seven genres via `preprocessGenres`, while `parseRuntime` converts duration strings to minutes. An interactive legend allows highlighting specific genre bubbles through mouseover events and click-based filtering.

Activity6_Question4

This D3.js v7 bubble chart visualizes the relationship between GDP per capita, life expectancy, and population for countries in 2007, with bubbles positioned by GDP (on a log scale) and life expectancy, while bubble size encodes population. The chart uses `d3.scaleLog`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map data attributes, and renders in SVG with hover tooltips built via `d3.select` and the `.join` operator. Data is loaded from a CSV file containing country-level indicators, and the visualization includes legends for bubble size and continent color coding.

Activity6_task4

This visualization uses a bubble chart to show the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower and torque on the x and y axes, while its radius represents highway MPG via a linear scale. Color distinguishes makes using a ordinal scale with interpolated Turbo colors. The chart includes hover tooltips, a legend for MPG values, and static SVG rendering with D3 v7. Data comes from bubblechart.csv.

Activty6_task3_question1

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with different symbol shapes representing each species. The visualization uses D3 v7's scaleLinear, scaleOrdinal, and symbolsFill APIs to map data values to positions and shapes. The code loads CSV data via a fetch request to a GitHub Gist, then parses it with csvParse. Axes are rendered using axisLeft and axisBottom, while a custom legend with shape symbols appears in the upper right corner.

Activty6_task3.2

This scatter plot visualizes the relationship between sepal length and petal length in the Iris dataset, with each point’s symbol shape encoding the flower’s species. A custom legend explains the shape-to-species mapping. The visualization uses d3.scaleLinear for both axes, d3.scaleOrdinal with symbolsFill for shapes, and d3.axisLeft/axisBottom for tick marks. Data is loaded as CSV from GitHub and parsed with d3.csvParse, while updates are managed through a state-based render loop in the viz module.

Activity6_Task3.2

This example visualizes the Iris dataset as a scatter plot, mapping sepal length along the x-axis and petal length along the y-axis. The visualization uses distinct shapes to represent the three species of iris flowers, with a shape legend positioned to the right of the plot. Built with d3.v7, the code leverages d3.csvParse to load data from a GitHub repository, d3.scaleLinear for axis scaling, and d3.scaleOrdinal with d3.symbolsFill to assign different symbol types to each species. The SVG rendering includes custom axis labels and a shape legend created through d3 selection joins.

Activity6_task3.2

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length. The D3.js code uses `scaleLinear` to position points along the x and y axes and `scaleOrdinal` to map the three species to different symbols via `symbols`. The visualization is rendered as an SVG, with axes added using `axisLeft` and `axisBottom`. Data is loaded remotely from a GitHub raw CSV file, and the plot updates dynamically based on the specified margin and size settings.

Activity6_task3.2

This example shows a scatter plot of Iris flower measurements, mapping sepal length on the x-axis and petal length on the y-axis, with different symbol shapes representing species. The visualization also includes a custom shape legend identifying each species. The code uses d3.csvParse and d3.fetch to load a CSV dataset, then d3.scaleLinear for axes and d3.scaleOrdinal with d3.symbolsFill to assign distinct geometric markers. Axes are rendered via the d3.axisLeft and d3.axisBottom APIs, while a custom legend module draws symbols and text ticks.

activity6_question1_task3

This visualization displays the classic Iris flower dataset as a scatter plot, mapping sepal length along the x-axis and petal length along the y-axis. Each point’s shape encodes the flower species, with a custom legend rendering the three categories using d3.symbol and symbolsFill. The code fetches the CSV from a GitHub repository, parses it with d3.csvParse, and renders the plot using d3.scaleLinear for both axes and d3.scaleOrdinal for the shape scale, with axes and labels generated via d3.axisBottom and d3.axisLeft.

activity6_task3.2

This visualization is a scatter plot of the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis. Points are colored and shaped by iris species, with a legend displaying the three species categories. The code uses D3 v7 APIs such as `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `axisLeft`, `axisBottom`, and `symbol` to construct the plot and its shape legend. Data is fetched as a CSV from a GitHub repository and parsed with `csvParse`.

Fork of Acitivty6_task3.2

A scatter plot compares sepal length to petal length across 150 Iris flowers from the classic Fisher dataset, distinguishing three species by marker shape. The plot uses the full browser viewport and includes axis labels for both measurements, with a shape legend on the right identifying each species. Implemented with D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shapes, and `csvParse` to load and convert the remote `Iris.csv` data before rendering marks as SVG paths.

Acitivty6_task3

This example displays the classic Iris dataset using a D3.js scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Each flower species (setosa, versicolor, virginica) is represented by a distinct circle color: skyblue, lightgreen, and orange, respectively. The visualization loads CSV data from a remote GitHub raw URL and uses D3 v6 APIs including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the chart as an SVG. Axis labels are styled and positioned to complete the chart.

Activity6_task3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes, with each point colored by species (setosa, versicolor, or virginica). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub-hosted CSV and render an SVG chart. Additional text labels for the axes are added manually via appended `text` elements, though the title references sepal length, the axis and data actually use petal dimensions.

Activity6_Task3

This interactive scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes while using colored circles to distinguish between the three iris species: setosa, versicolor, and virginica. The visualization renders as an SVG using D3.js v6, specifically leveraging `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`. It loads the dataset from the provided GitHub repository via a URL, defines custom margin and radius values, and scales the data accordingly. The plot includes green axis labels for “Petal_Length” and “sepal_Length”, with the axes styled with large tick text.

Fork of Activity6_question

This stacked bar chart visualizes monthly sales across three departments—Electronics, Clothing, and Groceries—using horizontal bars segmented by category. The chart is built with D3.js v4, parsing CSV data and rendering it as SVG, with a color scale distinguishing departments and a custom tooltip showing segment values on hover. Axes display month labels and total sales formatted in thousands, while a legend identifies each category. The layout uses D3 scales for positioning and the d3.stack API to compute stacked segments from the uploaded sales data.

Activity6_Task-2

This stacked bar chart visualizes the percentage distribution of IMDb ratings across six movie genres, with each bar segment representing a rating level from below 5.0 to above 8.5. A hover tooltip displays the exact percentage for each segment. Built with D3 v7 and SVG rendering, the chart uses `d3.stack()` to compute the stacked series, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for axes. The data comes from a CSV file containing genre-specific rating percentages.

Activity6_task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segmented into five rating categories from “below 5.0” to “above 8.5.” The chart shows that genres like Action and Comedy have higher percentages of low ratings, while Documentary and Animation skew toward higher ratings. Built with D3 v7, the visualization uses `d3.stack()` to create the stacked segments, `d3.scaleOrdinal()` for color encoding, and `d3.scaleBand()` for the categorical y-axis. The data comes from a CSV file, rendered as SVG, with interactive tooltips displaying exact percentages on hover.

Fork of Fork of Activity6_Question1.2

This bar chart ranks the 20 most populous countries based on 2010 population data, sourced from a remote CSV file. The visualization displays horizontal bars ordered by country, with a linear x-axis scaled in billions and a categorical y-axis for country names. Built with React and D3 v5, it uses `scaleLinear` for the quantitative axis, `scaleBand` for the categorical axis, and renders vector graphics through SVG with custom tick formatting that converts gigabytes to billions.

Fork of Activity6_Question1.1

This visualization presents a horizontal bar chart showing the population of various countries in the year 2000. The chart displays the top 10 countries by population, with the data loaded from a CSV file using d3.csv. The visualization is built with React and D3 v5, using scaleBand and scaleLinear to create the layout, while SVG rectangles render the bars. Axes are constructed using custom React components, and a d3 format function converts large numbers into abbreviated labels like "B" for billions.

Activity6_task 1

This visualization displays the 2020 population estimates for 30 countries as a horizontal bar chart, ranked by country name along the vertical axis and population magnitude along the horizontal axis. The chart is rendered as an SVG using React components, with D3 v5 providing the scale functions (scaleBand, scaleLinear), data loading via csv, and number formatting. The code imports data from a GitHub-hosted CSV file, calculates population values by multiplying the '2020' column by 1000, and includes axis components with custom tick formatting that converts abbreviations like 'G' to 'B'.

Activity6_TASK1

This example displays a simple bar chart using D3.js v5 within a React framework. It renders the chart using SVG elements and applies styles for axis labels, tick marks, and colored bars. The code imports `select` from D3 to manipulate the DOM, and uses a local ES6 module to display a greeting message. The chart is drawn with a green fill for the marks and blue axis lines, with text fill for the tick labels.

Fork of Fork of 6 Buddhas

A flower-background Buddha image is overlaid with a violet line-art path of the Buddha, repeated at two different scales and positions to create an overlapping, layered effect. The visualization uses React to render SVG elements, with the path data embedded directly in the code. It demonstrates multiple SVG transforms to position and scale the same path geometry, with a black background and a flower image set as the underlying backdrop.

Fork of 6 Buddhas

Six overlapping outlines of the Buddha’s head are drawn as SVG paths in violet with white strokes, repeated at different scales and positions against a black background with a green floral image. Built with React and ReactDOM, the code generates twenty numeric values used to construct the path data, then renders each Buddha as a transformed `<path>` element. The composition layers the identical shape multiple times to create a dense, monochromatic pattern.

Fork of 5 buddhas

A colorful abstract composition of overlapping Buddha‑like silhouettes fills the screen, rendered as a grid of randomly generated polygons with varied hues and high opacity. The visualization uses React to generate SVG elements, mapping arrays of numbers into polygon coordinates with randomized positions, sizes, and fill colors, while applying rotational transforms. A single large Buddha path is additionally drawn at the center, overlaid on the chaotic pattern. The code relies on React’s `createElement` and `ReactDOM.render` without external data sources.

Fork of 5 buddhas

Fork of 5 buddhas

5 buddhas

Five overlapping buddha silhouettes emerge from a dense field of randomly generated, semi-transparent polygons. The piece layers thousands of colored triangles, each assigned random coordinates and RGB fill values, creating a chaotic, colorful backdrop behind five distinct buddha figures rendered as SVG paths. The visualization uses React to map over an array of numbers, generating polygon elements with inline math for positioning, color, and rotation. Built with React and SVG, the example shows how algorithmic randomness can be combined with fixed geometric forms to create a complex, layered composition.