MahimaChowdaryKasthala@my.unt.edu

Activity 7 Question 1

This visualization shows a pie chart of fruit quantities, with each slice labeled by fruit name and a color-coded legend on the left. It uses D3 v7 to load CSV data from a GitHub gist, calculating the arc paths with `d3.pie` and `d3.arc`. The chart includes fake X and Y axis labels for display, and text elements are positioned using `arc.centroid`. Colors come from `d3.scaleOrdinal` with `schemeCategory10`.

Apr 6, 2025

Activity 7 Question 1

This area chart displays monthly sales figures, using a filled path to emphasize the trend over time. Built with D3 v7, the visualization maps categorical month labels to the x-axis via `scalePoint` and a linear scale for sales values on the y-axis. The code fetches CSV data from a GitHub gist and renders the area with a steel-blue fill, adding labeled axes for clarity. The SVG output is generated programmatically through D3’s `area` generator and standard axis functions.

Apr 6, 2025

activity6_Question4

This bubble chart displays the relationship between market capitalization and employee count for major tech companies, with bubble size encoding market cap and color distinguishing industry sectors. The visualization uses D3 v7 with SVG rendering, employing linear scales for axes, a square root scale for bubble radius, and an ordinal scale with the Set2 color scheme for industry categories. Axes are labeled “Market Cap (in millions)” and “Employees,” while a custom legend component identifies each industry. Data is loaded asynchronously from a CSV file using d3.csv and parsed with a row function.

activity6_tutorial4

