M

MANEEDI NAGAKIRAN

@kiranmaneedi9999·19 public vizzes

Loading thumbnail…

SDV_ACT_7.1_Q1

This pie chart shows the distribution of gym types—Premium, Budget, and Standard—across ten sample gyms, including the count and percentage for each category. The visualization uses D3 v7’s `d3.pie()` and `d3.arc()` to generate the SVG paths, with a `d3.scaleOrdinal()` color scale based on `d3.schemeCategory10`. Each slice is labeled with its type, count, and percentage, computed from the hardcoded `gymData` array. The chart is rendered as an SVG, with the legend and labels placed directly on the arcs using `arc.centroid()`.

Loading thumbnail…

SDV_ACT_7.1_Q2

This area chart shows five months of sample data, with values plotted from January to May 2021. The visualization uses the Chart.js library to render a line chart on an HTML5 Canvas element, with a semi-transparent blue fill beneath the line. The chart labels the x-axis as "Date" and the y-axis as "Value." The data is hardcoded as example values within the script, and the chart container is centered and sized responsively via CSS. The implementation relies on the `Chart` constructor and the canvas context API to draw the graphic.

Loading thumbnail…

ACT_7.1

A D3 area chart displays loan amounts against borrower age, showing how requested loan values distribute across ages 21–26 with a prominent cluster between high and low amounts. The visualization sorts the dataset by age, encodes age on a linear x-scale and loan amount on a linear y-scale, and renders a steelblue filled area via the `d3.area()` generator with axes from `d3.axisBottom` and `d3.axisLeft`. The example uses D3 v7 with SVG rendering, drawing from an inline array of sample data.

Loading thumbnail…

K_Task_4

This bubble chart visualizes the relationship between average horsepower and torque for various car makes, with bubble size encoding highway MPG and color distinguishing make. Data is loaded from a CSV file and rendered as SVG circles using D3.js (v6) with linear scales for both axes. Interactive tooltips appear on mouseover, and a legend displays the bubble size scale and color categories. The chart also includes axis labels and a title to clarify the plotted metrics.

Loading thumbnail…

kiran Task2

This stacked bar chart shows the distribution of movie ratings across five genres, with each bar segmented by rating level percentages that sum to 100%. The visualization uses a horizontally-arranged bar chart on an SVG canvas, where the height of each colored segment encodes the proportion of films within each rating band. Built with d3.v7, the chart employs d3.stack() to compute the stacked segments, d3.scaleBand for the categorical x-axis, and d3.scaleLinear for the percentage y-axis formatted with d3.format. A legend identifies the five rating categories, while the data represents fictional genre-based rating proportions.

Loading thumbnail…

K_Task_3

This scatter plot visualizes a small dataset of eight points across two categories, A and B, mapping x and y values to positions on a Cartesian grid. Each circle is colored steelblue or orange based on its category, with a black stroke for visual separation. Built with D3 v7, the visualization uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to generate the axes and scales, while SVG circles are appended to the chart area with margins applied. The data is hardcoded as a JavaScript array, not from the referenced IRIS CSV file.

Loading thumbnail…

Fork of Goals Scatter Plot

This fork of the Goals Scatter Plot visualizes football league scorers from the 2018 season, plotting player goals against shots taken. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, or Premier League) with constant opacity and radius. The chart uses D3’s `scaleLinear` for axes, `selectAll` data joins for the SVG elements, and the `@curran/responsive-axes` library for responsive tick rendering. Data comes from the Top Football League Scorers dataset on Kaggle, filtered to the year 2018.

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays a horizontal bar chart of population figures for 20 countries in 2010. It uses React with D3 v5, employing `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` elements for the bars. Data is loaded as CSV from a GitHub repository via `d3.csv`, with hover tooltips formatted using `d3.format`. The axes are custom React components, and the chart includes labeled tick lines and a population axis title.

Loading thumbnail…

Fork of Activity 6_Task 1

