V

VenkataSaisrivishnuBatchu@my.unt.edu

@Srivishnu2119·18 public vizzes

Loading thumbnail…

Ques2

This D3.js v7 example displays two overlapping area charts comparing Quantity1 and Quantity2 across categories and subcategories, using a vertical side-by-side legend to identify each series. The visualization fetches CSV data from a GitHub-hosted dataset and maps subcategories to a band scale on the x-axis while quantities use a linear scale on the y-axis. The code employs `d3.scaleBand`, `d3.scaleLinear`, `d3.area`, `d3.axisBottom`, and `d3.axisLeft` to construct the SVG rendering. Colored fills from `d3.schemeCategory10` distinguish the two quantities, with axes labeled "Subcategory" and "Quantity" and x-axis labels rotated for readability.

Loading thumbnail…

Ques1

A pie chart visualizes the sales distribution of various fruits, fetched as CSV data from a GitHub repository. The chart renders each fruit as a colored slice with a label and value, accompanied by a legend. Built with D3 v7, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `d3.schemeSet2` color palette, drawing SVG paths and text within a 400x400 pixel canvas.

Loading thumbnail…

Question4-Bubble chart1

This bubble chart visualizes the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) for various vehicle types, with each bubble's color representing its manufacturer. The chart uses D3.js v7 with SVG rendering and includes interactivity through mouseover events that display a tooltip showing the vehicle's make. The visualization implements d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal for color assignment, and d3.interpolateTurbo for the color palette. A legend displays the mapping between bubble size and mileage values, while the data is loaded from a CSV file.

Loading thumbnail…

Question4-Bubble chart

This bubble chart visualizes the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) for 15 car manufacturers. Each bubble is colored by manufacturer using `d3.scaleOrdinal` with an interpolated turbo color scheme. The visualization includes an interactive tooltip that displays the manufacturer name on mouseover, implemented with D3 event handlers. A legend shows representative bubble sizes for 20 and 40 MPG values, alongside a color-coded manufacturer key. The chart is rendered as SVG with `d3.axisBottom` and `d3.axisLeft` for axes, and uses `d3.csv` to load the dataset.

Loading thumbnail…

Task4-Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across different car makes. Each circle’s position encodes horsepower and torque, while its radius represents highway MPG and its color distinguishes the manufacturer. The visualization uses d3.csv to load data, d3.scaleLinear for axes and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, and a legend explains both bubble size and color categories. The chart is rendered in SVG with hover animations and opacity changes defined in CSS.

Loading thumbnail…

Question3 of Activity6

This scatter plot visualizes the IRIS dataset, displaying the relationship between the X1 and X2 coordinates for different categories, which are distinguished by color. The visualization uses D3.js v6 with SVG rendering, employing `d3.csv` to load data, `scaleLinear` for the axes, and `scaleOrdinal` with `d3.schemeCategory10` to color the data points by their categorical Y values. The plot also includes labeled axes using `axisLeft` and `axisBottom`. The circle elements are positioned using the scaled X1 and X2 values, with each category receiving a distinct color.

Loading thumbnail…

Task3.1 of Activity6

This scatter plot visualizes the Iris dataset, showing petal length against petal width with points colored by species (setosa in skyblue, versicolor in lightgreen, and virginica in orange). The code loads CSV data from a GitHub repository using d3.csv, then applies d3.scaleLinear with d3.extent to map the quantitative fields to SVG coordinates. Circles are rendered via SVG with d3.selectAll and .join, while axes are drawn using d3.axisLeft and d3.axisBottom, with axis labels and a styled title completing the view.

Loading thumbnail…

Task3.2 of Activity6

This example displays the Iris dataset as an interactive scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Different species are encoded through distinct shapes using D3’s `symbol` generator and `scaleOrdinal` with `symbolsFill`, with a custom legend indicating the shape meanings. The visualization is built with D3 v7, using modular functions for axes and legends, and loads the data asynchronously from a GitHub-hosted CSV file.

Loading thumbnail…

Question2 of Activity6

This stacked bar chart displays fruit sales across four years, with each bar segmented by year and colored by fruit category. It uses D3 v7’s `d3.stack()` to compute the stacked segments, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the sales x-axis. Mouseover events trigger a custom tooltip showing the exact sales value per segment, while a legend identifies the year colors. The data is loaded from a CSV file and rendered as SVG.

