Mandadi Nishita

Activity 7.1 Question 2

Activity 7.1 Question 1

This pie chart visualizes product sales data, displaying the proportional share of each product category as a colored slice with corresponding legend labels and percentage values. The chart loads CSV data from a GitHub gist via `d3.csv` and renders it using D3 v5’s `pie` and `arc` generators, with `scaleOrdinal` assigning category colors. Legends are appended as SVG groups, showing category names and computed percentages, while the total sales value is calculated by summing the numeric `Value` field from the dataset.

Activity 7.1

Question1

This pie chart visualizes product sales distribution, with each slice sized proportionally to its revenue share and a corresponding legend displaying category names and percentage values. The chart uses d3.pie and d3.arc to generate the SVG paths, with a scaleOrdinal color scale assigning distinct hues to each segment. Data is loaded asynchronously from a CSV via d3.csv, and percentage labels are formatted with d3.format. The total sum of all values is calculated to compute each category’s share.

Activity 7.1 Question 1

Activity 7.1

This example demonstrates a minimal D3.js setup within VizHub, rendering the static text “Hello VizHub!” in large, centered type. It shows how to load D3 from a CDN via UNPKG and use ES6 module imports, including a local custom module (`myMessage.js`) that exports the message string. The code relies on D3’s `select` function to update the DOM, highlighting basic module integration and dependency management without any data or interactive behavior.

Q4

A bubble chart shows the correlation between three penguin measurements—bill length, bill depth, and body mass—across three species. Each circle is positioned by bill depth on the x-axis and bill length on the y-axis, with its size scaled by body mass via `d3.scaleLinear`. Colors encode species using `d3.scaleOrdinal`, and hover interactions trigger tooltip display via D3 event handlers. The chart is rendered as an SVG with axes, labels, and a legend, using data loaded from a CSV file.

Fork of Q4

A bubble chart visualizes the correlation between GDP per capita, CO2 emissions per capita, and population size, with each country represented as a circle. The chart’s x-axis shows GDP, the y-axis shows emissions, and the circle’s radius encodes population. The color of each bubble indicates the continent. Interactive tooltips display the country’s continent on hover. Built with D3 v7, the visualization implements a custom ordinal color scale using `d3.interpolateTurbo` and `d3.scaleOrdinal`, with axes created via `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a CSV file.

Q4

A bubble chart shows the correlation between GDP per capita, CO2 emissions per capita, and population for 33 countries, with circle size encoding population and color distinguishing continents. Hovering over a bubble reveals the country's continent via a tooltip. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` to load data, `d3.scaleLinear` for axes and bubble radius, and `d3.scaleOrdinal` with an interpolated turbo color palette. A legend maps colors to continents, and data comes from the included Co2_Emissions.csv file.

Activity6_Task4

Q3

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between bill length and bill depth, with points colored by species (Adelie, Gentoo, or Chinstrap). Using D3 v6, the code loads data via `d3.csv`, creates linear scales with `scaleLinear`, and renders circles with SVG. Axis labels use `axisLeft` and `axisBottom`, while the plot’s margins and labels are set manually, with text styled via CSS. The visualization adapts to the browser window’s dimensions for full-screen display.

Q2

Q3

This scatter plot shows the relationship between fixed acidity and quality in the wine quality dataset. It uses D3 v6 to load CSV data from a GitHub gist, scales the data into SVG coordinates, and renders orange circles for each data point. The visualization includes labeled axes for Quality and Fixed Acidity, with axis ticks generated using the `axisLeft` and `axisBottom` functions from the D3 `scaleLinear` and `extent` utilities. The plot fills the browser window dimensions and uses a uniform orange fill for all data marks.

Q3

This scatter plot displays Iris flower measurements, comparing sepal length against petal length, with species indicated by different symbol shapes. The visualization uses d3.scaleLinear for x and y positioning, d3.scaleOrdinal with symbolsFill to map species to distinct marks, and d3.symbol to render each point. The chart includes labeled axes and a shape legend, loading the dataset from a CSV file via d3.csvParse.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol from the `symbolsFill` scale. The visualization uses d3’s `scaleLinear` for axes, `scaleOrdinal` for shape mapping, and a custom `shapeLegend` to denote species categories. Data is loaded from a CSV file via `csvParse`, while `axes` and `symbol` utilities construct the chart and legend.

