SreeKohaliPatel@my.unt.edu

Fork of Task 9 question2

This stacked area chart compares the distribution of IMDb ratings across six movie genres, showing the proportion of films in each rating band (from "below 5.0" to "above 8.5") for each genre. The chart uses a color-coded legend and an area chart with a basis curve interpolation to represent the stacked percentages, which sum to 1. The visualization is built with the D3.js library, version 7, using its `scaleBand` for the genre axis, `scaleLinear` for the percentage axis, and the `axisBottom` helper for the x-axis. Data is loaded from a CSV file via `d3.csv`.

Fork of Task 10 question 1

This example shows a pie chart of population data for the top ten countries, displaying each slice with a percentage label and a legend identifying the country. The chart is built with React and D3 version 5, using the `pie` and `arc` generators to compute the layout and path data, while `d3.schemeCategory10` assigns colors. It loads a CSV from a GitHub repository via `d3.csv`, transforms the population values, and renders the SVG dynamically through a React effect. The example also includes an inner radius and axis labels for styling and context.

Task 9 question 2

This stacked bar chart shows the distribution of IMDb rating levels across six movie genres, where each bar represents the percentage of films within a genre falling into one of five rating brackets. The chart reveals that genres like Action and Comedy have higher proportions of lower ratings, while Documentary and Animation show more balanced distributions. Hovering over any bar segment displays an exact percentage tooltip. The visualization uses D3.js v7 with a stacked bar layout, employing `d3.stack()` for data transformation and `d3.scaleOrdinal` for coloring. Data is loaded from a local CSV file containing genre-specific rating percentages, and the chart is rendered as SVG.

Task 9 question 1

Fork of Activity

Activity 6

Fork of Reusable

Activity 8

This gallery example demonstrates a reusable scatter plot visualization of the Iris dataset, rendered as an SVG using the D3 library (v6.7.0). The plot maps petal length on the x-axis and sepal length on the y-axis, with data points colored by species (skyblue for setosa, lightgreen for versicolor, and orange for virginica). The visualization includes a legend and axis labels, and is built using custom JavaScript functions that leverage D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. Data is loaded asynchronously from a remote CSV file using D3’s `csv` method.

Fork of Fork of Task8_Question4

This chart displays the maximum price for each electric car brand as a bubble, with both the vertical position and bubble size encoding the price value. A sequential color scale adds a third encoding of the same price dimension. The visualization loads CSV data from a remote GitHub repository, groups entries by brand, and renders them as an SVG bubble chart using D3 v7. It employs `d3.csv`, `d3.group`, `scaleBand`, `scaleSqrt`, and `scaleSequential` with the `interpolatePlasma` color scheme.

Fork of Task8_Question

This visualization displays the highest-priced electric vehicle for each brand, using a bubble chart where circle size and color encode price in euros. The data comes from an external CSV file, processed with d3.group and d3.max to aggregate by brand. The chart is rendered as SVG using d3.scaleBand, d3.scaleLinear, d3.scaleSqrt, and d3.scaleSequential with interpolatePlasma, with axes and labels generated via d3.axisBottom and d3.axisLeft.

Fork of Fork of Task8_Que4

This visualization displays the maximum price for each electric car brand in ascending order along the x-axis, with price in Euros on the y-axis and bubble size representing price magnitude. The chart uses D3 v7 with `d3.scaleBand` for the categorical brand axis, `d3.scaleLinear` for the price axis, and `d3.scaleSqrt` to map prices to bubble radii. A sequential plasma color scale encodes price values using `d3.interpolatePlasma`. Data comes from the ElectricCarData_Clean.csv file, loaded via `d3.csv`, and groups entries by brand to find maximum prices.

Fork of Task8_Question4

Question4

Fork of Question 4

question 4

This bubble chart shows the correlation between average horsepower and torque for different car makes, with bubble size encoding highway MPG and color distinguishing manufacturers. The visualization uses d3.csv to load the data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color assignment. Interactive tooltips appear on mouseover, and SVG circles render the data with animated hover effects via CSS transitions.

question 4

Question 4

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked bar chart, where each bar segment represents the proportion of ratings falling into five score ranges. The chart highlights how genres like Documentary skew toward higher ratings, while Action has a larger share of low ratings. Hovering over a bar segment reveals the exact percentage for that rating category within the genre, with all proportions summing to 1. The visualization is implemented with D3 v7, using SVG rendering, scales, and mouse event handlers for tooltip display.

question 4

This bar chart displays the 2020 population estimates for the 30 most populous countries. Population values are loaded from a remote CSV file using D3’s `csv` function, then rendered as SVG rectangles positioned by `scaleBand` for countries and `scaleLinear` for population. Both axes are drawn from reusable React components, with tick formatting converting large numbers into abbreviated ‘B’ for billions.

Activity 6_Task 3

This scatter plot visualizes the IRIS dataset, showing the relationship between petal length and petal width, with data points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). It uses D3 version 6's `csv` loader to fetch data from a GitHub repository, and employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the chart. The visualization renders circles as SVG elements, with marks projected via linear scales and margins calculated from the window dimensions.

activity6_Task 1

Activity6_Population-1

Fork of Question 4

This visualization shows the population of 30 countries in 2020 as a horizontal bar chart. Each bar represents a country, with its length proportional to population. The chart uses a React component structure, with D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file using D3's `csv` function, formatted with `format('.2s')`, and rendered as SVG rectangles. Tooltips display the exact population values.

question 4

question 3

