nikhithadadi@my.unt.edu

Fruits

This pie chart visualizes the quantity distribution of different fruit items, with each slice labeled by its item name and corresponding value. The visualization loads data from an external CSV file containing fruit quantities and renders the chart as an SVG. The code uses the D3.js v7 library, specifically employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `schemeCategory10` color palette. A legend is generated from the data domain, and the chart is centered within an SVG canvas using coordinate transformations.

Apr 13, 2024

Activity6_Q4

This bubble chart visualizes the relationship between researchers’ citation counts, ages, and paper publication numbers, with bubble size encoding publication count and color distinguishing individual researchers. The chart uses D3.js v7 to load CSV data, render SVG circles, and implement interactive tooltips that display full details on hover. Axes, labels, and a custom legend are built using D3 scales like `scaleLinear` and `scaleOrdinal`, with mouse event handlers controlling tooltip visibility and position.

Activity6_Q3.2

This scatter plot visualizes IPL player statistics, showing the relationship between total matches played and total runs scored. Each point represents a player, with the shape of the marker indicating their team, as defined by a D3 ordinal scale using symbols like circles, squares, and triangles. The chart is built with D3 v6, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG paths for rendering the symbols. Data is loaded from a remote CSV file containing player names, teams, and performance metrics.

Activity6_Q3.1

This scatter plot visualizes IPL batting data, showing the relationship between total matches played and total runs scored for individual players. Each circle represents a player, colored by team affiliation, with hoverable details revealing their country, average, and innings played. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.extent` for domain calculation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color assignment. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted IPL dataset.

Activity6_Q2

This visualization shows the distribution of cinema ratings across six movies, with each bar divided into five rating segments (below 5.0, 5.0-6.5, 6.5-7.5, 7.5-8.5, and above 8.5) as percentages that sum to 100%. The stacked bar chart uses d3.stack() to group the horizontal bars, d3.scaleLinear for the percentage axis, and d3.scaleBand for movie categories. Interactive tooltips display exact percentages on mouseover using event handlers, while SVG rectangles with a color scale make each rating segment distinct. The data comes from the provided Cindata.csv file.

Activity6_q1.2

A horizontal bar chart displays the population of 20 countries in 2010, with each bar’s length proportional to its population value. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names and population values to pixel positions. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and axes are built using custom React components. Tick labels are formatted with `d3.format` to abbreviate large numbers (e.g., converting “G” to “B” for billions).

Activity6_Question1.1

This bar chart displays the populations of ten countries in the year 2000, using horizontal bars colored in light green. The chart is built with React and D3 v5, rendering as an SVG. It uses `d3.scaleBand` for the categorical y-axis (countries) and `d3.scaleLinear` for the quantitative x-axis (population), with tick marks styled via CSS. Population values are formatted using `d3.format` and shown as tooltips. Data is loaded from a remote CSV file and processed with `d3.csv`.

Activity6_q1.2

This example demonstrates the capabilities of VizHub by using D3.js to dynamically update the text content of a webpage element. It loads D3 v5 from UNPKG and uses the `select` function from the `d3` module to target and modify the text of the `#message` div, setting it to the string “Hello VizHub!”, which is exported from a local ES6 module. The visualization is essentially a text-based output styled with CSS, showcasing how D3 can be combined with modular JavaScript imports within the VizHub environment.

Activity6_q1.2

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, using data from a CSV file. Each bubble's x-position, y-position, and radius are mapped to horsepower, torque, and highway MPG, respectively, while color encodes the make. The visualization employs D3.js v7 with SVG and animation, scaling bubble size and applying a turbo color palette. Hovering reveals a tooltip, and legends for both size and color are included.

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, virginica). The visualization uses d3.csv to load the data, d3.scaleLinear to map values to coordinates, and d3.axisLeft/d3.axisBottom for axes. The SVG circles are positioned using the scaled dimensions, while the code also reads sepal measurements but does not use them in the final rendering. The plot is displayed with custom font styling and colored axis labels.

Activity6_Task3.2

