VENKATESWAR RAO CHINTA

Activity7_Question1

This example shows a pie chart of budget allocation percentages across departments within an organization, with each slice labeled by its value and a legend mapping colors to department names. The code loads CSV data from a GitHub URL, converts budget values to numbers, and uses `d3.pie` and `d3.arc` to compute and draw the chart’s SVG paths. It applies `d3.scaleOrdinal` for slice colors, appends text labels using arc centroid positions, and renders a legend with rectangles and text. The visualization is static, with no interactive features or transitions.

Nov 5, 2024

Activity7_Question1

This pie chart visualizes programming language usage by developers, with each slice sized by its percentage of the total. The chart uses D3 v5's `pie` and `arc` generators to create SVG paths, with `scaleOrdinal` assigning colors from a predefined array. Percentage labels are positioned using `arcGenerator.centroid`, and a legend displays language names and values. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the `format` function formats percentage values.

Nov 5, 2024

Question4-Venkat

This bubble chart visualizes the relationship between average power, revolution, and mileage across 31 models. Circles positioned on the x/y axes represent power and revolution, while their radius encodes mileage. Color scales with the categorical "Ready" field using an interpolated Turbo colormap. Built with D3 v7, the SVG visualization includes interactive tooltips and a size-based legend, reading data from Question4.csv.

Question-3

A scatter plot visualizes the Alcohol dataset, mapping Ash content on the x-axis against Malic Acid on the y-axis, with each point colored by class (skyblue, lightgreen, or orange). The D3 v6 code loads CSV data from a GitHub URL, scales the axes using `d3.scaleLinear`, and renders circles into an SVG using data joins. Axis labels are added via SVG text elements, and the chart fills the browser window using `window.innerWidth` and `window.innerHeight`.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway fuel efficiency across various car makes. Each circle’s position maps horsepower and torque, while its radius encodes highway MPG and color distinguishes the brand, with hover tooltips revealing the make. The SVG is built with d3.v7, using d3.scaleLinear for axes and size, d3.scaleOrdinal with interpolateTurbo for colors, and d3.axisBottom/axisLeft. Interactive tooltips appear via mouseover events, and a dual legend explains both MPG size and color categories.

Question-3-Venkat

This scatter plot visualizes the relationship between Magnesium and Malic Acid levels in wine samples, with point shapes encoding the wine class. The visualization uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to map data values to positions and shapes. Data is loaded from a CSV file via `csvParse` and rendered within an SVG container styled with CSS. A legend, positioned at a fixed coordinate, displays the shape-to-class mapping, while custom axes functions generate labeled scales.

Activity6-3.2-Venkat

This interactive scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each point’s shape representing the species. The visualization is built using D3 v7, leveraging the `scaleLinear` and `scaleOrdinal` scales, along with `symbolsFill` for shape encoding. A custom legend displays the species categories. Data is loaded asynchronously from a remote CSV file, parsed with `csvParse`, and rendered using a declarative `join` pattern to manage SVG elements. The chart updates dynamically when the browser window is resized.

Question2-3-Venkat

This stacked bar chart displays chocolate brand ratings across five percentage-based categories, from “Below 3” to “Above 6.” Each horizontal bar represents a brand, with colored segments showing the proportion of ratings in each category. The chart uses d3.v7 with d3.stack for grouping the data, d3.scaleBand for the y-axis, and d3.scaleLinear for the x-axis. Tooltips reveal exact percentages on mouseover, and the dataset is loaded from Chocolate.csv.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three flower species (setosa, versicolor, and virginica), colored with a categorical palette. The visualization uses D3 v6's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to compute scales and draw axes, with the data loaded from a remote CSV via `d3.csv`. Points are rendered as SVG circles with a fixed radius, and their fill colors are assigned via a switch statement based on the species value.

Question2-3-Venkat

This stacked bar chart shows the percentage distribution of chocolate brand ratings across five score bands (Below 3 to Above 6). Each horizontal bar represents a brand, with colored segments showing the proportion of ratings in each category. The visualization uses D3.js v7 to implement the layout, with `d3.stack()` for stacked bar construction, `d3.scaleLinear()` for the percentage axis, `d3.scaleBand()` for brand positioning, and interactive tooltips via mouse events. Data comes from the embedded `data.csv` file, rendered as SVG elements.

Activity6_Task2

This stacked bar chart visualizes how movie ratings vary across six genres, showing the percentage of films that fall into each of five rating categories, from below 5.0 to above 8.5. Built with D3.js (v7) and rendered as an SVG, the chart uses a horizontal stacked layout where each genre forms a full-width bar, with color-coded segments representing rating levels. Interactive tooltips appear on hover, revealing the precise percentage for each genre-rating combination. The code employs `d3.stack`, `d3.scaleOrdinal`, and `d3.axisBottom` to process the CSV data and construct the visualization.

Question-1.2-Venkat

This horizontal bar chart displays the population of twenty countries in 2010, sorted with the largest population at the top. The visualization is built with React and rendered as an SVG, using D3 v5 scales for positioning. Data is loaded from a CSV file via the `csv` function, with population values parsed and scaled. The chart includes blue tick lines, green bars, and a tooltip showing formatted population values on hover.

Question1.1-Venkat

This horizontal bar chart visualizes population data for ten countries in the year 2000, using green bars over a plot with blue tick marks. The React application uses D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with a custom `siFormat` to abbreviate large numbers. The chart loads CSV data from a GitHub repository, maps it, and renders the axes and marks as SVG elements within a React component.

Activity6_Task1

This example displays a horizontal bar chart of the top 30 countries by 2020 population, with bars colored light green and ranged along a linear population scale. The React-based visualization uses D3 v5 utilities including `scaleBand`, `scaleLinear`, `max`, and `format`, importing CSV data from a GitHub repository. Axis components render tick lines and labels through custom JSX, while SVG rectangles in the Marks component include native tooltips via `<title>` elements, with population values formatted in billions.

Activity6_Task1

This example displays a simple text message, "Hello VizHub!", centered on the page. It demonstrates how to import and use both D3.js functions and local ES6 modules within a VizHub project. The code uses D3’s `select()` to target the HTML element and set its text, while the message content is imported from a separate module. The page uses standard CSS for styling, and D3 is loaded via a CDN link.

venkat 6 buddhas

Six overlapping Buddhas appear as red, blue, and green wireframe-like paths with varying opacity, scattered across a flower-patterned background. Built with React and rendered as SVG, the visualization maps three nested arrays to generate hundreds of small random rectangles before layering a large Buddha path that repeats across six translated groups. The code uses React’s `map` to construct SVG elements, with the Buddha’s complex path data defined as a string and transformed via `translate` and `scale`. Random RGB fills and opacity create a kaleidoscopic, translucent effect.

Oct 18, 2024

5 Buddhas

Five overlapping Buddhas fan across a dark canvas, each rendered as a dense, intricate SVG path that fills the frame with complex geometry. A grid of small, randomly rotated and colored polygons is layered beneath the main figures, adding scattered texture to the composition. The visualization is built with React components that map over arrays to generate the SVG elements, while the individual Buddha outlines are defined by detailed path coordinates embedded directly in the code.

Oct 18, 2024