Activity6_Task3.2

This visualization shows the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with each species distinguished by a unique symbol. The plot includes axes with labels and a separate legend that maps species names to their corresponding shapes. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate the marks, while data is loaded asynchronously from a remote CSV file and parsed with `csvParse`.

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica) in skyblue, lightgreen, and orange. The code loads data from a GitHub gist via D3’s `csv` and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles with a fixed radius, while also mapping sepal dimensions to each point’s `rx` and `ry` attributes (though these are overridden by the constant radius). The visualization fills the browser window, with green axis labels for petal and sepal lengths.

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width against sepal length and width, with points colored by species (setosa, versicolor, virginica). The visualization loads CSV data via `d3.csv`, uses `d3.scaleLinear` for axes, and renders circles with `d3.selectAll` and `join`. Axis labels are added using `d3.axisLeft` and `d3.axisBottom`, with custom styling in an SVG canvas.

Q2

This example shows the distribution of IMDb movie ratings across five genres using a stacked horizontal bar chart. Each genre displays the proportion of movies falling into rating brackets from "Below 5.0" to "Above 8.5". The visualization uses D3 v7’s `d3.stack()` to create the stacked data and `d3.scaleOrdinal` with a custom color palette. Mouse interactions trigger tooltips that reveal the exact percentage for each rating segment. The chart renders as SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`, loading data from a local CSV file.

Activity6_Task2

This example presents a stacked horizontal bar chart showing the distribution of IMDb ratings across different genres, with each genre broken into five rating categories from "below 5.0" to "above 8.5." The visualization uses D3 v7’s `d3.stack()` function to compute stacked values and `d3.scaleOrdinal()` with a custom color palette to distinguish rating bands. Interactive mouseover events, handled via `.on()`, reveal tooltips displaying the exact percentage for each genre-rating combination. The chart is rendered as an SVG, with axes formatted using D3’s `d3.axisBottom` and `d3.axisLeft`, and data is loaded from a local CSV file.

Q1.2

This example displays a horizontal bar chart of population data for 20 countries in 2010, using green bars sorted alphabetically by country name. It loads CSV data from a GitHub repository via D3's `csv` function and renders the chart as SVG through React components. The code imports React, ReactDOM, and D3 v5 functions including `scaleBand`, `scaleLinear`, `scaleLinear`, `max`, and `format`, with custom `AxisBottom`, `AxisLeft`, and `Marks` components handling tick marks, labels, and tooltips.

Q1.1

Activity 6_Task 1

This horizontal bar chart shows the 2020 population of 30 countries, ranked with the largest at the top and the smallest at the bottom. Each bar’s length encodes population value, a tooltip via SVG `<title>` shows the formatted number, and axes use blue grid lines with labels. The React app loads CSV data from a GitHub URL using `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, formats ticks with `d3.format`, and renders all elements as SVG through reusable local components.

Fork of Hello VizHub - Activity 6

This example demonstrates a minimal VizHub project that displays a static text message using D3.js and ES6 modules. It shows how to import D3’s `select` function to target the `#message` div and set its content, while also importing a local `message` constant from `myMessage.js`. The page loads D3 v5 via UNPKG and uses a simple `styles.css` for centered, large-font styling.

Fork of 6 Buddhas

A chaotic, colorful overlapping Buddha silhouette appears repeatedly across a flower-background canvas. The piece layers thousands of randomly positioned triangular shapes, each with random RGB fill colors and rotations, generated through nested JavaScript array maps within a React component. The rendering uses SVG elements, specifically `<path>` data for the Buddha forms and custom polygons, all orchestrated through React's declarative component structure. The visualization demonstrates algorithmic randomness applied to sacred imagery, producing a dense, psychedelic composition.

5 Buddhas