This example demonstrates a minimal VizHub project that renders a centered text message using D3.js. It shows how to load D3 v5 via CDN and import specific API functions like `select` from the `d3` module, alongside a local ES6 module that exports a string constant. The visualization uses D3’s `select` method to set the text content of a `div` element, styled with CSS for large font sizing. The code also includes simple JavaScript constructs such as a number variable and a regular expression, but no data fetching or dynamic visual behavior.

Loading thumbnail…

Activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with axes rendered by custom SVG components. Data is loaded from a remote CSV via `d3.csv`, and tooltips show formatted population values using `d3.format`.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal "Hello VizHub!" visualization that displays a text message centered on the page using D3.js for DOM manipulation. The code imports the `select` function from D3 v5 and the `message` from a local ES6 module, then sets the text of an HTML div element. Styling is applied through an external CSS file that centers the message with a large font size. The visualization relies on D3's `select` API and local module imports to show basic VizHub functionality.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the core workflow of a VizHub project, from loading D3 via UNPKG to composing modular ES6 code. It uses D3’s `select` to set the text content of a `#message` div, pulling the string from a local `myMessage.js` module. The code also includes a regex literal and a number variable, illustrating how standard JavaScript syntax coexists with D3 imports. The page is styled with a CSS file that centers the message at a large font size.

Loading thumbnail…

Activity 6_Task 1

This example demonstrates a minimal D3.js setup using ES6 modules to display a centered message. It loads D3 v5 from a CDN and uses the `select` API to update the text content of a `div` element, while importing a local module for the message string. The page includes custom CSS styling for large, centered text. The code serves as a template showing how to combine external libraries, local imports, and styling in a single visualization.

Loading thumbnail…

6 Buddha

Six overlapping Buddha silhouettes, rendered in translucent SVG paths with randomized RGB fills, float over a flower-patterned background. The visualization uses React to generate a 30×30×30 grid of null elements with random positions and colors, creating a chaotic, colorful backdrop behind the central figure. The Buddha path itself is transformed and scaled multiple times, and the code relies on React and ReactDOM to compose the SVG output.

Loading thumbnail…

6 Buddha

This visualization overlays a single intricate Buddha path with dozens of semi-transparent circles, scattering them across the SVG canvas at randomized positions. The circles use random RGB color values and opacity, creating a colorful, chaotic backdrop against the fixed black line-art Buddha figure. The Buddha path is drawn using an SVG `path` element with a large `d` attribute, while the circles are generated via nested `Array.map` loops in React. The code relies on React 16.10 and ReactDOM to render the static SVG scene with no interactivity or animation.

Loading thumbnail…

6 Buddha

A field of overlapping, semi-transparent circles in varied colors is scattered across a black background. The circles are generated by nested `map` calls over an array, using `Math.random()` for position and color. Concurrently, numerous Buddha silhouette paths, defined by inline SVG path data, are rendered in clusters through `React` and `ReactDOM`, scaled and translated into an overlapping arrangement.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This example displays a large, colorful Buddha-like shape built from numerous overlapping diamond polygons, rendered with React and SVG. The code generates a grid of polygons with random colors, opacity, and rotation, creating an abstract, layered visual. The Buddha’s outline is drawn using SVG `<path>` data, which is overlaid on top. The visualization uses ReactDOM to render the SVG elements, with the `Math.random()` function driving the unpredictable color and position variations.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

This visualization displays a dense, overlapping arrangement of brightly colored diamond shapes rendered on a green background, layered with a single Buddha path. Built with React and SVG, it generates a triple-nested array map that creates hundreds of random polygons with varying RGB fills and rotations. A static, detailed Buddhafigure path is overlaid and scaled using an SVG transform, combining procedural generative art with fixed vector imagery.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense scatter of semi-transparent colored circles overlaps a large black Buddha silhouette drawn as a detailed SVG path. The circles are positioned using nested array maps with random coordinates and colors, while the Buddha path is rendered with a thick stroke. The visualization uses React for structure and SVG for drawing, with all elements rendered in a single view.