a9.hemraj@gmail.com

Activity7_q2

Activity7_Q1

This pie chart displays the proportional sales distribution across five product categories—Electronics, Clothing, Groceries, Furniture, and Stationery—using a static inline dataset. Each slice is colored via a d3.scaleOrdinal with the d3.schemeSet2 palette, and labels are positioned using the arc centroid. The visualization is rendered as SVG through D3 v7, with slices drawn by d3.arc, pie layout generated by d3.pie, and a legend constructed from appended rectangles and text elements.

Activity6_Question4

This bubble chart displays the relationship between average horsepower and average torque for car makes, with bubble size representing average price and color distinguishing manufacturing regions (Asia, Europe, America). It uses D3 v7 to load CSV data via `d3.csv`, scales the x- and y-axes with `scaleLinear`, maps region colors with `scaleOrdinal`, and encodes price through a square-root scale (`scaleSqrt`). Data is rendered as SVG circles, with tooltip-free legends and formatted axis labels generated using `d3.axisBottom` and `d3.axisLeft`.

Activity6_tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, using bubble size to encode MPG and color to distinguish brands. The interactive D3.js v7 visualization renders SVG circles in a scatterplot, with tooltips displaying each make on hover. Data is loaded from a CSV file, and the code implements linear scales, a color ordinal scale using `d3.interpolateTurbo`, and legend elements with `d3.axisBottom` and `d3.axisLeft`.

activity6_Question3

This scatter plot visualizes car performance by plotting horsepower on the x-axis against mileage (MPG) on the y-axis, with each point colored by fuel type (Petrol, Diesel, Electric). The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for color mapping. Data is loaded asynchronously via `d3.csv` from a GitHub gist, with a legend positioned separately using SVG circles and text elements.

Activity6_tutorial3.2

This scatter plot visualizes iris flower measurements, comparing sepal length against petal length with each species represented by a distinct symbol shape. The visualization uses D3 v7’s scaleLinear, scaleOrdinal, and symbol generators to map data points and render the shape legend. Axes are drawn with axisLeft and axisBottom, while labels are positioned manually. Data is loaded asynchronously from a CSV file using d3.csvParse and fetched from a remote URL, with numerical fields converted before rendering.

Activity6_tutorial3.1

This visualization displays the classic Iris dataset as an interactive-looking scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Circles are colored by species, with setosa in skyblue, versicolor in lightgreen, and virginica in orange, using a fixed radius of 5 pixels. The code loads data from a GitHub gist via `d3.csv` and parses numeric fields with a custom row function. It constructs scales with `d3.scaleLinear` and `d3.extent`, draws axes with `d3.axisLeft` and `d3.axisBottom`, and renders SVG circles using `d3.selectAll` and `.join`. The page uses full-window dimensions with custom margins and green axis labels.

activity 6_Question2

This stacked bar chart displays the distribution of movie ratings (good, average, poor) across different genres, with each bar segment representing a percentage of total ratings. The visualization uses D3.js v7 with an SVG rendering, employing scales like `d3.scaleLinear` for the x-axis percentage values and `d3.scaleBand` for the categorical genre groupings on the y-axis. The chart uses `d3.stack` to create stacked segments, with colors mapped via `d3.scaleOrdinal`. Data comes from an external CSV file, and hover interactions temporarily change segment colors to light blue while logging percentage values to the console.

activity 6 Task 2

This example shows the distribution of employee salaries across six departments, broken into five income brackets from "below 50k" to "above 85k." A stacked bar chart displays each department’s proportional share per bracket, with a tooltip revealing the exact percentage on hover. The code uses d3.stack() to aggregate the data from a CSV file and d3.scaleBand and d3.scaleLinear for axes, with d3.axisLeft and d3.axisBottom for ticks. Custom colors, a legend, and interactive opacity changes on mouse events enhance readability.

Activity 6_Tutorial 2

This stacked horizontal bar chart displays the distribution of salaries across five departments, with each bar segmented by salary bracket proportions. Built with D3.js v7 and rendered as SVG, the visualization uses `d3.stack()` to compute cumulative values, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. Data from the CSV file is mapped to colored rectangles, with interactive mouseover tooltips revealing exact percentages per bracket.

Activity6 1.2

This interactive bar chart displays the 2010 population of 20 countries, with each bar’s length encoded by a linear scale and countries arranged on a categorical band scale. It uses React with D3 v5 scales and SVG rendering, loading CSV data from a GitHub URL. The bottom axis formats tick labels with D3’s `format` (abbreviating billions as “B”), while the left axis lists country names. Marks are colored green, and hover tooltips show exact population values.

Fork of Activity6_1.1

This horizontal bar chart displays the populations of ten countries for the year 2000. Each bar’s length encodes the population value, with a linear scale on the x-axis and a categorical band scale for countries on the y-axis. The visualization is built with React and D3 v5, creating SVG marks and axes. It uses `scaleBand`, `scaleLinear`, and `format` to render the chart, and data is sourced from a CSV file via a custom `useData` hook.

Activity6_1.1

This example displays a large, centered "Hello VizHub!" message in bold text. The visualization is built using D3.js version 5, specifically leveraging the `select` API to target the message div and update its content. The code imports a local ES6 module to supply the displayed text, demonstrating a modular JavaScript approach. The styling is handled through CSS, setting the font size to 12em and aligning the text in the center of the page. The example serves as a minimal demonstration of integrating D3 with HTML and CSS for simple text-based output.

Activity 6

This horizontal bar chart ranks the 30 most populous countries by their 2020 population estimates, with bars extending from left to right and the y-axis ordered alphabetically by country name. The visualization uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling the positional encodings, while axis components manually generate ticks and labels. Population values are formatted using D3’s `format` function, converting values to billions with an ‘B’ suffix, and the source data is loaded via `d3.csv` from a GitHub-hosted CSV file.