S

Sai Praveen Lokavarapu

@saipraveenlokavarapu·17 public vizzes

Loading thumbnail…

Activity7.1_Question2

This area chart visualizes global CO₂ emissions over time. The graphic fills the space beneath the line with green, making the upward trend in emissions immediately visible against the chart's white background. The visualization is built with D3 v7, using the `d3.area` API to generate the shape and `d3.scaleLinear` for axis scaling. Data is loaded from a remote CSV file via `d3.csv`, and the final SVG is rendered with standard D3 axes, labels for "Year" and "CO₂ Emissions," and a clean sans-serif font.

Loading thumbnail…

Activity7.1_Question1

This pie chart visualizes population distribution by age group, with slices labeled and a color-coded legend for reference. The data is loaded from a remote CSV file via `d3.csv`, and the chart is rendered using `d3.pie` to compute arc segments, `d3.arc` for path geometry, and `d3.scaleOrdinal` with a category color scheme. Labels are positioned at each arc’s centroid, and the SVG output uses a `d3.select`-based join to append paths and text elements dynamically.

Loading thumbnail…

Activity7.1_Question1

This example displays a simple text message, "Hello VizHub!", centered on the page using D3.js. The `index.js` file imports the `select` function from D3 and a custom ES6 module, `myMessage.js`, which exports the message string. The code uses `select('#message').text(message)` to set the content of a div element, while `styles.css` controls its size and alignment. The visualization demonstrates basic D3 DOM selection and ES6 module integration within a minimal HTML structure.

Loading thumbnail…

Activity7.1_Tutorial

This animated scatter plot demonstrates the Iris dataset, cycling through different combinations of sepal and petal measurements on the x-axis. It shows how the three species (setosa, versicolor, and virginica) cluster differently depending on which features are compared. The visualization uses the D3.js library, specifically `csv`, `select`, `scaleLinear`, and `axisLeft`/`axisBottom` APIs to create the plot and its axes. The scatter plot updates every few seconds, using a `setInterval` loop to rotate through the four measurement columns as the x-axis variable. The SVG rendering includes custom-styled points, a color legend, and axis labels.

Loading thumbnail…

Activity6_Question4

This bubble chart visualizes product data from a CSV file, plotting price on the x-axis against quantity sold on the y-axis. Each circle’s radius represents profit margin using `d3.scaleSqrt`, while color encodes the product category through `d3.scaleOrdinal` with `d3.schemeTableau10`. The SVG rendering uses `d3.axisBottom`, `d3.axisLeft`, and the `d3.select` and `.enter()` APIs to draw circles, with a custom HTML legend positioned in the upper right corner.

Loading thumbnail…

Activity6_Task4

This scatterplot visualization shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble represents a car brand, with its x-position indicating horsepower, y-position indicating torque, and bubble size scaled to highway MPG. The chart includes a color-coded legend for car makes and an interactive tooltip displaying the make on hover. Using D3 v7's `d3.scaleLinear` and `d3.scaleOrdinal` with `d3.interpolateTurbo`, the visualization renders as SVG with smooth hover transitions and mouse event handlers for tooltip positioning.

Loading thumbnail…

Activity6_Question3

A scatter plot displays employee math scores against age, with each circle colored by department (Finance, HR, Engineering, Marketing, Sales, IT). The visualization uses D3 v7 with SVG rendering, loading CSV data from a GitHub repository via `d3.csv`. It employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color mapping, `d3.axisBottom` and `d3.axisLeft` for ticks, and a manually constructed legend with circles and text.

Loading thumbnail…

Activity6_Task3.2

This scatter plot shows the relationship between sepal length and petal length for 150 iris flowers, with each species distinguished by a unique symbol shape. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with symbolsFill to map species to different marker shapes. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csvParse. The chart includes labeled axes via d3.axisLeft and d3.axisBottom, plus a custom shape legend generated with d3.symbol.

Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three iris species, with each species represented by a distinct color. The code uses D3 v6 to load CSV data from a GitHub repository, parse the numeric columns, and render an SVG scatter plot. It employs D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to pixel coordinates and draw axes. The visualization also includes a title and axis labels, with circles colored skyblue, lightgreen, or orange based on species.

Loading thumbnail…

Activity6_Question2

This stacked bar chart visualizes product category sales (Ornaments, Clothes, Electronics) across the years 2018-2021 from the CSV data file. The chart uses D3 v7's `d3.stack()` and `d3.scaleOrdinal` to layer the categorical segments, with SVG rectangles scaled via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Hovering a segment triggers a tooltip indicating the category and sales value, while a manual legend identifies color-keyed categories on the right side.

Loading thumbnail…

Activity6_Task2

A stacked bar chart shows the distribution of movie ratings across genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5" on a percentage scale. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to compute stacked series and `d3.scaleOrdinal` for color encoding. Interactive tooltips display exact percentages on mouseover, while axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data comes from a CSV file with genre-based rating proportions.

Loading thumbnail…

Activity6_Question1.2

This visualization displays the populations of 20 countries in 2010 as horizontal bars, with country names on the y-axis and population values on the x-axis. The bar chart uses React components to render SVG elements, 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, and formatted with d3.format to show values in billions. The bars include native SVG `<title>` tooltips for exact values.

Loading thumbnail…

Activity6_Question1.1

A horizontal bar chart displays population figures for ten countries in 2000, with bars extending from a shared left axis and length-encoded values along a linear scale. Data loads from a CSV file through D3’s `csv` API, and the visualization renders as an SVG using React components. D3’s `scaleBand` positions the categorical y-axis, while `scaleLinear` maps population values to x-axis coordinates. Axis tick lines appear in blue, and bar lengths provide direct comparison of relative population sizes.

Loading thumbnail…

Activity6_Task1

This visualization displays the 2020 population figures for 30 countries using a horizontal bar chart. The bars are rendered as SVG rectangles, with each country positioned along the y-axis and bar length proportional to population size along the x-axis. The code uses React components and D3 v5 APIs including `scaleBand`, `scaleLinear`, `max`, and `format` (with `.2s` for SI-prefixed tick labels). Data is loaded asynchronously from a remote CSV file using `d3.csv`, and axes are constructed via custom React components for bottom and left alignment.

Loading thumbnail…

Activity6_Task1

This example demonstrates a simple D3.js visualization that displays the text "Hello VizHub!" centered on the page. The code initializes a D3 selection on the `#message` div and sets its text content using the `select` method. Styling is applied through CSS to center and enlarge the text. The visualization uses D3's selection API to manipulate the DOM element, with the message imported from a separate ES6 module. The implementation relies on D3 v6 loaded from a CDN and follows a basic single-view pattern.

Loading thumbnail…

Activity 5 Question 3 -- 6 Buddhas

The visualization displays six Buddha silhouettes rendered as layered SVG path outlines against a floral background image. Built with React and ReactDOM, the SVG canvas uses a 960 by 1000 pixel coordinate system, where each Buddha is constructed from a single complex path specification. The code generates synthetic numerical arrays and applies a cubic function for transformation testing, while also including commented-out random circle generation logic. The background image is loaded via CSS with `url()`, and the Buddha paths are scaled and translated within SVG `<g>` elements.

Loading thumbnail…

5 Buddhas

A grid of 926 randomly placed, rotated diamond polygons forms a dense, colorful backdrop in black. The image depicts five Buddha figures, each rendered as a complex SVG path with intricate line work, positioned across the canvas. The polygons are generated via nested array maps with random positioning, colors, and rotation transforms. The Buddha paths are drawn using SVG path data and scaled within grouped `<g>` elements, using React to manage the SVG output.