This visualization uses a stacked dot plot to show the percentage distribution of IMDb movie ratings across six genres, revealing how genres like Documentary skew toward higher ratings while Action skews lower. Each genre row displays colored circles representing five rating bands, with hover interactions revealing exact percentages via a tooltip. Built with D3 v7, the chart uses ordinal color scaling, linear and band scales, and SVG rendering, with data loaded from a CSV file using d3.csv.

QUESTION 3

question 3

question 2

Activity6_Population-1

Activity6_Task4

Activity6_Task4

Activity6_Task 3.2

Fork of Activity6_Task3

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length and width to the x and y axes while encoding the species of each flower with distinct colors (skyblue, lightgreen, and orange). The plot is rendered as an SVG using D3 v6, with linear scales for both axes, axis labels for petal and sepal measurements, and circles representing individual data points. Data is loaded from a remote CSV file via D3's `csv` function.

Activity6_population_question1

This example demonstrates a basic HTML page that uses D3.js to display the text "Hello VizHub!" in a large, centered message. It loads D3 v5 from a CDN and uses the `select` API to locate the message div and set its text content. The page also imports a local ES6 module to define the message string, and a stylesheet controls the visual formatting. The code serves as a simple template for integrating D3 with local modules.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three flower species, which are colored skyblue, lightgreen, and orange. It loads CSV data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles as SVG elements. The visualization includes axes generated by `d3.axisLeft` and `d3.axisBottom`, with labels for the plotted dimensions, using D3 v6.

Activity6_Task3

Activity6_Task3

This scatter plot shows the relationship between sepal length and petal length for iris flowers, with each species distinguished by a different symbol shape. The visualization includes a custom shape legend and axis labels to clarify the data. Built with D3 v7, it uses `scaleLinear` for both axes and `scaleOrdinal` with `symbolsFill` to map species to symbol types, while `axisLeft` and `axisBottom` render the axes. The data is loaded from a remote CSV file containing the iris dataset.

Fork of Activity6_Task3

This example demonstrates the "Hello World" starting point for the VizHub V3 Runtime Environment, showcasing continuous hot reloading with interactive widgets. The code exports a `main` function that takes a `container` DIV element and sets its `innerHTML` to display text with a font size defined by the `fontSize` variable, which can be adjusted in real time by Alt-dragging the number in the editor. This streamlined setup eliminates the need for an `index.html` file, making it a simple foundation for building interactive visualizations.

Activity6_Task3

Activity-6_Task2

A stacked bar chart shows the percentage distribution of five IMDb rating bands within six movie genres, making genre’s impact on ratings visible. Each genre’s bar totals 100%, with segments colored by rating level. Built with D3 v7, the SVG visualization uses d3.stack, d3.scaleBand, and d3.scaleLinear, and displays exact percentages on hover via tooltips. Data comes from the attached CSV file, rendered with axes and labels styled by external CSS.

Activity-6_Task2

Activity-6

5 Buddhas

A field of small, randomly colored diamonds fills a black SVG canvas, while a single, large ornamental Buddha silhouette rendered as a complex SVG path sits at the center. The diamonds are generated through nested React `Array.map` calls, with each position, color, and rotational transform derived from `Math.random`. The Buddha itself is drawn from a hardcoded path using React’s SVG elements, creating a static, layered composition that contrasts chaotic geometric noise with a fixed, symmetrical figure.

5 buddhas

The visualization presents a field of overlapping, randomly colored triangular polygons layered over a white line-art depiction of a Buddha. It uses React and ReactDOM to render an SVG, with a nested `A.map()` structure generating over 20³ polygons whose coordinates and fill colors are determined by `Math.random()`. The Buddha itself is drawn as a detailed SVG path within a transformed group. The piece explores generative decay and visual noise against a structured, sacred form.

5 Buddhas

This visualization renders five overlapping, semi-transparent Buddhist-figure-like shapes constructed from hundreds of small, randomly positioned triangles. Built with React and SVG, the drawing uses nested map calls to generate vertices from a fixed numeric sequence, while each polygon receives random coordinates, colors from a high-value RGB range, and a 45-degree rotation. The core Buddha silhouette, defined as a complex SVG path, is overlaid and scaled at the center, creating a layered, kaleidoscopic effect against a black background. The work explores generative geometry, opacity, and color chaos within a structured frame.

Fork of Fork of 5 Buddhas

This example renders 2,000 semi-transparent polygons in a black-background React SVG, each randomly positioned and colored, layered over a large, hand-coded Buddha path. The visualization uses nested map functions to generate the polygon elements and applies random RGB fill values for a vibrant, chaotic effect. The Buddha shape is drawn from path data, scaled and translated, with the code drawing from a data array to create the overlapping composition. The fork is part of a series of variations, emphasizing experimental and generative visual outcomes within the React framework.

Fork of 5 Buddhas

This visualization, titled “Fork of 5 Buddhas,” uses React with SVG rendering to draw a dense, colorful field of semi-transparent polygons. The code iterates through nested arrays to generate hundreds of overlapping geometric shapes, each filled with a random RGB color, creating a vibrant, chaotic composition on a black background. A single large ornamental path depicting a Buddha figure is layered on top, with its position and scale fixed via an SVG transform. The piece balances generative randomness with structured form, highlighting the contrast between chaotic abstract shapes and the precise line work of the Buddha silhouette.

5 Buddhas

5 Buddhas presents a generative visualization where a central Buddhist-themed path drawing is multiplied and overlaid in a 5x5 grid pattern. The React application constructs this composition by nesting multiple array map operations that generate translucent polygons, each with randomized positioning and color values in red, green, and blue channels. Rendered as SVG within a black viewport, the single Buddha path element is transformed and scaled to create a striking, overlapping mandala-like arrangement, with the semi-transparent polygons creating depth and color blending effects against the dark background.