A

Aamani Chamarthi

@aamanichamarthi·17 public vizzes

Loading thumbnail…

Activity 7 question 2

This example visualizes genre ratings as a filled area chart, with each genre represented as a distinct colored area overlaid on a shared axis. The chart loads CSV data from a GitHub repository via `d3.csv`, uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, and renders paths with the `d3.area` generator. It includes axis labels, a title, and a legend built with SVG rectangles and text. Colors come from `d3.schemeCategory10`.

Loading thumbnail…

Activity 7

This example visualizes the distribution of movies rated above 8.5 by genre as a pie chart, with a custom legend using distinct D3 symbols (circles, squares, triangles, diamonds, and crosses) for each genre. It loads CSV data asynchronously via `d3.csv`, converts the relevant column to numbers, and renders the chart as SVG using `d3.pie` and `d3.arc`. The visualization uses a color scale with `d3.schemeCategory10` and includes axis labels and a title, though no axes are drawn.

Loading thumbnail…

Activity 6 Question 4

This visualization displays the correlation between sepal length, sepal width, and petal length in the classic Iris dataset. Circles positioned by the x- and y-axes show sepal measurements, while radius encodes petal length. Species are distinguished through a color scale using `d3.scaleOrdinal` and `d3.interpolateTurbo`. Interactive tooltips appear on mouseover, powered by D3 event handlers. The plot includes labeled axes, a title, and a species legend, all rendered as SVG.

Loading thumbnail…

Activity 6 tutorial 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while the radius represents highway MPG and color distinguishes the car brand. The visualization uses d3.csv to load the data, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal for color mapping. Interactive tooltips appear on mouseover using D3 event handlers, with a legend showing MPG values and car-make color codes.

Loading thumbnail…

Activity 6 tutorial 4

This example demonstrates how VizHub supports ES6 modules and D3.js integration within a simple web page. It shows a static message, "Hello VizHub!", displayed prominently in the center of the screen using large text styling. The code imports the `select` function from D3 and a local `message` constant from a separate `myMessage.js` module, then applies the text to a `div` element. D3 is loaded via UNPKG, and the page structure is defined in `index.html` with accompanying CSS.

Loading thumbnail…

Activity 6 question 3

This scatter plot visualizes car dataset attributes, mapping horsepower on the x-axis and highway MPG on the y-axis. Points are colored by make using D3’s `scaleOrdinal` with `schemeTableau10`, and axes are generated via `axisLeft` and `axisBottom`. The code loads CSV data from GitHub using `d3.csv`, applies linear scales with `scaleLinear`, and renders circles and a legend in SVG. The visualization demonstrates D3 v6 data joining and margin-based layout within a full-window responsive viewport.

Loading thumbnail…

Activity 6 tutorial 3.2

This example shows an interactive scatter plot of the Iris dataset, plotting sepal length against petal length and distinguishing species by shape using symbols from `d3.symbol` and the `symbolsFill` scale. The visualization loads CSV data from a GitHub repository, parses it with `d3.csvParse`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. A custom legend clarifies the species shapes. The code uses modular ES6 imports from D3 v7, including `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent`, built within a VizHub framework.

Loading thumbnail…

Activity 6 tutorial 3.1

This example visualizes the Iris dataset with a scatter plot of petal length against petal width, where each circle’s color encodes the three species (setosa, versicolor, virginica) via a switch statement. The code loads CSV data with d3.csv, maps it into x/y positions using scaleLinear and extent, and renders SVG circles with attributes for fill and radius. Axis labels and tick marks are generated with d3.axisLeft and d3.axisBottom, while an inner text element adds rotated labels for both axes.

Loading thumbnail…

Activity 6 question 2

This visualization displays the percentage breakdown of four iris flower measurements (sepal length, sepal width, petal length, petal width) for each of the three iris species. Built with D3 v7, it uses a horizontal stacked bar chart where each bar represents a species, and colored segments show the proportional contribution of each measurement. The code employs `d3.stack` to compute the stacked data, `d3.scaleLinear` for the percentage axis, and `d3.scaleBand` for the categorical species axis. Interactive tooltips reveal exact percentage values on hover, while the SVG rendering uses `d3.select` and `d3.append` to construct the chart and handles.