This bubble chart visualizes car performance by plotting horsepower on the x-axis and torque on the y-axis, with each circle’s radius scaled to horsepower using `d3.scaleSqrt` and colored by manufacturer via `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart renders axes with `d3.axisLeft` and `d3.axisBottom` and adds a legend using a custom `renderLegend` function. Data is loaded asynchronously from `data.csv` and processed in `useData.js`, with the SVG built using D3’s selection and `.join` operations.

activity6_Question3

This scatter plot visualizes the relationship between battery life (in hours) and weight (in grams) for a small dataset of five smartphones from different brands. Each phone is represented as a distinct symbol based on its brand, with a color legend displaying the brand names. The visualization is rendered using D3.js v7 with SVG, employing scales like `d3.scaleLinear` for axes and `d3.scaleOrdinal` with symbol generators for categorical shapes. Data is loaded from a CSV file via `d3.csv`, and axes are labeled with battery life and weight.

activity 3.2

This scatter plot visualizes the Iris dataset, displaying sepal length against petal length for three flower species. Each species is represented by a distinct shape—circles, squares, or triangles—as defined by a d3.symbol() generator, allowing for visual differentiation without relying on color. The plot includes labeled axes and a legend created with a custom shapeLegend module. The visualization is built using D3 v7, renders as an SVG, and loads its data from a local CSV file.

tutorial 3.1

This scatter plot visualizes the iris dataset, showing sepal length on the x-axis and petal length on the y-axis. Each circle represents a flower specimen, with colors distinguishing among the three iris species (setosa, versicolor, and virginica) using an ordinal color scale with `d3.schemeCategory10`. The visualization uses d3.v7 to load CSV data via `d3.csv`, apply linear scales for both axes, and render the plot as SVG circles. Axis components are built with `d3.axisBottom` and `d3.axisLeft`, with custom labels added for both dimensions.

Activity_6(task 3)

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis against petal width on the y-axis, with each of the three iris species (setosa, versicolor, virginica) distinguished by a distinct color. The visualization uses D3 v6 to render SVG circles, with axes, labels, and a legend generated via `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`. Data is loaded asynchronously from a remote CSV file, and the plot employs `d3.extent` to set linear scales for the axes.

activity6(task 3)

This example presents a dynamic data visualization where a message is displayed prominently and centered on the screen. The visualization shows the text "Hello VizHub!" in a large font size, leveraging CSS for styling. The underlying functionality is built using D3.js, specifically the `select` API to set the text content of a designated div element. The code imports a local ES6 module, `myMessage.js`, which exports the message string, and then uses D3 to update the DOM element and apply the visual styling.

activity_6(task 3)

A scatter plot visualizes the Iris dataset, showing petal length versus petal width with points colored by species (setosa, versicolor, virginica). The SVG rendering uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.axisBottom/axisLeft to draw the scales. Data loads remotely via d3.csv, parsing numeric fields before rendering circles with d3.selectAll and enter/append patterns.

task 3

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Each point represents a flower, colored by species through a categorical scale that distinguishes Iris-setosa, Iris-versicolor, and Iris-virginica. The visualization loads data from a CSV file using `d3.csv` and renders the plot as an SVG, employing `d3.scaleLinear` for axes and the `d3.axisBottom` and `d3.axisLeft` APIs to generate tick marks and axis labels.

Activity6_Task3

This example renders a static text message, "Hello VizHub!", in the center of the page using a large font size. The visualization demonstrates a minimal D3.js setup, where `select` from D3 is used to target a `div` element by its ID and set its text content from an imported ES6 module. The styling is applied via an external CSS file, and the page structure is defined in a simple HTML document. No explicit data or interactive features are present, focusing instead on basic DOM manipulation and module integration.

question 3(task 2)

This example shows average subject scores in math, science, and English for five schools, displayed as a horizontal stacked bar chart. Each bar segment represents a subject’s contribution to the total score, with a color legend identifying the subjects. The visualization uses D3 v7 to load CSV data, apply a stack layout, and render SVG rectangles scaled by linear and band scales. Axes, a total-score axis label, and an interactive-free legend are drawn using D3’s axis and ordinal color APIs.

Task-2(question 4)

This stacked bar chart displays the monthly expenses of Alice, Bob, and Charlie across five categories: rent, food, transport, entertainment, and utilities. Data from an external `expenses.csv` file is loaded using `d3.csv`, with numeric values converted for processing. The visualization is rendered as SVG using D3 v7, employing `d3.stack()` to create stacked layers, `d3.scaleBand` and `d3.scaleLinear` for positioning, and a color ordinal scale for category distinction. A legend and labeled axes clarify the breakdown of spending.

Fork of question 3(Task 2)

This stacked bar chart visualizes the proportion of smartphone app usage across six age groups, from 18-24 to 65+, with each bar segment representing a category such as Social Media, Games, or Productivity. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked series from the `phones.csv` data and renders them as SVG rectangles. A linear `d3.scaleLinear` maps the usage proportions (0–1) on the x-axis, while a band scale positions the age groups vertically. Color encoding via `d3.scaleOrdinal` distinguishes the app categories, and an interactive legend lists each type alongside its corresponding color.

question 1(Task 2)

This example shows the proportion of smartphone app usage across six age groups using a horizontal stacked bar chart. The bars are divided into segments for social media, games, productivity, streaming, and other apps, with a color-coded legend for identification. The chart uses `d3.stack` to compute the stacked bar coordinates and `d3.scaleBand` for the age-group axis. It reads data from the CSV file `phones.csv` and renders the chart as an SVG element. Color assignments are made with `d3.scaleOrdinal`.

Fork of Fork of question 3(Task 2)

This visualization shows the proportion of smartphone app usage across six age groups, with each horizontal bar segmented into five categories: Social Media, Games, Productivity, Streaming, and Others. A stacked bar chart uses a diverging color palette to distinguish app types, and a legend identifies each category. The chart is rendered as SVG using D3 v7, employing `d3.stack()` for data transformation, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. Data is loaded from a local CSV file (`phones.csv`).

Fork of question 3(Task 2)

This stacked bar chart visualizes the proportion of smartphone app usage across six age groups, from 18-24 to 65+, with each bar segment representing a category such as Social Media, Games, or Productivity. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked series from the `phones.csv` data and renders them as SVG rectangles. A linear `d3.scaleLinear` maps the usage proportions (0–1) on the x-axis, while a band scale positions the age groups vertically. Color encoding via `d3.scaleOrdinal` distinguishes the app categories, and an interactive legend lists each type alongside its corresponding color.

Fork of question 3(Task 2)

This stacked bar chart visualizes the proportion of smartphone app usage across six age groups, from 18-24 to 65+, with each bar segment representing a category such as Social Media, Games, or Productivity. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked series from the `phones.csv` data and renders them as SVG rectangles. A linear `d3.scaleLinear` maps the usage proportions (0–1) on the x-axis, while a band scale positions the age groups vertically. Color encoding via `d3.scaleOrdinal` distinguishes the app categories, and an interactive legend lists each type alongside its corresponding color.

Fork of question 3(Task 2)

This stacked bar chart visualizes the proportion of smartphone app usage across six age groups, from 18-24 to 65+, with each bar segment representing a category such as Social Media, Games, or Productivity. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked series from the `phones.csv` data and renders them as SVG rectangles. A linear `d3.scaleLinear` maps the usage proportions (0–1) on the x-axis, while a band scale positions the age groups vertically. Color encoding via `d3.scaleOrdinal` distinguishes the app categories, and an interactive legend lists each type alongside its corresponding color.

Task 2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the proportion of films falling into five rating categories. The code uses D3.js v7, specifically `d3.stack()` for stacking, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the quantitative x-axis. Data from `data.csv` is loaded via `d3.csv()`, rendered as SVG, and accompanied by a color-coded legend.

question2(task-1)

This horizontal bar chart displays the populations of 20 countries in 2010, with each bar labeled by country name and population value, sorted in descending order from China to France. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis population scale and `d3.scaleBand` for the categorical y-axis of country names. The code draws axis ticks via `d3.axisLeft` and `d3.axisBottom`, formats population labels with `d3.format('.2s')`, and includes hover effects that change bar colors through CSS.

question1(Activity6)

This example shows a horizontal bar chart comparing the population of 10 countries in the year 2000, using hardcoded data. The bars are rendered as SVG rectangles, with value labels placed at the end of each bar and formatted using `d3.format('.2s')`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Bars are styled with a CSS hover effect that changes their fill color to orange.

TASK-1(ACTIVITY-6)

This horizontal bar chart visualizes the top 30 countries by population in 2020. The D3.js v7 code loads CSV data from a GitHub Gist, converts the '2020' column to numerical values, sorts the data in descending order, and selects the first 30 entries. Using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, it renders steelblue rectangles within an SVG, with hover states turning them orange. The visualization also includes a left y-axis, a bottom x-axis with compact tick labels, and text annotations showing each population value.