Loading thumbnail…

Task2 of Activity6

This stacked bar chart depicts the distribution of IMDb movie ratings across six genres, showing the proportion of films within each rating category from "below 5.0" to "above 8.5". Each horizontal bar represents a genre, segmented into rating brackets with distinct colors, and hovering over a segment displays the exact percentage via a tooltip. Built with D3 v7, the visualization uses `d3.stack()` for data stacking, `d3.scaleOrdinal` for color mapping, and SVG rendering. Data is loaded from a CSV file, with axes labeled and a legend positioned on the right.

Loading thumbnail…

Question1.2

A horizontal bar chart displays the top 20 countries by 2010 population, using a CSV dataset loaded via D3's `csv` function. The chart is rendered as SVG with React components, mapping country names to a `scaleBand` y-axis and population values to a `scaleLinear` x-axis. Data values are formatted with D3's `format` function, converting values into billions with a 'B' suffix. Hovering over each rectangular bar reveals a tooltip with the population value, while blue tick lines and green bars provide clear visual separation.

Loading thumbnail…

Question1.1

This example displays a horizontal bar chart of the populations of ten countries in the year 2000, using a green fill for each bar and rendering the chart with SVG. The React-based visualization relies on D3 version 5 modules—`scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and `format` to abbreviate population values (e.g., converting "G" to "B"). Data is loaded from a remote CSV via `d3.csv`, and tooltips are implemented using SVG `<title>` elements within each rectangle mark.

Loading thumbnail…

Task1 of Activity6

A horizontal bar chart displays the 2020 population estimates for 30 countries, sorted by country name. The chart is rendered as a static SVG using React and D3 v5, with bars colored green and blue tick marks. Population values are loaded from a remote CSV file and formatted in a compact SI notation. The implementation uses D3 scales, including `scaleBand` and `scaleLinear`, to map data to coordinates, and custom React components for axes and marks, with a tooltip showing the formatted population on hover.

Loading thumbnail…

Six Buddha reflections

Six Buddha reflections is a generative SVG artwork rendered with React, where a single Buddha path is replicated six times and layered with semi-transparent fills and random color assignments. The visualization is built using React’s declarative component model, mapping over arrays to produce multiple overlapping `path` and `null` elements, drawing from the original Buddha path data embedded in the code. The background is a photographic flower image, and the Buddha forms are scaled and translated to create a kaleidoscopic, mirrored effect.

Loading thumbnail…

Six buddhas

Six buddhas presents a chaotic, generative composition of overlapping Buddha silhouettes rendered as black-and-white SVG paths against a black background, accompanied by a dense scatter of small colored circles. The React code maps over an array to generate hundreds of circles with random positions, radii, and RGB fill values, while a large Buddha path is drawn with a fixed transform. It uses React and ReactDOM for rendering, with SVG elements defined directly in JSX.

Loading thumbnail…

6 Buddhas

Six Buddhas is a generative SVG artwork rendered with React. It layers hundreds of semi-transparent, randomly colored circles atop six identical Buddha outline paths, creating a dense, overlapping visual effect. The paths are drawn from hardcoded SVG path data, while the circles use `Math.random()` to determine their positions, colors, and opacity, producing a unique composition each time the code runs. The scene is set on a black background within a fixed 960 by 1000 viewport, with the Buddha figures scaled and translated to overlap.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes form a chaotic mandala-like composition on a black background, rendered in SVG with vibrant, randomized RGB fills. The code generates thousands of rotated diamond polygons using nested `map` loops with `Math.random()` to determine positions and colors, creating dense visual noise. A separate array drives cube calculations, while React 16.10 renders the SVG elements into the DOM. The piece layers these abstract shapes beneath a detailed Buddha path, blending generative randomness with a fixed religious icon.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes form a chaotic mandala-like composition on a black background, rendered in SVG with vibrant, randomized RGB fills. The code generates thousands of rotated diamond polygons using nested `map` loops with `Math.random()` to determine positions and colors, creating dense visual noise. A separate array drives cube calculations, while React 16.10 renders the SVG elements into the DOM. The piece layers these abstract shapes beneath a detailed Buddha path, blending generative randomness with a fixed religious icon.