This example builds an interactive scatter plot of the Iris dataset, showing sepal length against petal length with points shaped by species. It loads data via `fetch` and `csvParse` from D3, then uses `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to map values to positions and shapes. The visualization includes custom axis labels and a shape legend, all rendered with D3 v7 selections and data joins, with layout sized to the viewport.

Activity6_Task3.2

This example demonstrates a minimal VizHub setup that renders a static HTML page with a centered text message. It shows how to import D3.js functions and local ES6 modules within a project structure. The code uses `import { select } from 'd3'` to target a DOM element and sets its text content using `select('#message').text()`, while also importing a string from the local `myMessage.js` module. The page loads D3 v5 from a CDN and applies CSS styling to display the message prominently.

Activity3_Task3.1

This visualization displays the classic Iris dataset using a scatter plot, with petal length and petal width mapped to the x and y axes. The plot uses colored circles to distinguish the three iris species: setosa in sky blue, versicolor in light green, and virginica in orange. Built with D3 version 6.7.0, the chart renders as an SVG and loads data from a CSV file via the `d3.csv` function. The code utilizes `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for axis generation, and includes custom styling for the title and tick labels.

Activity3_Task3.1

This example demonstrates a minimal D3.js setup that renders a text message into a web page. The code imports the `select` function from D3 and a local ES6 module to compose the displayed string. It uses `select('#message').text(message)` to set the content of a styled HTML div, with the message defined in a separate module. The page loads D3 v5 from a CDN and shows basic integration of local modules, CSS, and library imports in a VizHub project structure.

Activity6_Task2

This stacked bar chart visualizes the percentage distribution of IMDb movie ratings across six genres, with each bar segment representing a rating category from "below 5.0" to "above 8.5". The visualization uses D3.js v7 with SVG rendering, employing `d3.stack` for the stacked segments, `d3.scaleBand` for the categorical genre axis, and `d3.scaleLinear` for the percentage axis. Interactive tooltips display exact percentages on hover, while the color scheme uses a ordinal scale with distinct hues for each rating level.

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, showing the proportion of films in each rating category from "below 5.0" to "above 8.5". The y-axis lists genres, while the x-axis represents the percentage of each rating level, with color-coded segments per category. Interactive tooltips, implemented with D3's `d3.axisBottom`, `d3.scaleOrdinal`, and `d3.stack`, display precise percentages on hover, with bars using `d3.select` and mouse events to trigger opacity changes and tooltip updates. The visualization uses SVG rendering within an HTML canvas.

Activity 6_Task 1

This visualization displays a horizontal bar chart comparing the populations of 30 countries for the year 2020, sourced from a GitHub-hosted CSV file. The bars are rendered as SVG rectangles using React, with D3 v5's `scaleBand` and `scaleLinear` for positioning along the categorical and linear axes. The chart’s axes are generated with the `AxisBottom` and `AxisLeft` components, which use D3’s scale ticks, and each bar includes a tooltip showing the population value formatted with `d3.format`. The data is loaded asynchronously via `d3.csv` and processed to multiply the 2020 values by 1000.

6 Buddhas

Six Buddhas overlap in a diagonal stack across a floral background image, each rendered as a violet SVG path with white outlines and varying scales and rotations. The visualization uses React to render six identical Buddha path geometries, transformed via SVG `translate` and `scale` attributes to create layered depth. The code employs ReactDOM for mounting and SVG path data for the figure outlines, with each copy receiving distinct positioning and opacity settings against the black page backdrop.

6 Buddha

This visualization displays twenty concentric layers of small circles, each randomly positioned and colored with translucent RGB values, layered over a large Buddha silhouette rendered as an SVG path. A background image of green flowers sits behind the composition, with the entire scene styled through CSS. The visualization uses React to render the SVG elements, mapping over an array of numbers to generate approximately 8,000 circles with random coordinates and opacity, while the Buddha path is drawn using SVG path data.

5 Buddha

The visualization displays five overlapping Buddha silhouettes, each rendered as a black-outlined path, floating against a black background. Scattered colored circles, randomly positioned and colored with red, green, and blue values generated via `Math.random()`, are layered on top. Built with React and ReactDOM, the SVG paths are drawn using embedded path data, while the circles are mapped from a nested array structure.

5 Buddha

5 Buddhas

A dense field of small, randomly colored and rotated polygons forms a noisy backdrop behind five overlapping Buddha silhouettes. The code renders SVG shapes using React components, with each polygon’s position, fill, and transform derived from repeated calls to `Math.random()`. The Buddha paths are hardcoded SVG path data, scaled and translated via `transform` attributes. The visualization demonstrates generative randomness juxtaposed with intricate, fixed line art in a black viewport.