sathvikavancha@my.unt.edu

Activity 7 Question-1

This pie chart displays sales amounts across five product categories: electronic devices, furniture, clothing, toys, and groceries. Groceries lead with 89.43, while toys have the smallest share at 23.78. The visualization uses Chart.js to render the pie on an HTML canvas element, configuring a responsive layout with a top-positioned legend and hover offset. Data is hardcoded in the script, with category labels and sales values paired to distinct background colors.

Nov 6, 2024

ACTIVITY 7 TUTORIAL-1

This animated scatter plot visualizes the Iris flower dataset, cycling through different feature combinations on the x-axis while mapping species to color. Built with D3.js v6, it uses the reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes. The `setInterval` call updates the x-value binding every few seconds, while SVG circles are joined and re-positioned. The code loads CSV data via `d3.csv` and demonstrates ES6 module imports, with custom styling for legends, labels, and the title.

Nov 5, 2024

question-9

This interactive bubble chart explores the relationship between temperature, humidity, and pressure across US states using SVG and animation. Each circle encodes temperature on the x-axis, humidity on the y-axis, and pressure through its radius, with colors assigned via `d3.interpolateTurbo` and tooltips using `d3.axisBottom` and `d3.axisLeft`. The visualization, built with d3.v7, includes a legend for pressure values and employs a `d3.scaleLinear` for bubble sizing, reading data from `bubblechart.csv`.

Activity 6_Task-4

This bubble chart shows the correlation between average horsepower, average torque, and highway MPG across 31 car makes, with each circle’s position encoding the first two variables and its size representing the third. The color of each bubble corresponds to a specific make, using a continuous turbo color scale mapped across the dataset. Built with D3 v7, the chart renders as an SVG and includes interactive tooltips that display the car make on mouseover, along with a legend for bubble size and color.

question-6

This scatter plot visualizes the relationship between apple size and weight, with data from the apple_quality.csv dataset. Blue and yellow circles differentiate good and bad quality apples, revealing potential clustering patterns. The visualization uses D3.js version 6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load remote CSV data and render the SVG chart. Axis labels for Weight and Size are included, with the figure sized to fill the browser window.

tutorial3.2

This scatter plot visualizes the Iris dataset, displaying sepal length against petal length, with species differentiated by filled symbols from a shape legend. The visualization uses D3 version 7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `axisLeft`/`axisBottom` for axes, while fetching the CSV data from GitHub. The code demonstrates the VizHub V3 runtime with a `main` entry point, interactive widgets for real-time updates, and the `state`/`setState` pattern for immutable state management.

Tutorial-3

This scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions with color-coded species. It loads the data via D3’s `csv` function from a GitHub gist and uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to build the axes. Circles are drawn in SVG with the `join` pattern, each colored by species (setosa, versicolor, or virginica). Axis labels are added as SVG text, with the visualization sized to the full window.

Tutorial-2 Q3

This stacked bar chart displays the distribution of movie ratings across five genre categories, with each bar segmented into five rating ranges from below 5 to above 8.5. The visualization uses d3.stack() to compute layered segments, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the percentage-based y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. Data is embedded directly in the HTML, and axes are formatted using d3.axisLeft and d3.axisBottom.

Tutorial-2

This example shows the distribution of movie ratings across six genres using a stacked horizontal bar chart. Each bar is divided into five rating categories, with colors distinguishing the ranges. The visualization uses D3 v7 APIs including `d3.scaleLinear`, `d3.scaleBand`, and `d3.stack` to process and render the data from a CSV file. Hovering over a segment reveals the exact percentage for that genre and rating category via a tooltip. The chart is rendered as an SVG with styled text and custom color scales.

Tutorial-2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, breaking down percentages into five rating brackets from below 5.0 to above 8.5. The visualization uses D3 v7’s `d3.stack()` to compose the bars, with `d3.scaleOrdinal` assigning colors and `d3.scaleBand` positioning genres along the vertical axis. Mouse interactions trigger tooltips that display precise percentage values, while the underlying data comes from a CSV file depicting rating proportions for documentary, drama, comedy, romance, animation, and action films.

Activity 6 question-2

This example displays a horizontal bar chart of the top 20 countries by 2010 population, sourced from a CSV file hosted on GitHub. The visualization uses React to render SVG elements, with D3's `scaleBand` and `scaleLinear` defining the chart’s scales. Axes are custom-built components that generate ticks and labels, while each bar includes a native SVG `<title>` element for hover tooltips. Population values are formatted using D3’s `format` utility, abbreviating large numbers to billions.

Activity 6 question-1

This bar chart displays population estimates for ten countries in the year 2000, sorted from largest to smallest. The visualization uses React to render an SVG with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. Data is loaded asynchronously from a CSV file using d3.csv, with population values multiplied by 1000 for display. Bars are green rectangles, and hover tooltips show formatted values using d3.format.

