bhargavireddy4016@gmail.com

Activity-7 q-1

A pie chart displays the distribution of sales counts across different brands, with each slice labeled and colored uniquely. The chart is rendered as an SVG using D3.js v7, with data loaded from a CSV file via `d3.csv` and aggregated using `d3.rollup`. Slices are generated with `d3.pie`, and a legend positioned to the right shows brand color mappings. Hover tooltips are not implemented, but static labels and a Tableau10 color scheme provide clarity.

Apr 10, 2025

Activity-7 question-1

This pie chart visualizes finance portfolio allocation by category, with each slice representing the percentage value of a portfolio component. Built with D3 v7, the visualization uses `d3.pie()` and `d3.arc()` to generate the slices, while `d3.scaleOrdinal` with `d3.schemeSet2` assigns colors. Interactive tooltips appear on hover, and a legend identifies each category. Data is loaded asynchronously from a GitHub-hosted CSV file via `d3.csv`, with values converted to numeric format before rendering in the animated SVG.

Apr 10, 2025

Activity-6 Task-3.2

This visualization displays a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Each point is rendered as a distinct symbol shape representing the species of iris flower. The chart uses D3.js v7 with `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and a custom legend showing the species symbols. Data is loaded as CSV and parsed with `csvParse` before being plotted.

Activity-6 Task-4 Question 4.9

A bubble chart built with D3 v7 analyzes retail store performance by plotting average transaction amounts against total transaction counts. Each bubble's radius encodes employee count, while color distinguishes store names using a categorical color scheme. The visualization includes axis labels, a legend, and interactive tooltips displaying store metrics on hover. Data is loaded from a CSV file and rendered as SVG circles, with all d3 scales and event handlers implemented in the bubbleChart.js file.

Fork of Activity-6 Task-4 Question 4.9

A minimal D3.js template renders the text “Hello VizHub!” centered in a large font. The visualization demonstrates a basic data-application structure using `d3.select` to target a `div` by ID and set its text content from a separate ES6 module. The example shows how to combine local styles, external CDN libraries, and modular JavaScript organization. It serves as a starting point for building more complex interactive visualizations.

Activity-6 Task-3 Question3.6

This example shows a scatter plot of student performance, comparing math scores against reading scores. Each circle represents a student, and color encodes the student’s race/ethnicity, grouped into three categories (Group A & B, Group C, Group D & E). The visualization uses D3 v6 to load CSV data from a GitHub repository, then renders SVG circles with `scaleLinear` axes for both scores. A legend identifies the three color groups, and axis labels are added via `axisLeft` and `axisBottom`, with text elements placed for the x- and y-axis titles.

Activity-6 task-3

This example displays a scatter plot of the Iris dataset, positioning points by petal length on the x-axis and petal width on the y-axis. Circles are colored by species (skyblue for Setosa, lightgreen for Versicolor, orange for Virginica), with a legend below. The visualization uses d3.csv to load the data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft and d3.axisBottom for axes. Rendering occurs through SVG elements appended to the body, with the plot sized to the full browser window.

activity-6 task-2 question2.3

This stacked bar chart displays the proportion of product ratings within five ranges for each superstore category, showing the distribution of customer feedback across different product types. The visualization uses D3.js v7 with a horizontal stacked bar layout where each category row is divided into colored segments representing rating intervals from below 5.0 to above 8.5. The code utilizes `d3.stack()` with `stackOffsetExpand` to normalize each bar to full width, `d3.scaleLinear()` for the x-axis, and `d3.scaleBand()` for category positioning. The data is computed from the CSV file's percentage values, rendered as SVG rectangles with a legend.

Activity-6 task-4 question-4.9

This bubble chart visualizes transaction data across eight spending categories, plotting average transaction amount on the x-axis, transaction count on the y-axis, and total spending as bubble radius. Each category is color-coded using `d3.scaleOrdinal` with `d3.schemeSet2`. The visualization uses D3 v7 to load CSV data, render SVG circles, and provide interactive tooltips on mouseover. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleSqrt` maps total amounts to proportional bubble sizes for easy comparison of spending patterns.

activity-6 Task-4

This bubble chart visualizes vehicle performance by mapping horsepower on the x-axis, torque on the y-axis, and highway MPG as bubble size, with each make colored using d3.scaleOrdinal and d3.schemeTableau10. Data loads from a CSV file via d3.csv, and circles render in SVG with hover tooltips showing exact values. The chart includes axis labels, a size legend for MPG, and a color legend for car makes.

Activity-6 question1.2

A horizontal bar chart displays the 2010 population for 20 countries, with each bar length proportional to population. The visualization uses React components (Marks, AxisBottom, AxisLeft) to render SVG rectangles, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the continuous x-axis. Data loads via d3.csv from a GitHub-hosted CSV file, and the bars include native SVG tooltips showing formatted population values using d3.format.

activity-6 question1.1

A horizontal bar chart displays the population of ten countries in the year 2000, using a green SVG rect for each country. The chart loads population data from a remote CSV file, processes it with `d3.csv`, and renders the bars with React components. D3’s `scaleBand` and `scaleLinear` map the country names and population values to screen positions and widths, while custom `AxisBottom` and `AxisLeft` components draw the axes. Hovering over a bar reveals a native tooltip with the population value, formatted using `d3.format`.

Act-6 Task-1

This example shows a horizontal bar chart of 2010 population figures for 20 countries, with bars sorted by country name and labeled in billions. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, and d3-format’s `format('.2s')` for tick labels. Data is loaded asynchronously from a CSV via `d3.csv`, and hover tooltips are provided through SVG `<title>` elements.

Activity6_Task2

This visualization shows the distribution of IMDb movie ratings across six genres, using stacked horizontal bars to represent the percentage of titles falling into five rating brackets from "below 5.0" to "above 8.5." Each genre row is segmented by rating category, colored via d3.scaleOrdinal with a five-color palette. The chart is built with d3.v7, using d3.stack to create the stacked data, d3.scaleBand for the y-axis, and d3.axisBottom for the x-axis. Tooltips display exact percentages on mouseover, and the SVG rendering includes axis labels and a title.

activity 6_Task 1

This interactive bar chart visualizes the 2020 population rankings of 30 countries, using a horizontal layout for easy comparison. The chart is built with React and D3 v5, where D3’s `scaleBand` and `scaleLinear` handle the axis mappings and the SVG rectangles are generated from the CSV data. The bottom axis uses a `.2s` format to abbreviate large numbers, converting 'G' to 'B' for readability, while the left axis lists country names. Tooltips on each bar provide the precise population value, and the interface is styled with a green fill and blue axis ticks.