S

siddhartha gurram

@siddhartha-gurram·24 public vizzes

Loading thumbnail…

ASSIGNMENT-2_QUESTION-2

This D3.js area chart visualizes data loaded from a CSV file hosted on GitHub, displaying a time series of values over years. The SVG-based visualization uses `d3.scaleLinear` to map the data domain to pixel coordinates, generates the area path with `d3.area`, and renders labeled axes via `d3.axisBottom` and `d3.axisLeft`. Labels "Year" and "Value" are added to the corresponding axes. The chart is embedded in an HTML page that loads D3 v7 from a CDN.

Loading thumbnail…

Assignment-6_Question-1

This example presents a pie chart visualizing the GDP of the top 15 Indian states for the financial year 2015-16. It loads CSV data from a GitHub repository, sorts the states by GDP, and renders the chart using D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs. The visualization includes a color-coded legend with rectangles and text labels, displaying both state names and their corresponding GDP values formatted with a “Rs” suffix. SVG is used for rendering with mouseover events logging data to the console.

Loading thumbnail…

Assignment-2_Question-1

This example demonstrates basic VizHub functionality, showing how to integrate D3.js and local ES6 modules into a simple web page. It loads D3 via UNPKG and uses the `select` import to set the text of a `#message` div element to “Hello VizHub!”. The page also imports a custom `message` string from a separate `myMessage.js` module, highlighting modular code organization. Styles are applied through an external `styles.css` file, centering the large text. The visualization is minimal, focusing on setup and module imports rather than data rendering.

Loading thumbnail…

Assignment-2_Question-1

This example demonstrates basic VizHub functionality, showing how to integrate D3.js and local ES6 modules into a simple web page. It loads D3 via UNPKG and uses the `select` import to set the text of a `#message` div element to “Hello VizHub!”. The page also imports a custom `message` string from a separate `myMessage.js` module, highlighting modular code organization. Styles are applied through an external `styles.css` file, centering the large text. The visualization is minimal, focusing on setup and module imports rather than data rendering.

Loading thumbnail…

Fork of Assignment- II_SDV

This pie chart visualizes the top 10 Indian states by GDP for the financial year 2011-12. Using D3.js v5, the code sorts and slices a CSV dataset from GitHub, then renders the chart with `d3.pie` and `d3.arc`. It includes an interactive tooltip that logs GDP values on mouseover, and displays a legend with state names and values, colored via `d3.scaleOrdinal` with `schemeCategory10`. The chart is drawn as SVG with a title and a 960x500 canvas.

Loading thumbnail…

activity-6_question-4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various vehicle makes. Each circle’s position on the x- and y-axes corresponds to its horsepower and torque values, while its radius encodes highway MPG, and its color distinguishes the make. Built with D3.js (v7), the chart uses `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` with `interpolateTurbo` for color, and SVG circles with an interactive tooltip that displays the make on hover. Data comes from `bubblechart.csv`.

Loading thumbnail…

6 buddhas

Six overlapping Buddha silhouettes fill the gallery view, each rendered as a complex SVG path in a distinct random color. The visualization uses React with the `random()` method to generate both the radial color components and spatial offsets for the multi-layered path elements, while also drawing a background image of flowers and scattered circles. The paths are positioned through SVG `<g>` transforms and the d3-style path data for each Buddha is rendered as a `<path>` element. A repeated nested array map generates small colored rectangles across the canvas, creating a busy, collage-like aesthetic from code and imported SVG geometry.

Loading thumbnail…

Buddha in colors -overlapping Buddha 2 reflections

A kaleidoscopic mandala of hundreds of overlapping circles in blues and purples fills a black field. The circles' positions and colors are randomized via repeated `Math.random()` calls in nested array maps, with opacity creating layered depth. A single intricate Buddha silhouette path, defined by SVG path data and scaled with a transform, emerges from the dense circular background. The visualization is built with React components rendering SVG elements, demonstrating generative randomness against a fixed vector form.

Loading thumbnail…

5 Buddhas

An abstract SVG composition depicts five repeated Buddha silhouettes in warm, translucent colors, layered over a dense field of randomly generated, rotating diamond shapes. The Buddha paths are rendered as large React `<path>` elements within `<g>` transforms, while the background pattern is produced by nested `Array.map()` calls generating `<polygon>` elements with `Math.random()`-based coordinates, fills, and rotations. The visualization uses React and ReactDOM to build the SVG scene, with a black CSS background and hidden page overflow.

Loading thumbnail…

Fork of 2 Buddhas

The visualization displays a chaotic, abstract composition of hundreds of small, colored diamond-like polygons scattered across a black canvas, each randomly positioned, rotated, and filled with vibrant RGB values. It uses React to render the SVG elements, mapping over a nested array of numbers to generate the shapes. The code repeatedly maps over an array, creating a dense field of overlapping polygons with randomized coordinates, colors, and rotation transforms, resulting in a generative art piece reminiscent of a psychedelic mandala or temple motif.

Loading thumbnail…

Activity-6 question-3

This scatter plot visualizes Test Cricket player records, plotting runs against matches played, with each point colored by the player’s country using a categorical color scale. The data is loaded from a remote CSV file and parsed with d3.csv, while the visualization uses d3.scaleLinear for the x- and y-axes, d3.extent to set domains, and d3.axisBottom/axisLeft for tick rendering. Circles are appended as SVG elements with fill opacity, and axis labels are included. The chart is sized responsively to the browser window.

Loading thumbnail…

Fork of Scatter Plot with Colors

