vinaykollapudi@my.unt.edu

act 7 q2

This example displays an area chart depicting the global number of internet users per year. The visualization loads CSV data from a remote GitHub repository, parsing the year and user counts before rendering. Built with D3.js v6, the code uses `d3.area()` and `d3.line()` to generate the filled region and an overlaid line, with axes created via `d3.axisBottom` and `d3.axisLeft`. The chart is rendered as an SVG within a 900x500 viewport.

Nov 6, 2024

act 7 q1

This example displays a pie chart of the top 10 countries by 2022 population, with a legend alongside the slices. It uses D3.js v7 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to load and process the dataset, generate the pie geometry, and assign categorical colors. The chart is rendered as SVG with text labels positioned via arc centroids, while a legend is built manually with `rect` and `text` elements. Data comes from a CSV hosted on GitHub.

Nov 6, 2024

Activity6

This stacked bar chart shows the distribution of IMDb ratings across six film genres, with each bar segment representing a rating range from "below 5.0" to "above 8.5" as a percentage. The visualization uses D3.v7’s `d3.stack()` to compute the stacked series, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.scaleOrdinal` for segment colors. Interactive tooltips display exact percentages on mouseover, and the chart loads data from a CSV file.

Oct 25, 2024

Fork of question 9

This bubble chart visualizes product pricing, sales volume, and customer ratings, with bubble size representing rating and color indicating category. The D3 v7 code loads data from CSV using `d3.csv`, scales values with `d3.scaleLinear` and `d3.scaleSqrt`, and renders SVG circles. Interactive tooltips appear on mouseover, while a legend identifies product categories using `d3.scaleOrdinal` with `d3.schemeCategory10`.

Oct 23, 2024

question 9

This example demonstrates how to set up a basic VizHub project that integrates D3.js and local ES6 modules. It displays the text “Hello VizHub!” centered on the page using D3’s `select` API to target the `#message` div and set its content. The code imports the `message` constant from a separate local module, `myMessage.js`, and styles it with CSS. It also includes a D3 selection, a numeric variable, and a regular expression to illustrate importing and using various JavaScript constructs.

Oct 23, 2024

tutorial 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. Each bubble’s position encodes horsepower on the x-axis and torque on the y-axis, while its size represents highway MPG, and color distinguishes car manufacturers. The chart, built with d3.v7’s SVG API, includes tooltips on mouseover, a legend for bubble size, and a color scale using d3.interpolateTurbo and d3.scaleOrdinal. Data is loaded from a CSV file, with animated hover effects to highlight individual bubbles.

Oct 23, 2024

question 6

A scatter plot displays Titanic passengers, mapping Fare on the x-axis and Age on the y-axis. Each passenger is represented by a star or diamond symbol, colored red for non-survivors and green for survivors, using the D3.js library with SVG rendering. The chart loads data from a CSV file via `d3.csv`, processes missing values, and uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for axes. Custom D3 symbols and a survival-based color scale reveal the relationship between fare, age, and survival outcome.

tutorial3.1

This example shows an interactive scatter plot of the Iris dataset, plotting sepal length against petal length and encoding flower species with different marker shapes. It loads D3 v7 via UNPKG and uses a modular ES6 structure with local modules for axes, scatter plot, and a custom shape legend. The visualization fetches CSV data, parses it with d3.csvParse, and renders SVG marks using d3.symbol and d3.scaleOrdinal with symbolsFill. Axes are generated with d3.axisLeft and d3.axisBottom.

tutorial3

This interactive scatter plot visualizes the Iris dataset, displaying petal length against petal width for individual flowers, with colors indicating species. Rendered as SVG, the plot uses D3 v6 functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data coordinates and draw axes. Data is loaded asynchronously from a CSV file via `d3.csv`, and each point is rendered as a circle with a fixed radius, colored by species. The chart fills the browser window and includes styled axis labels.

question 3

This example shows the distribution of IMDb ratings across six movie genres, broken into five rating bands from “below 5.0” to “above 8.5” as proportions of each genre’s total. A stacked bar chart uses `d3.stack` to layer the segments, with `d3.scaleBand` for genres on the y-axis and `d3.scaleLinear` for percentages on the x-axis. Hovering over any segment displays a tooltip, built with D3’s selection and transition methods, showing the exact genre and percentage. The data comes from a local CSV file, and the visualization renders as SVG with a legend positioned to the right.

question2

This example displays a horizontal bar chart comparing the populations of 20 countries in 2010, using React to render SVG elements. The code imports `scaleBand`, `scaleLinear`, and `max` from d3 to position bars and axes, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Population values are parsed from a remote CSV file using d3’s `csv` function and formatted with `.2s` notation (displaying billions as “B”). Bars are drawn as SVG rectangles with tooltips showing formatted values, and axes use blue tick lines and gray text.

question 1

This example visualizes the population of ten countries in the year 2000 using horizontal bar marks. It loads data from a remote CSV via the d3.csv API within React, slicing the dataset to the first ten rows. The React implementation uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with SVG rectangles drawn through the Marks component. Rendered as an SVG, the chart includes labeled axes, a custom tick formatter that converts values to billions, and tooltips using SVG `<title>` elements.

Activity6

This visualization displays population figures for 30 countries as a horizontal bar chart, with bars sized using a linear scale and countries arranged on a band scale. It uses D3 v5 utilities like `scaleBand` and `scaleLinear` for positioning, while React 16.9 renders the SVG elements through reusable axis and mark components. The data is loaded from a remote CSV file via D3’s `csv` method, and tooltips show formatted population values using D3’s `format` function, with axis labels styled via CSS.

fork 2 buddhas

A decorative Buddha silhouette rendered in violet is overlaid on a background image of flowers, with the entire composition scaled and positioned within an SVG canvas. The code uses React to generate nested arrays that map to multiple overlapping `<image>` elements, repeating the flower background, while a complex SVG `<path>` defines the Buddha shape. The visualization layers static vector graphics atop a photographic raster image, relying on React’s declarative rendering and SVG transforms.

Oct 19, 2024

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

fork 2 buddhas

Fork 2 buddhas renders two overlapping Buddha silhouettes as black and red line drawings against a dark background. The illustration combines a large central Buddha path with a smaller, rotated variant, layered with a grid of randomly placed colored circles that scatter across the canvas. Built with React and rendered as SVG, the code maps over nested arrays to generate circles with randomized positions and RGB fill values, while the Buddha shapes use hardcoded path data with a stroke width of five.

Fork of 5 buddas

This work visualizes five overlapping iterations of a Buddha silhouette, each rendered as a complex SVG path and then duplicated with varying colors and opacity to create a layered, ghosting effect. The piece is generated using React and is drawn as vector graphics. The code defines a grid of additional polygon primitives—each with randomized coordinates, fill colors, and rotations—that are scattered across the canvas. The display combines the static, detailed image of the Buddha with a dynamic field of colorful, calculated shapes, set against a black background.

Oct 15, 2024

Fork of 5 buddas

A generative composition of 21 translucent, randomly colored circles is drawn over a black background, each positioned by a nested `A.map` loop that multiplies an index by 100 and a random value, producing overlapping forms. A single Buddha silhouette, defined as an SVG `path` with detailed cubic Bézier coordinates, is rendered inside a `<g>` group with a `translate` and `scale` transform, layered atop the circles. The visualization uses React and ReactDOM to construct the SVG output, with styling applied via CSS in the HTML file.

Oct 15, 2024