S

sanjanaadapa7@gmail.com

@sanjanaadapa7·20 public vizzes

Loading thumbnail…

activity-7.1-q5

This visualization shows the average applicant income across three property area categories: Rural, Semiurban, and Urban. The chart uses a filled area path rendered with D3's `d3.area()` generator, with an x-axis scale band and linear y-axis scale. Data is loaded asynchronously from a GitHub Gist CSV file and aggregated using `d3.rollups` with `d3.mean` to compute average incomes per group. The SVG output includes labeled axes for property area and income values.

Loading thumbnail…

activity-7.1 -q1

A pie chart displays the distribution of loan approval statuses for ten loan applications, with green segments representing approved loans ('Y') and red segments representing denied loans ('N'). The visualization uses d3.pie and d3.arc to generate the chart, while d3.rollup aggregates the data to count statuses. A legend and labels on each segment show the status and count, rendered as SVG within an HTML page using D3 v6.

Loading thumbnail…

Activity_7.1

This pie chart visualizes the distribution of loan types from a CSV dataset loaded via `d3.csv`. Each slice is generated using `d3.pie()` and rendered as an SVG path with `d3.arc()`, colored by `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart includes a legend with colored rectangles and text labels, while slice labels are placed using the arc’s `centroid` method. The code uses D3 v6, an SVG container, and explicit width, height, and margin settings.

Loading thumbnail…

Activity_7.1 q1

This pie chart visualizes the distribution of student performance categories, with each slice labeled and colored according to its category. The visualization uses D3 v7’s `d3.pie()` and `d3.arc()` to generate the slices, while `d3.scaleOrdinal` with `schemeSet2` assigns colors. Data is loaded asynchronously from a CSV file hosted on GitHub Gist and rendered as an SVG, with a legend positioned to the right of the chart to identify each category.

Loading thumbnail…

Activity6_Task4(9)

This bubble chart visualizes the Penguins dataset, showing the relationship between bill length and flipper length, with bubble size representing body mass. The species are distinguished by color: Adelie in red, Chinstrap in green, and Gentoo in blue. The code loads data from a CSV file and uses D3 v7 scales, including `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for species colors, and `d3.axisBottom` and `d3.axisLeft` for the axes. A legend identifies the three species.

Loading thumbnail…

Activity6_Task4(9)

This example demonstrates how a D3.js visualization can integrate ES6 modules and external libraries within a VizHub project. It uses D3’s `select` function to update the text content of a DOM element, while importing a custom message from a local module. The page loads D3 v5 via a CDN and relies on a bundled script to execute the code. A CSS rule centers the displayed message, which is set to "Hello VizHub!"

Loading thumbnail…

Activity6_Task4

This scatter plot visualization shows the correlation between average horsepower, torque, and highway MPG across different car makes, with each bubble representing a make and its size encoding the highway MPG value. The chart uses D3.js v7 to render an SVG with linear scales for the x and y axes, a third scale for bubble radius, and an ordinal color scale with interpolated turbo colors to distinguish makes. Interactive tooltips display the make name on hover, while a legend explains both the bubble size encoding and the color categories.

Loading thumbnail…

Activity6_task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across more than 30 car makes. The size of each bubble encodes fuel efficiency, while the color distinguishes car brands. Built with D3 v7, the visualization renders as SVG and includes interactive tooltips on hover, a legend for bubble size, and uses d3.scaleLinear for the axes and d3.scaleOrdinal for color mapping.

Loading thumbnail…

activity6_task3(6)

This scatter plot displays the relationship between bill length and flipper length for three penguin species (Adelie, Chinstrap, and Gentoo) from the penguins.csv dataset. Circle color encodes species via a d3.scaleOrdinal, and circle radius encodes body mass. The visualization renders as an SVG using D3.js v7, with linear scales (d3.scaleLinear) mapping the measurements to axes and d3.axisBottom/axisLeft generating the tick marks and labels.

Loading thumbnail…

activity6_task3.2

This example displays a scatter plot of the Iris dataset, mapping sepal length against petal length, with the categorical species variable encoded by point shape. The visualization includes a custom shape legend that clarifies the mapping between symbols and species. The code builds the chart using D3.js v7, employing a functional selection-based approach with `selectAll`, `join`, and `call` for composing the plot, axes, and legend. Data is loaded from a remote CSV file using `d3.csvParse`.