Activity 6

This bar chart displays the population figures for 30 countries in 2020, with countries listed on the vertical axis and population on the horizontal axis. The visualization uses React to render SVG elements, with D3 v5 functions such as `scaleBand` and `scaleLinear` for scaling, and `csv` for loading data from a GitHub-hosted CSV file. Tooltips reveal precise values formatted using D3's `format` function, and the chart includes custom axis components.

Reflections

The visualization displays a layered, generative Buddha-like figure rendered as a complex SVG path, set against a floral background image. The artwork is built using React and SVG, with the path data describing the Buddha’s silhouette. Overlaid on this are numerous small, semi-transparent colored rectangles, randomly positioned via nested array maps and `Math.random()` calls, creating a scattered, decorative effect. The code imports React and ReactDOM, and the page’s styling uses an inline CSS background, while the rendering relies on SVG’s `<path>` and `<g>` elements.

6 reflections

This visualization presents a decorative, flower-background composition built with React and SVG, featuring overlapping circular elements and an elaborate Buddha silhouette path. The code generates a dense field of semi-transparent, randomly colored circles using nested array maps, while the main figure is rendered as a complex SVG path transformed and scaled within a grouped element. A flower-themed background image is applied via CSS, and the visualization relies on React's rendering capabilities to layer these SVG components in a static, ornamental arrangement.

Reflections

This example creates an overlapping, multi-colored Buddha pattern using React and an SVG-based rendering approach. It displays a large ornamental figure formed by repeatedly layering translucent shapes, with a floral background image applied to the page body. The visualization uses React 16.10 components to render the geometric composition, and the code includes d3.forceSimulation and d3.geoPath APIs for generating complex, overlapping Buddha outlines. The result is a vibrant, kaleidoscopic visual effect where the Buddha figure emerges through the accumulation of colored layers, set against the natural flower backdrop.

6 Buddha

A colorful, generative visualization displays hundreds of small, randomly placed and rotated circles in vivid RGB colors across a 960 by 1000 SVG canvas, layered over a single large, detailed path depicting the Buddha. The circles’ coordinates, colors, and opacity are computed using JavaScript’s `Math.random` within React’s `map` functions, while the static Buddha silhouette is drawn using an SVG `path` element. The project runs on React 16.10 and renders all graphics as SVG, with a black background and no interactive behavior.

6 Reflections

A Buddha silhouette is rendered as an SVG path on a black background, with hundreds of semi-transparent colored circles scattered across the canvas using randomized positions and RGB fill values. The visualization combines a static trace of the image with a generative overlay of points, produced through nested React `.map()` loops that iterate over an array of numbers to place each circle. The code relies on React’s `ReactDOM` for rendering and SVG elements like `<circle>` and `<path>` for the final output.

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of tiny, semi-transparent colored circles overlaps to form a layered, abstract composition. On top of this field, a single, large, multi-colored outline of the Buddha's profile is rendered as a complex SVG path, creating a striking contrast against the randomized point cloud. The visualization is built with React and rendered as SVG, using nested map functions to generate the scattered circles and a hardcoded path for the Buddha figure.

6 Reflections

This example arranges six copies of a Buddha image into a reflective grid pattern on an HTML5 Canvas. The original image appears at the top-left, with copies placed to its right and below, creating a symmetrical layout. Additional copies are mirrored using Canvas scale and restore transforms to flip the image horizontally and vertically, simulating reflections across axes. The code loads the image via the Image API and draws all placements with drawImage, using pixel coordinates to maintain exact spacing without external libraries.

6 Reflections

This visualization displays a dense field of 8,000 semi-transparent, randomly colored circles layered over a single, large orange vector path depicting the Buddha. The circles scatter across a black canvas, creating a textured, dynamic backdrop. The Buddha path, which uses SVG path data, is rendered prominently through React’s SVG capabilities. Both the circles’ positions and colors are generated using JavaScript’s `Math.random()`, while the path and circle elements are produced via React’s declarative mapping, with the scene container using an SVG transform for scaling.

6 Reflections

A black background displays six white outline renderings of a Buddha silhouette, each drawn with a single SVG path and positioned with increasing translation and scale transformations. A dense scatter of small, randomly colored circles with varying opacity forms a colorful background field. The React application uses JSX to generate SVG elements, with nested `map` calls creating the circle arrays and a separate map applying the six Buddha path instances.

6 Reflections

A hand-drawn Buddha path is layered beneath thousands of semi-transparent, randomly colored circles whose positions are generated by nested loops over an array of 0–20, producing a pointillist backdrop. React renders the SVG elements, while the circle coordinates and RGB fills rely on `Math.random` for stochastic placement and color variation. The single large `path` element is scaled and translated via a `transform` attribute, creating a chaotic, polychromatic composition against a black background.