N

nandasaipalankius@gmail.com

@nandasai3·19 public vizzes

Loading thumbnail…

VIZHUB_Q2_DVA7

This visualization displays the relationship between age and BMI, categorizing data points as either "High" or "Normal" based on BMI thresholds. The SVG chart uses a gradient-filled area plot with smooth curves to represent the data distribution. Built with D3.js, it features interactive hover effects that display a tooltip with age, BMI, and category details. The data is loaded from a Gist-hosted CSV file and processed using D3's `d3.csv` and `d3.scaleLinear` functions.

Loading thumbnail…

VIZHUB_Q1_DVA7

This example displays a donut chart of car classification categories, showing the percentage distribution of car classes. It loads a CSV dataset, counts the occurrences of each class, and visualizes the results using a pie layout with colored slices and a legend. The visualization is rendered as an SVG using D3.js, with d3.csv for data loading, d3.pie for layout, d3.arc for slice geometry, and d3.scaleOrdinal for color mapping.

Loading thumbnail…

VIZHUB_Q1_DVA7

This visualization displays the distribution of car classification categories—unacc, acc, vgood, and good—as a pie chart with percentage labels and a legend showing counts. It loads CSV data from a GitHub gist and uses D3.js version 7.8.5 via CDN, employing the d3.pie, d3.arc, and d3.scaleOrdinal APIs to generate slices, colors, and labels. The SVG rendering includes custom legend elements and a bold title, with data processed through d3.csv.

Loading thumbnail…

dVA7_Question_1

This example visualizes the distribution of air quality pollutants by manufacturer, using a pie chart to compare the horsepower values across categories. It loads CSV data from a GitHub gist via PapaParse and renders the chart with D3 v6, employing `d3.pie` to compute arc angles, `d3.arc` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. The SVG output includes labeled slices with centered text labels, all contained within a responsive chart container.

Loading thumbnail…

Fork of Fork of Activity7_q1

This pie chart displays the distribution of horsepower values across different car makes, with each genre category represented as a colored slice proportional to its count. The visualization loads a CSV dataset via Papa Parse, then uses D3 v7’s `pie` and `arc` generators to compute slice paths and centroids, rendering labels at each slice’s center. Slices are filled with a categorical color scheme and separated by white stroke lines, while the SVG canvas is centered within a responsive container.

Loading thumbnail…

Fork of Activity6_q4

This visualization shows the correlation between movie rating ranges across six genres using a bubble chart. Each genre is represented by a colored circle, with the x-axis showing the percentage of ratings between 5.0-6.5 and the y-axis showing the percentage between 7.5-8.5, while the bubble size encodes the percentage of ratings in the 6.5-7.5 range. The chart uses D3 v7 scales and axes, including `d3.scaleLinear` for positioning and sizing, `d3.scaleOrdinal` for genre colors, and `d3.axisBottom` and `d3.axisLeft` for labeled percentage axes. Interactive tooltips appear on mouseover, and the data comes from a static CSV file embedded directly in the HTML.

Loading thumbnail…

Activity6_q4

A bubble chart explores the correlation between movie ratings across genres, plotting the percentage of ratings in the 5.0-6.5 range on the x-axis and the 7.5-8.5 range on the y-axis, while bubble size encodes the 6.5-7.5 range percentage. Each genre appears as a distinct color, revealing relationships between rating distributions. The visualization uses D3.js to render SVG elements, with d3.scaleLinear for axes and size, d3.scaleOrdinal for color mapping, and interactive tooltips showing genre details on mouseover.

Loading thumbnail…

Activity6_task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble’s position set by the x- and y-scales for horsepower and torque, its radius by the z-scale for MPG, and its color by a d3.scaleOrdinal mapping makes to interpolated Turbo colors. Hovering reveals a tooltip with the car make. The chart includes axes, labels, and a legend for MPG values. Data loads from `bubblechart.csv` into an SVG rendered with D3 v7.

Loading thumbnail…

Activity6_q3

This scatter plot visualizes the relationship between horsepower and highway MPG for various car makes, with each point colored by car category (Economy, Standard, Luxury, or Sports). The visualization uses D3 v7 to render SVGs, employing d3.scaleLinear for both axes and d3.scaleOrdinal for categorical coloring. A legend identifies the color-coded categories, while axis labels and a title provide context. The data is embedded in the HTML file, and all rendering is done client-side using standard D3 selection and data-join methods.