Loading thumbnail…

activity6_task3

This example displays a scatter plot of the Iris dataset, using petal length and sepal length as the x and y axes while encoding species identity through circle color. The visualization is rendered as an SVG using D3 v6, leveraging the `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` APIs from the library. Data is loaded from a remote CSV file, and axis labels are added as static text elements. The circles’ `rx` and `ry` attributes are set to the sepal width and petal width values, though the radius is fixed at 5 pixels.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the proportion of five taste categories—sour, bittersweet, sweet, very sweet, and extremely sweet—for five fruits: Apple, Banana, Orange, Mango, and Grapes. Each horizontal bar represents one fruit, segmented by taste category using a sequential color scale, with a legend on the right. Hovering over a segment displays a tooltip with the exact proportion value. The visualization is built with D3.js v7 using `d3.stack`, `scaleLinear`, and `scaleBand`, rendering as SVG, and loads data from a local CSV file.

Loading thumbnail…

activity 6_Task 1.2

This bar chart visualizes the top 20 countries by population for the year 2010, using a horizontal layout with countries on the y-axis and population on the x-axis. It uses React with D3 v5 scales (scaleBand, scaleLinear) to position SVG rectangles, with axis components rendering ticks and labels. Data loads from a CSV via d3.csv, and tooltips display formatted population values using d3.format.

Loading thumbnail…

2 reflections to 6 reflections

This visualization displays a decorative Buddha silhouette repeated across the canvas, with overlapping copies creating a layered, colorful pattern. The code uses React to render SVG elements, mapping over arrays to generate multiple circles and paths with random positions and colors. A single path defines the Buddha shape, which is transformed and scaled to create two reflections that combine into six visible reflections. The background features a flower image via CSS, while the SVG renders with random opacity and RGB values.

Loading thumbnail…

5 budhas

Five buddha-like figures are drawn in black and white across a large SVG canvas. The visualization is rendered with React and ReactDOM, using nested map functions to generate hundreds of small, randomly positioned and colored circles as a background texture. Overlaid on top are five identical, intricate SVG path outlines of a buddha, each transformed with a `translate` and `scale` attribute. The paths are hardcoded, while the circle positions and colors are generated through JavaScript's `Math.random()`.

Loading thumbnail…

Fork of Fork of 5 budha

A dense, abstract generative composition displays a field of small, randomly rotated and colored polygons layered across an SVG canvas. The artwork is built using React with JSX, mapping over a numeric array to render hundreds of `<polygon>` elements whose positions, fill colors, and rotation transforms are determined by `Math.random()`. A large embedded Buddha silhouette path is also included, rendered as SVG markup within the same black-background scene. The code uses React and ReactDOM to mount the visualization, with styling applied via plain CSS.

Loading thumbnail…

2 reflections

A field of randomly placed semi-transparent circles in black, red, and white creates a scattered, generative backdrop. Overlaid on this is a single resplendent, golden Buddha silhouette drawn as an SVG path. The design uses React with nested `map` functions to generate the circles and a static `path` element for the figure, rendered via ReactDOM.

Loading thumbnail…

Fork of 5 Buddhas

A black-background React visualization displays thousands of randomly positioned, semi-transparent circles in muted reds and greens, overlaid by a large white Buddha silhouette drawn as an SVG path. The circles are generated through triple-nested array maps with randomized coordinates and RGB fills, while the Buddha path uses fixed coordinates with custom stroke styling. Built with React 16.10 and rendered via SVG, the example combines procedural generative art with a static religious icon.

Loading thumbnail…

Fork of 5 budha

This example renders a dense field of semi-transparent, randomly rotated polygons generated from the nested mapping of a numeric array, layered over a stylized vector path of the Buddha. The chaotic, multicolored geometric backdrop is produced with React’s `map` function and SVG `<polygon>` elements, while the `<g>` transform applies scaling and translation to position the intricate path data. The visualization demonstrates generative art using raw SVG coordinates and React’s declarative rendering, with random values controlling color, position, and rotation.

Loading thumbnail…

5 Buddhas

Five Buddhas presents a generative mandala of overlapping, translucent circles rendered in SVG. The piece maps a triple-nested loop over an array of numbers to position circles at randomized coordinates, with colors derived from random RGB values. Built with React and ReactDOM, the visualization also layers a fixed SVG path drawing of a Buddha figure, scaled and translated on top of the generative field.