AnushaHyderaboeni@my.unt.edu

@Anusha-star-dot-oss·12 public vizzes

Act 7 Question 5

This visualization shows the distribution of automobiles by body style, with a steelblue area chart displaying car counts across categories like convertible, hatchback, and sedan. The code loads automobile data from a remote CSV file using `d3.csv`, aggregates counts with `d3.rollup`, and renders the chart via SVG using `d3.area` with `scalePoint` for the x-axis and `scaleLinear` for the y-axis. D3 v7 provides the axes and margin-based layout.

Apr 11, 2025

Loading thumbnail…

Act 7 Q1

This pie chart visualizes the distribution of passenger classes in the Titanic dataset, showing three categorical slices for Class 1, 2, and 3. The chart uses D3 v7 with an SVG renderer, employing `d3.pie()` and `d3.arc()` to generate the arcs and `d3.rollups()` to aggregate class counts from a CSV. A custom legend displays exact passenger numbers, while axis labels are added despite the circular layout. The color scale maps distinct colors to each class using `d3.scaleOrdinal`.

Apr 11, 2025

Loading thumbnail…

Ex 1

This scatter plot visualizes the Iris dataset, comparing sepal length against petal length, with each point’s shape representing the flower species. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to map quantitative and categorical data to positions and shapes, while `axisLeft` and `axisBottom` render the axes. A custom shape legend is built using D3’s `symbol` generator, and data is loaded from a remote CSV via `csvParse`.

Apr 6, 2025

Loading thumbnail…

Act 6, Task 3 6

This scatter plot shows the relationship between horsepower and fuel efficiency (miles per gallon) for ten car models, with each point colored by the car’s region of origin (USA, Japan, or Europe). Built with D3 v7, the code loads the `cars.csv` file, uses `d3.scaleLinear` for both axes, and applies `d3.scaleOrdinal` with `d3.schemeCategory10` for the categorical color encoding. SVG circles are positioned via x/y scales, and labeled axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Apr 6, 2025

Loading thumbnail…

Activity 6 Tutorial 3.2

This example shows a scatter plot of the classic Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species differentiated by a distinct symbol shape. The visualization includes a custom legend that maps species names to their corresponding symbols. The code uses D3 v7 modules such as `scaleLinear`, `scaleOrdinal`, and `symbol` to generate the marks, while a modular `axes` function adds labeled axes. Data is loaded asynchronously from a GitHub-hosted CSV file using `csvParse`, and the plot is rendered into a full-window SVG.

Apr 6, 2025

Loading thumbnail…

Activity 4, Task 4

This scatter plot shows the relationship between hours studied and exam scores for 25 students, where each circle’s radius is randomly assigned between 10 and 40 pixels. The visualization uses d3.csv to load score.csv, then maps the data with d3.scaleLinear for both axes, rendering circles as SVG elements with steelblue fills and 0.7 opacity. Axis labels for “Hours Studied” and “Scores” are added via d3.axisBottom and d3.axisLeft, with the chart drawn inside a 800×500 SVG canvas.

Apr 6, 2025

Loading thumbnail…

Activity 6, Task 4

This bubble chart displays the relationship between a dataset’s film entries, plotting average temperature on the x-axis and average rainfall on the y-axis, with circle size encoding population and color distinguishing continents. Built with D3 v7, the visualization uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, `d3.scaleSqrt` for circle radii, and `d3.scaleOrdinal` with `d3.schemeTableau10` for color mapping. The SVG renders circles with opacity and stroke, while `d3.axisBottom` and `d3.axisLeft` generate labeled axes. The underlying CSV includes film titles and release dates, though these fields are not visually encoded.

Apr 6, 2025

Loading thumbnail…

Activity 6 Task 3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each flower colored by species (setosa in skyblue, versicolor in lightgreen, virginica in orange). Using D3 v6, it loads the CSV data and maps sepal length to the x-axis and sepal width to the y-axis as well, though only the petal dimensions are plotted as circles. The code employs d3.csv for data loading, scaleLinear for scales, and axisLeft/axisBottom for axes, rendering SVG circles with radius 5.

Apr 6, 2025

Loading thumbnail…

Task 2 Anusha H

This chart shows the distribution of IMDb movie ratings across six genres, using stacked horizontal bars where each segment represents the proportion of movies falling into one of five rating bands (below 5.0 up to above 8.5). The code uses d3.stack to create the stacked series, d3.scaleBand for the categorical genre axis, and d3.scaleOrdinal with a custom color palette for the rating categories. The SVG rendering relies on D3 v7’s axis generators, and a custom tooltip displays the exact percentage for each segment on hover.

Apr 6, 2025

Loading thumbnail…

Question1.2

This bar chart displays the population of the top 20 countries in 2010, using a linear scale for population and a band scale for country names. The visualization renders horizontal bars in SVG, with red rectangles representing each country’s population, and includes axis labels for both population and countries. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is constructed using D3 v7’s `scaleLinear`, `scaleBand`, and `axisBottom`/`axisLeft` components to build the axes and marks.

Apr 6, 2025

Loading thumbnail…

Question1.1

This horizontal bar chart displays the population of ten countries in the year 2000, with each bar’s length encoding population size. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisBottom` and `d3.axisLeft` for ticks. Data is loaded asynchronously from a CSV via `d3.csv` and filtered to the top ten rows.

Apr 6, 2025

Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the 2020 population estimates for the top 30 countries, using a linear scale for population values and a band scale for country names. The visualization renders light green bars via SVG rectangles, with axes labeled "POPULATION-2020" and "Countries." It loads data from a CSV file using d3.csv, formats axis tick labels with d3.format to abbreviate values like millions and billions, and builds the chart using modular functions for axes and marks in d3.v7.

Apr 5, 2025