Loading thumbnail…

Activity6_task3.2

This example renders a scatter plot of the classic Iris dataset, showing sepal length against petal length with points shaped by species. It loads data from a GitHub-hosted CSV and uses D3 v7 APIs such as `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to map measurements and categories to positions and shapes. A custom axis module draws labeled axes, while a shape legend communicates the species mapping for the three iris types.

Loading thumbnail…

Activity6_task3.1

This example visualizes the Iris dataset as a scatter plot, using petal length on the x-axis and petal width on the y-axis. It encodes species membership through circle colors (skyblue, lightgreen, orange) while also binding sepal length and width as additional attributes (`rx`, `ry`) on each circle. The visualization loads CSV data from a GitHub gist, parses numeric fields, and uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().data().join()` to render SVG circles. Axis labels are added via `svg.append('text')`, with the plot sized to the browser window dimensions.

Loading thumbnail…

Activity6_q2

This visualization shows average horsepower, torque, and highway MPG for various car makes, displayed as a horizontal stacked bar chart sorted by total performance. The Chart.js library renders the bars, with each segment color-coded by metric. Data is loaded from a CSV file using PapaParse and grouped by make to calculate averages. The chart uses stacked axes to compare performance metrics across brands, with tooltips showing precise values.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar segmented into five rating levels from below 5.0 to above 8.5. The percentages reveal how genres like Documentary skew toward higher ratings while Action films concentrate in lower ranges. Using D3 v6, the visualization employs d3.stack() to compute stacked segments, d3.scaleOrdinal for color encoding, and d3.scaleBand for genre positioning. Interactive tooltips appear on mouseover, displaying precise percentage values. The chart renders as SVG, with data loaded from an external CSV file.

Loading thumbnail…

Activity 6

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name. The visualization uses React with D3 version 5, employing `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Data loads from a CSV file via `d3.csv`, with population values multiplied by 1000, and renders as SVG rectangles with tooltips. Axis components and marks are modularized as separate ES6 modules, with styling applied via CSS classes.

Loading thumbnail…

Fork of Question_1

This fork of Question_1 shows a horizontal bar chart comparing the populations of ten countries in the year 2000. It uses React with D3 v5 modules such as `scaleBand` and `scaleLinear` to map data from a CSV file loaded via `d3.csv`. The SVG rendering includes bottom and left axes, with a custom tick formatter converting values like "G" to "B" for billions. Tooltips display the formatted population values on hover.

Loading thumbnail…

Activity6_q1.1

This horizontal bar chart displays population figures for the twenty most populous countries, with bars sorted by country name along the y-axis and population on the x-axis. Each bar includes a hover tooltip showing the formatted population value, and the chart is titled "POPULATION-2010" on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, while `Marks.js` renders SVG rectangles for each bar, and `AxisBottom.js` uses custom formatting to convert values to billions with a "B" suffix. The data is loaded from a CSV file using D3's `csv` function.

Loading thumbnail…

Question_1

This example shows population data for 20 countries as a horizontal bar chart. The bars’ lengths encode each country’s population value, with country names on the y-axis and a bottom axis formatted in billions. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` elements. The CSV data is loaded via `d3.csv`, and tooltips display the formatted population using the D3 `format` API.

Loading thumbnail…

6 BUDDHAS

Six Buddhas displays layered, opaque Buddha silhouettes from a single SVG path, each repeated at random positions and scales in saturated blue, green, and red tones over a photographic flower background. The React app renders nested array maps that generate hundreds of overlapping copies with randomized coordinates, radii, and fill colors via `Math.random()`. Using React 16.10 and ReactDOM, the visualization relies on SVG `<path>` and `<null>` elements to create a dense, kaleidoscopic composition. The code imports no external visualization libraries, instead leveraging brute-force repetition and procedural color generation.

Loading thumbnail…

5 Buddhas

Five overlapping buddha silhouette paths repeat across a black background, rendered as colorful polygons rotated in place. Random point coordinates feed React-generated SVG polygon elements, while fixed path data draws each buddha figure. The dense, translucent shapes build a layered mandala-like composition, with the buddha paths reused five times at different scales and positions to create visual depth.