This scatter plot visualizes Test Cricket records, mapping the number of matches played against total runs scored for each player. Each circle represents a player and is color-coded by their country using d3.scaleOrdinal with d3.schemeCategory10. The plot uses d3.csv to load the remote dataset and d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft to render ticks and labels. Hover details include player name, country, innings, and average, though no tooltip is implemented in the provided code. The SVG canvas resizes dynamically based on window dimensions.

Loading thumbnail…

5 Buddhas

An abstract SVG composition depicts five repeated Buddha silhouettes in warm, translucent colors, layered over a dense field of randomly generated, rotating diamond shapes. The Buddha paths are rendered as large React `<path>` elements within `<g>` transforms, while the background pattern is produced by nested `Array.map()` calls generating `<polygon>` elements with `Math.random()`-based coordinates, fills, and rotations. The visualization uses React and ReactDOM to build the SVG scene, with a black CSS background and hidden page overflow.

Loading thumbnail…

Fork of 5 Buddhas

A vibrant field of 441 overlapping, semi-transparent circles is rendered in React, with random positions and colors derived from the `Math.random` calls within the `A.map` loops, creating a chaotic, multicolored scatter against a black background. The primary focal point is a large, intricate Buddha silhouette, drawn from a series of SVG `path` elements, which is translated and scaled within an SVG canvas. The image is generated using ReactDOM to render the SVG elements directly into the HTML document.

Loading thumbnail…

5 Buddhas

Five Buddhas arranges layered, semi-transparent SVG circles generated from nested array mappings to create a colorful, overlapping mandala-like field. The composition is anchored by a single intricate Buddha silhouette path drawn in black and white, repeated five times with varying scale and translation transforms. Built with React and rendered as SVG, the visualization uses the `Math.random()` function to assign circle positions and RGB fill colors, while the main figure relies on a static path definition. The code demonstrates a chaotic generative background contrasted with a precise, geometric central icon.

Loading thumbnail…

Activity-6_question-3

This stacked bar chart shows the percentage distribution of movie ratings across six car brands, with the total per brand equaling 100%. It uses d3.stack() to create the stacked segments, and d3.scaleOrdinal() to assign colors to five rating categories. Hovering over a bar segment triggers a tooltip displaying the exact percentage for that rating level. The visualization is rendered as an SVG using d3.axisBottom and d3.axisLeft for the axes, with data loaded from a CSV file.

Loading thumbnail…

Fork of Activity6_Question2

This stacked bar chart shows the percentage distribution of movie ratings across five categories, with each bar segmented into five rating levels that sum to 100%. Categories appear on the y-axis and percentages on the x-axis, with hover interactions displaying precise percentage values via a tooltip. The visualization uses d3.scaleOrdinal for color encoding, d3.stack for data transformation, d3.axisBottom and d3.axisLeft for axes, and SVG rendering with event listeners for mouseover interactions.

Loading thumbnail…

activity-6_question-3

This stacked bar chart shows the percentage distribution of rating levels across different movie genres, revealing how genre influences audience ratings. Hovering over each bar segment displays exact percentages via pop-ups, with each genre’s total summing to 100%. The visualization uses D3.js v7’s `d3.stack()` and `d3.scaleBand()` to create the bars, with `d3.scaleOrdinal()` and `d3.schemeCategory10` assigning colors to rating categories. Data is loaded from a CSV file using `d3.csv()`, and the SVG rendering includes axes generated by `d3.axisBottom()` and `d3.axisLeft()`.

Loading thumbnail…

activity-6 q

This example demonstrates a minimal D3.js visualization that displays the text "Hello VizHub!" in the center of the page, sized at 12em. The code loads D3 via UNPKG and uses the D3 `select` API to target the HTML element with the ID `message`, setting its text content. It also showcases the use of ES6 modules by importing a message string from a local file. The visualization relies on static HTML and CSS for styling, with no data processing or dynamic rendering.

Loading thumbnail…

Activity-6_question-1(2)

This bar chart displays the 2010 population for 20 countries, sorted alphabetically by country name. The visualization uses a horizontal layout where bars extend to the right, with population values formatted using D3's `format('.2s')` to abbreviate large numbers. Built with React and D3 v5, the chart renders as an SVG with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded from a CSV file using D3's `csv` function, which parses population values and multiplies them by 1000. The chart includes a hover tooltip showing each bar's exact value.

Loading thumbnail…

Activity-6_question1(2)

This example demonstrates a minimal D3.js application that displays a centered text message. It serves as a basic template for setting up a VizHub project, showing how to load D3 via a CDN and use ES6 modules. The code uses `d3.select` to target the HTML element and sets its text content from a local module, styled with CSS for large, centered typography.

Loading thumbnail…

Activity-6_question-1(1)

This bar chart displays the population of ten countries in the year 2000, sorted by country name. The visualization uses React and D3 v5, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a remote CSV file using `csv`, and the axes are rendered as SVG elements with custom tick formatting that converts values from billions to a readable format.

Loading thumbnail…

Fork of Activity-6_task-1

This visualization shows the populations of 30 countries in 2020 as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. It uses React and d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, rendering SVG rectangles via the Marks component. The data is loaded as CSV using d3.csv, with population values formatted using d3.format. Axes are custom components built with SVG elements, and the chart is styled with the Poppins font.

Loading thumbnail…

Activity-6_task-1

This example shows a horizontal bar chart of population estimates for the top 30 countries in 2020, with a green bar for each country and a light blue axis. It uses React to render an SVG, with D3 v5’s `scaleBand` and `scaleLinear` for positioning and a formatter that converts large numbers into billions. The data is loaded via `csv` from a gist URL, and tooltips display the formatted population value on hover.