P

poornachander510@gmail.com

@Poorna510·19 public vizzes

Loading thumbnail…

Poorna area chart

This example shows a Poorna area chart visualizing the number of students against their total marks, using data loaded from a CSV file hosted on GitHub. The chart displays a filled area beneath the line, with a blue gradient transitioning from semi-transparent at the bottom to fully transparent at the top. Built with D3 v7 and rendered as SVG, the code uses `d3.csv` to fetch the data, `d3.area` to generate the area path, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. The visualization includes labeled x and y axes to clarify the relationship between the variables.

Loading thumbnail…

Poorna Pie chart activity_7

This pie chart visualizes the top 10 countries by deaths from air pollution in 2020, using a colorful SVG rendered by d3. The chart segments represent annual income data from a CSV file, with each slice’s color and size determined by d3.pie and d3.arc. A legend displays each profession and its corresponding value, formatted with d3.format. The visualization is built with d3.v5, using asynchronous data fetching to load the dataset before rendering.

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE - 7 Pie Chart Maanas Katta

This example shows the distribution of employee data categories using a pie chart. It loads a CSV dataset from a GitHub repository via `d3.csv`, then maps each category’s `Value` to an arc using `d3.pie()` and renders the slices with `d3.arc()`, applying a categorical color scale via `d3.scaleOrdinal(d3.schemeCategory10)`. The SVG chart is centered in the viewport with a white stroke separating each slice, and the page includes a heading and basic styling from the HTML/CSS.

Loading thumbnail…

Fork of Fork of Activity_7.1.1_Question_2

