jaswanthichowdarykalapala@my.unt.edu

Tutorial Task 9

This interactive scatter plot, built with D3.js, animates through the Iris dataset, sequentially plotting each of the four flower measurements on the x-axis while sepal length remains on the y-axis. The visualization uses a circular marker shape for each data point, with colors distinguishing the three iris species. The code employs D3’s `scaleLinear` and `axisBottom` for scaling and axis rendering, and `setInterval` drives the looping animation. A custom legend explains the color mapping, and the plot is rendered as an SVG.

TASK 9_Question 2

This area chart displays graduate demographic totals over time, with the x-axis representing years and the y-axis showing the count. The visualization uses a steelblue filled path to encode the trend. The code loads CSV data from a GitHub repository, converts numeric strings, and then employs D3's `scaleLinear`, `area`, `axisBottom`, and `axisLeft` APIs within an SVG rendering. Axes are labeled "Year" and "Demographics.Total Count," with data fetched via `d3.csv` from the specified URL and rendered using D3 v7.

task 9 Question 1

Tutorial 8 Task 4

Tutorial 8 task 3.2

This example presents a scatter plot of the Iris flower dataset, visualizing sepal length against petal length while grouping data points by species through distinct marker shapes. Implemented using D3.js v7, the visualization employs d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to position points and assign shape encodings. The code demonstrates modular architecture with reusable axis and legend components, alongside asynchronous data loading via the Fetch API and CSV parsing through d3.csvParse. An interactive shape legend displays categorical values, all rendered within a responsive full-window SVG.

Tutorial 8 task 3.1

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample. The visualization encodes species through distinct colors, with sepal length and width values represented by the circle radii. The example loads data from a remote CSV file and uses D3 version 6’s scaleLinear, extent, and axis functions to create the chart. It renders the plot as an SVG, applying a short syntax for data-driven circle creation.

Tutorial 8 Task 2

A stacked horizontal bar chart displays the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating brackets from “below 5.0” to “above 8.5.” The chart uses D3 v7’s `d3.stack()` to compute the stacked series and `d3.scaleOrdinal` for color mapping, rendering SVG rectangles via data joins. Axis labels and tick formatting are handled with `d3.axisBottom` and `d3.axisLeft`, while hover interactions show a custom tooltip with precise percentages. The data originates from a CSV file loaded and parsed by D3.

Tutorial 8 Task1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, with a green fill, blue axis ticks, and a custom “POPULATION-2020” axis label. It loads data from a remote CSV via `d3.csv` and uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `max` to set the domain. The React components render SVG groups for the bottom and left axes, while each bar’s `<rect>` includes a `<title>` tooltip formatted with `d3.format('.2s')`. D3 v5 is loaded via UNPKG.

Scatter plot

This interactive scatter plot, rendered with SVG and animation, visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position is determined by its horsepower (x-axis) and torque (y-axis), while its size and color are scaled by highway MPG and car make, respectively. Mouseover interactions trigger a tooltip that displays the make, implemented with D3 event handlers. The visualization uses `d3.scaleLinear` for axes and bubble size, and `d3.scaleOrdinal` for color mapping, with data loaded from a CSV file.

task 8 task 4

This bubble chart displays the relationship between glucose levels, beverage ratings, and calorie counts across seven beverage brands. The x-axis maps glucose levels, the y-axis shows beverage ratings, and circle size encodes calories. Data is loaded from a CSV file using d3.csv, while d3.scaleLinear and d3.scaleOrdinal position the points and assign colors based on beverage type. The visualization renders as SVG with axis labels, a calorie size legend, and a color-coded brand legend.

task 8 task 3

Task 8 task 2

A stacked bar chart shows the distribution of food ratings across five percentage categories, from below 5.0 to above 8.5, for items like panipuri and Chickenbiryani. The chart uses d3.stack() to create stacked segments, with colors assigned via d3.scaleOrdinal. d3.axisBottom and d3.axisLeft render the axes, while mouseover events trigger a tooltip displaying exact percentages. Data comes from a CSV file, rendered as SVG in D3 v7.

Fork of Fork of Task 8_Task 1.2

This bar chart displays the population of 20 countries in 2010, sourced from a CSV loaded via the `d3.csv` API. The React application uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Horizontal bar marks are rendered as SVG `<rect>` elements, with `d3.format` applied to axis tick labels, showing values in billions. The code demonstrates local ES6 module imports and component composition.

Fork of Task 8_Task 1

Task 8_Task 1

Task 8

This example demonstrates VizHub’s ability to load D3 via UNPKG and use ES6 modules for local code organization. It imports the `select` function from D3 and a custom `message` constant from a local `myMessage.js` module. The code uses `select('#message').text(message)` to set the text of a centered `<div>` styled with CSS. The visualization simply displays “Hello VizHub!” in large type, with no data or animation involved.

Fork of 5 Buddhas

This visualization, titled "Fork of 5 Buddhas," layers a dense grid of rotated, semi-transparent SVG polygons atop an intricate line drawing of the Buddha. The polygons are generated through nested loops with randomized positions, colors, and rotations, creating a shimmering, chaotic field of shapes. The Buddha path, drawn in thick black strokes, is overlaid in the center, and its bold form contrasts with the colorful, overlapping geometric pattern. The piece uses a black background and vibrant, randomly assigned RGB colors, resulting in a visually striking fusion of computational randomness and spiritual iconography. The rendering is done in React with SVG, and the composition explores themes of order within chaos and the interplay between digital precision and organic form.

5 Buddhas

This visualization, titled "5 Buddhas," presents a grid of overlapping diamond-shaped polygons in a field of randomly distributed points, rendered as an SVG via React. The composition layers 20×20 points per side, with each point drawn as a rotated square and colored using bright, randomly generated RGB values against a black background. At the center, a detailed golden Buddha silhouette is overlaid, creating a striking contrast with the colorful geometric noise. The piece explores the tension between algorithmic chaos and sacred geometry, where the random placement and vivid colors of the diamonds surround and highlight the meditative figure. The work is a remix of prior "Buddha in colors" examples, iterating on the generative use of React's mapping to create a visually dense, vibrant field punctuated by a central recognizable form.