Loading thumbnail…

Activity 6 tutorial 2

This example shows a stacked bar chart of IMDb movie ratings by genre, with each bar segmented into five rating ranges from below 5.0 to above 8.5. The code loads D3 v7 via UNPKG and uses d3.stack, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand to process and render the data. It includes interactive tooltips on mouseover that display the exact percentage for each segment. The chart is rendered as SVG with an axis, legend, and labels, using data from a CSV file.

Loading thumbnail…

Activity 6 question 1_2

This bar chart displays the population of 20 countries in 2010, using horizontal bars ordered by country name. The visualization loads CSV data from GitHub via `d3.csv` and renders as an SVG using React components (AxisBottom, AxisLeft, Marks) with scales from `d3.scaleBand` and `d3.scaleLinear`. The x-axis uses `d3.format` to abbreviate population values (e.g., converting gigabytes to billions). Hovering over each bar reveals the exact population through an SVG `<title>` tooltip.

Loading thumbnail…

Activity 6 question 1_2

This example demonstrates a minimal visualization environment powered by VizHub, showing how to integrate D3 with ES6 modules. It renders the text “Hello VizHub!” centered on the page using D3’s `select` and `.text()` methods to update the DOM. The code imports `select` from D3 and a local string from `myMessage.js`, while loading D3 v5 from a CDN via UNPKG. A simple stylesheet applies 12em font sizing and text alignment, with no data or charting logic involved.

Loading thumbnail…

Activity question 1

This example renders a horizontal bar chart displaying the population figures for ten countries in the year 2000, with the largest populations extending furthest to the right. The visualization is built using React and the D3.js library, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Axes are constructed via the custom local `AxisBottom` and `AxisLeft` modules, while the bars are drawn as SVG rectangles with a hover tooltip showing the formatted value. Data is loaded asynchronously from a specified CSV file using D3's `csv` function.

Loading thumbnail…

activity 6 task 1

This horizontal bar chart displays the 2020 populations of 30 countries, sorted from largest to smallest. The visualization loads data from a CSV file via `d3.csv`, processes it with React state management, and renders the chart using SVG. D3’s `scaleBand` and `scaleLinear` map countries to horizontal bars, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the ticks and rectangles. The x-axis labels are formatted using `d3.format` with a custom function that converts gigabytes to billions.

Loading thumbnail…

aamani question3

This example creates a layered, multi-colored Buddha silhouette by rendering a complex SVG path repeatedly with varying scales, positions, and stroke colors. The React application maps over nested arrays to generate multiple `<image>` elements of a flower photograph, though these are obscured by the prominent path. The central visual is a detailed vector path, drawn with a thick white stroke and violet fill, transformed and duplicated to produce an overlapping, psychedelic effect against a black background. The code uses React and ReactDOM for structure, while relying on raw SVG path data and transformations for the visual composition.

Loading thumbnail…

overlapping Buddha-Aamani

A generative SVG artwork displays hundreds of semi-transparent, randomly colored and rotated polygons that overlap chaotically against a green background. The composition layers these shapes over a Buddha silhouette drawn as a complex SVG path, creating a dense, abstract collage where the figure emerges from the noise. Built with React 16.10, the visualization generates polygon coordinates and fill colors using JavaScript’s `Math.random()`, while the Buddha path is rendered directly as a `<path>` element.

Loading thumbnail…

aamani-overlapping budda

A generative SVG painting renders a repeated, rotated Buddha silhouette in vividly random colors against a black background. The code uses React to map a numeric array into hundreds of overlapping polygon elements, each with randomized fill, opacity, and transform values. Layered atop these polygons is a single detailed Buddha path drawn from embedded coordinate data, creating a kaleidoscopic, chaotic visual composition.