This area chart visualizes monthly temperature variations, with the shaded region and line highlighting the trend across the months. Built with D3 v7, the chart uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` to generate the filled path. Data is loaded asynchronously from a GitHub Gist via `d3.csv`. Axis labels and tick marks are rendered using `d3.axisBottom` and `d3.axisLeft`, with all SVG elements drawn to a static canvas. The chart is styled with a steelblue line and a semi-transparent lightsteelblue area.

Loading thumbnail…

Activity6_Question_4_Poorna

This interactive bubble chart visualizes the correlation between a country’s GDP per capita, life expectancy, and population using data from Nation_General.csv. The plot positions each country along the x-axis for GDP per capita and y-axis for life expectancy, with bubble radius encoding population size. Hovering over a bubble changes its fill color from steelblue to orange. The visualization uses d3.csv for data loading and D3 scales (scaleLinear, scaleSqrt) with axes, labels, and mouse event handlers to build the SVG-based chart.

Loading thumbnail…

Activity6_Tutorial_4_Poorna

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position maps horsepower and torque on the x- and y-axes, while its radius and color encode highway MPG and car brand, respectively. The visualization uses D3.js (v7) with SVG rendering, including interactive tooltips on mouseover. A legend for bubble size and color categories is provided, with data sourced from the bundled `bubblechart.csv` file.

Loading thumbnail…

Activity_6_Question_3_Poorna

This interactive D3.js v7 scatter plot visualizes the relationship between hospital visits and health status for five sample communities, with points colored by community group. The SVG chart renders circles positioned by linear x- and y-scales, with ordinal color encoding for categorical community labels. Axes, axis labels, and a color legend are drawn using D3's scale, axis, and selection APIs. The visualization demonstrates a simple health-data comparison using a static, hand-coded dataset.

Loading thumbnail…

Activity6_task3_Poorna

This interactive scatter plot visualizes the Iris dataset, plotting petal length against petal width for each sample, with points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). Built with D3 v6, it loads data from a remote CSV file, scales x and y coordinates using `d3.scaleLinear`, and draws circles via the SVG `join` API. The code also attempts to set `rx` and `ry` attributes, though this has no visual effect on circles.

Loading thumbnail…

Activity6_Task2_Question_2_Poorna

A stacked bar chart displays monthly sales across three product categories—Electronics, Clothing, and Groceries—using data from data1.csv. The visualization uses D3.v7 to render SVG rectangles with distinct color encoding per category, and includes interactive tooltips that reveal exact values on hover. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the `d3.stack` utility computes cumulative bar heights for the layered presentation, with a legend clarifying category colors.

Loading thumbnail…

Activity6_Task2_Poorna

This example visualizes the distribution of IMDb movie ratings across six genres, using a stacked horizontal bar chart where each bar segment represents the percentage of titles within rating ranges from below 5.0 to above 8.5. The chart displays genre names on the y-axis and percentage values on the x-axis, with colors distinguishing each rating category. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked data, `d3.scaleOrdinal` for categorical colors, and `d3.scaleBand` and `d3.scaleLinear` for positioning. Interactive tooltips appear on mouseover to show precise percentage values for each genre and rating combination. The data comes from a local CSV file loaded asynchronously.

Loading thumbnail…

Fork of Fork of 2000_Population_20_Countries_Data_for_2000_Poorna

This bar chart visualizes the 2010 population estimates for 20 countries, using horizontal bars sorted by country name. The visualization loads CSV data from a GitHub repository, processes the population column by multiplying values by 1000, and renders an SVG through React. It employs D3 v5 scales (`scaleBand` and `scaleLinear`) for positioning, along with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Tick formatting converts values to abbreviated strings like “1.2B”, and the chart includes a labeled x-axis for population.

Loading thumbnail…

2000_Population_10_Countries_Data_Poorna

A horizontal bar chart displays the populations of ten countries for the year 2000, sorted by country name. The visualization uses React with D3 v5, employing d3.scaleBand and d3.scaleLinear to encode data from a CSV file, with SVG rects drawn for each bar. Gray bars are annotated with axis labels and formatted tick values using d3.format, while hover tooltips show precise population figures via SVG title elements.

Loading thumbnail…

Activity-6 Task_1 poorna

This example displays a horizontal bar chart ranking the populations of 30 countries for the year 2020. The visualization uses React with D3 version 5 to render SVG elements, employing a linear scale for the population axis and a band scale for the categorical country axis. Data is loaded from a remote CSV file using d3.csv, with population values converted from thousands. The bars are colored green, and hovering reveals the population value in a tooltip. Axis ticks and labels are generated programmatically, with bottom axis values formatted using d3's format function to abbreviate large numbers (e.g., converting G to B).

Loading thumbnail…

Poorna Hello VIzHub!

This example demonstrates the core workflow of VizHub: importing D3 and local ES6 modules, then using D3 to manipulate the DOM. The page loads D3 v5 via UNPKG and uses ES6 `import` syntax to bring in both the `select` function from D3 and a custom `message` string from a local module. The code renders that message into a div element, styled with large centered text via an external CSS file, illustrating how to combine external libraries, local modules, and styles.

Loading thumbnail…

Poorna 5 fork

A chaotic abstract composition of randomly generated overlapping polygons, rendered in bright RGB colors over a green background. The visualization uses React to map over nested arrays, creating hundreds of semi-transparent shapes with random positions and rotations. Each polygon is drawn as an SVG element with computed `points`, `fill`, and `transform` attributes. Beneath this generative layer, a detailed SVG path traces the silhouette of a Buddha figure, creating a contrast between the ordered structural outline and the unpredictable, colorful overlay.

Loading thumbnail…

Poorna fork 6 budha

The visualization places two large, identical black-and-white SVG path drawings of a flower on a green floral background image. It uses React to render an SVG scene, with each path defined by a long string of cubic Bézier curve commands. The paths are scaled and translated to create the two flower compositions. The code relies on the React and ReactDOM libraries to render the scalable vector graphics.

Loading thumbnail…

Poorna Budha 5

A symmetrical, kaleidoscopic mandala emerges from a single Buddha silhouette path repeated six times around a central point, each rotated by 60 degrees against a black background. The React application renders an SVG using the `path` data directly, with each copy transformed via `translate` and `rotate` operations. The overlapping colored strokes create a dense, ornamental pattern, showcasing how simple geometric repetition of one vector shape can produce a complex, visually striking composition.

Loading thumbnail…

Budha 5 poorna

The visualization renders a Buddha-like shape composed of many overlapping paths, built with React and SVG. The code includes nested arrays and a cubic function, though the primary visible output is a blue Buddha figure created from a dense, complex SVG path string. The title references "overlapping Buddha," and the design uses a black background with red text styling in the HTML. The project uses React and ReactDOM to render the SVG elements, with path data defining the figure’s silhouette.

Loading thumbnail…

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

A matrix of overlapping, multi-colored Buddha silhouettes fills a black canvas, each one a scaled and translated path from a shared dataset. The visualization layers hundreds of identical path elements rendered as SVGs, using React's functional mapping to generate nested loops that create a dense, repetitive grid of forms. The code relies on React and ReactDOM to build the SVG elements, with each path defined by a long string of cubic Bezier curve commands, resulting in a vibrant, patterned composition that emphasizes visual density over individual detail.