Manojsai Bangaru

manojsai_bangaru_pie_chart

This pie chart visualizes CO₂ emissions by country, with each slice labeled by the country's name and a legend on the left displaying the country names alongside their respective values. The chart is built using D3 v7 APIs, including `d3.pie`, `d3.arc`, and `d3.arc().centroid` to position labels within the slices. Data is loaded from a CSV file via `d3.csv`, and colors are assigned using `d3.scaleOrdinal` with the `d3.schemeSet3` palette.

Apr 10, 2025

Activity_7

This interactive scatter plot animates through the Iris dataset, cycling between four feature pairs on the x-axis while displaying species-colored circles. The visualization uses D3.js modules including `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function. An SVG rendering with `setInterval` drives the animation, rotating through petal_width, sepal_width, petal_length, and sepal_length. The legend labels each species with distinct colors, while axis titles update dynamically to reflect the current variable being displayed.

Apr 9, 2025

Activity6_Task3_Q6

This animated bubble chart displays the relationship between revenue and profit for ten technology companies, with bubble size encoding revenue and color encoding geographic region. The visualization uses D3 v7's `scaleLinear` for the x and y axes, `scaleSqrt` for bubble sizing, and `scaleOrdinal` with `schemeCategory10` for colors. Each circle animates its radius from 0 to its final size using sequential `transition` delays of 300 milliseconds per bubble, creating a staggered entrance effect. The SVG rendering includes labeled axes and hover tooltips via the `title` element.

Activity6_Task4_Q9

This bubble chart plots ten major technology companies by revenue on the x-axis and profit on the y-axis, with each circle’s radius scaled to revenue and color encoding geographic region. The chart uses d3.scaleLinear for both axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal with d3.schemeCategory10 for region colors. Hover tooltips appear via appended SVG <title> elements, while axis labels are positioned manually with SVG text elements. The static synthetic dataset is hardcoded in the D3 v7 script.

Activity6_Task2_Q3

This example presents a horizontal stacked bar chart comparing tax revenue and excise revenue for ten Indian states, including Delhi, Maharashtra, and Gujarat. The chart visually separates the two revenue components using steelblue and orange bars, with the total length representing combined revenue. Built with D3.js v7, the visualization uses `d3.scaleBand` for the categorical state axis, `d3.scaleLinear` for the quantitative revenue axis, and `d3.stack` to prepare the data for rendering as SVG rectangles.

Activity6_Task1_Q1.2

A horizontal bar chart displays the population of 20 countries in 2010, with country names on the y-axis and population on the x-axis. The data is loaded from a CSV file using d3.csv and rendered as SVG rectangles via d3.select, d3.scaleLinear, and d3.scaleBand. Axis labeling uses d3.axisBottom and d3.axisLeft.

Activity6_Task1_Q1.1

This horizontal bar chart displays the population of the top 10 countries in the year 2000, sorted from largest to smallest. The chart uses a light green fill for the bars, with a title above and blue tick lines on the axes. Built with D3 v7, the code uses `d3.scaleLinear` and `d3.scaleBand` for the x and y scales, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is fetched from a CSV file stored on GitHub and rendered as SVG.

Activity6_Q1.1

This visualization is a horizontal bar chart showing the population of the top 10 countries in the year 2000, sourced from a CSV file fetched via `d3.csv`. It uses D3 v7's `scaleLinear` and `scaleBand` to map population values and country names to the SVG canvas, with custom axis components (`AxisBottom` and `AxisLeft`) labeling the axes. Light green rectangles represent each country's population, and the data is sorted in descending order before rendering. The chart includes title and axis labels, all styled through inline SVG attributes.

Activity6_Task 3.2

This scatter plot displays the relationship between sepal length and petal length for three Iris species, using distinct symbols (circle, cross, diamond) and colors to encode the species categories. The visualization, built with D3 v7, uses `scaleOrdinal` for species mapping, `scaleLinear` for axes, and SVG `path` elements for the custom symbol shapes. Data is loaded asynchronously from a remote CSV file, with the legend positioned at a fixed coordinate to identify the species. The chart leverages D3's declarative join operator for efficient DOM updates and includes axis labels for both measurements.

Activity6_Task4

A bubble chart visualizes the correlation between average torque, horsepower, and highway MPG for different car makes. Each circle's x-position corresponds to horsepower, y-position to torque, and radius scales with highway MPG, while color encodes the car brand. The visualization uses D3 v7 with an SVG rendering and includes interactive tooltips that display the car make on hover. A legend explains the bubble size scale for MPG values, and the color mapping uses a Turbo colormap.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three iris species, with each species color-coded as skyblue, lightgreen, or orange. The visualization uses D3 v6 to load CSV data, apply linear scales, render SVG circles with axis labels, and position points within a full-window viewport. The code implements axes, margin-based layout, and color mapping through a switch function, while reading data from a GitHub-hosted CSV file.

Activity6_Task2

This stacked bar chart shows the 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 horizontal bars reveal how genres like Documentary skew toward higher ratings while Action concentrates in lower ranges. Each segment's precise percentage appears in a tooltip on hover. The visualization uses D3.js v7 with `d3.stack()` for bar composition, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage scale, rendering as SVG with custom CSS styling.

Activity 6_Task 1

This horizontal bar chart displays the populations of the top 30 countries in the year 2000, sorted by country name. The visualization uses D3.js version 7 to create an SVG bar chart with light green bars, a linear x-scale for population values, and a band y-scale for country names. The code imports data from a CSV file using d3.csv and constructs the chart with modular components for axes and marks. Axis labels are formatted using d3.format to display population values in billions.

Activity 6_Task 1

This example displays a static web page that renders the text “Hello VizHub!” centered on the screen. The visualization is built using D3.js, specifically the `select` API to target the DOM element with the ID `message` and set its text content from an imported ES6 module. The page’s styling is controlled through an external CSS file, which sets the font size and alignment. The code demonstrates a minimal D3 v6 integration with a local module import, showing how D3 can be used for basic DOM manipulation rather than data-driven graphics.