M

mohanalaharic@gmail.com

@mohana-chandolu·19 public vizzes

Loading thumbnail…

activity7.1_q1

This pie chart shows the 2023 share of US electricity generation by energy source, using a color-coded slice for each source with percentage labels and a legend. Built with D3 v7, it loads data from a provided CSV and uses `d3.pie()` and `d3.arc()` to compute slice geometries, rendered as SVG paths with hover tooltips. A total of 560×540 pixels accommodates the pie on the left and a legend on the right, with decorative axis titles for context. The chart is responsive via a `viewBox` and uses `d3.scaleOrdinal` for categorical colors.

Loading thumbnail…

Activity 7.1_Question2

This area chart visualizes the monthly airline passenger counts for 1958 from the classic AirPassengers time series dataset. It combines a blue gradient area fill with a solid line and circular data points, all rendered as SVG using D3 v7. The chart includes interactive tooltips on mouse hover and highlights the peak passenger month. It uses `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.axisBottom` to load, scale, generate, and render the visualization.

Loading thumbnail…

Activity 7_ Question1

This visualization shows the 2023 U.S. utility-scale electricity generation mix as a pie chart, with each slice representing an energy source’s share of total generation. D3 v7’s `d3.pie` and `d3.arc` generate the slices, while `d3.scaleOrdinal` assigns colors from the Tableau10 scheme. Percentage labels appear on slices exceeding three percent. A scrollable legend, sorted alphabetically, lists each category with its exact share. Data is loaded from a CSV via `d3.csv`, and the chart is rendered as SVG with a responsive `viewBox`.

Loading thumbnail…

Activity6_Question3

A scatter plot shows the relationship between study hours per day and GPA for 30 students, with points shaped and colored by academic track (CS, Data, or AI). The code uses D3 v7’s `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to render SVG paths with circles, triangles, and diamonds. Axes include grid lines, and a custom legend maps each track to its shape and color. Data is loaded via `d3.csv` from a remote gist.

Loading thumbnail…

Activity6_Task3.2

This visualization is a scatter plot of the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis. The plot uses different point shapes, drawn via D3's `symbol()` with `symbolsFill`, to represent the three Iris species, with a custom legend on the right side. The axes are created using D3's `axisLeft` and `axisBottom`, and the data is fetched from a remote CSV and parsed with `csvParse`. The visualization uses D3's scales (`scaleLinear`, `scaleOrdinal`) and is rendered as an SVG, with margins and labels for both axes and the legend.

Loading thumbnail…

Activity6_task3.2

This example renders a scatter plot of the Iris dataset, mapping sepal length and petal length along the axes while encoding species with distinct symbol shapes. The visualization loads data from a remote CSV file and uses D3 v7’s low-level modules—`scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol`—to construct the plot, axes, and a custom shape legend with translated tick marks. The code composes reusable modules for axes, legend, and scatter plot rendering, demonstrating a modular approach to building interactive SVG graphics.

Loading thumbnail…

Activity6_Question4

This bubble chart shows the relationship between a movie's production budget (x-axis), box office revenue (y-axis), and IMDb rating (bubble size and color) for ten well-known films. The plot uses a square-root scale for bubble radius and a sequential plasma color interpolator to encode ratings. Data is loaded from a remote CSV file using `d3.csv` and rendered as SVG circles with `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.axisBottom`/`d3.axisLeft`. Interactive tooltips display precise values on hover.

Loading thumbnail…

Activity6_Task4

A bubble chart visualizes the correlation between average torque, horsepower, and highway MPG for 31 car makes, with each bubble colored by make and sized by MPG. Hovering reveals a tooltip displaying the make. The chart uses d3.csv to load data, d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with d3.interpolateTurbo for colors, and d3.axisBottom/Left to render axes. SVG circles, a size legend, and a color legend are drawn, with mouseover, mousemove, and mouseleave events controlling the tooltip.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, displaying petal length against petal width, with each point colored by species (setosa, versicolor, or virginica) to highlight group separation. The chart reads the data from a CSV file and uses D3's `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and maps species to colors via a switch statement. Rendered as an SVG, the plot includes labeled axes for petal and sepal measurements, though the sepal length label appears misaligned. The visualization uses D3 v6 APIs, including `csv` for data loading and data join operations for drawing circles.

Loading thumbnail…

Activity6_Question2

This stacked bar chart shows the percentage of device usage (Mobile, Laptop, Tablet, TV) across five age groups, from 10-20 to 51+. The visualization uses D3 v7 with `d3.scaleOrdinal` for color encoding, `d3.scaleLinear` for the percentage x-axis, and `d3.scaleBand` for the age-group y-axis. Interactive tooltips appear on hover via the `mouseover`, `mousemove`, and `mouseout` events, displaying the exact percentage for each device segment. Data is loaded from a CSV file, and the chart is rendered as an SVG with a legend positioned to the right.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage of IMDb movie ratings within each genre, with each bar segment representing a rating band from below 5.0 to above 8.5. The visualization highlights how genres like Documentary skew toward higher ratings, while Action films have a larger share of low scores. The chart is rendered as SVG with D3 v7, using `d3.stack` to compute the stacked segments, `d3.scaleOrdinal` for the color scheme, and `d3.axisBottom` and `d3.axisLeft` for the axes. Hovering over a segment triggers a tooltip that displays the exact percentage value. The data is loaded from a CSV file containing genre and rating-level proportions.

Loading thumbnail…

Activity6_Question1.2

This example displays a horizontal bar chart of the top 20 countries by population in 2010, with countries categorized along the vertical axis and population scaled along the horizontal axis. The chart is built with React and D3 v5, using `scaleBand` for the categorical axis, `scaleLinear` for the numeric axis, and SVG `<rect>` elements as the primary visual marks. Interactive tooltips show the population value for each bar via SVG `<title>` elements. Data is loaded from a remote CSV file using D3's `csv` function, and labels are formatted using the `format` API.

Loading thumbnail…

Activity6_Question1.1

This visualization presents a horizontal bar chart comparing the populations of ten countries in the year 2000, sorted alphabetically by country name, with population values scaled to thousands. The chart uses D3.js scale functions to map the data to SVG rectangles, while React components structure the axes and marks. Data is loaded from a remote CSV file via D3's `csv` function, and tick labels are formatted using D3's `format` utility to abbreviate large numbers (e.g., “1.2B”).

Loading thumbnail…

Activity6_Question1.2

This example displays a horizontal bar chart ranking 20 countries by their 2010 population, using data from a CSV file loaded via d3.csv. It renders bars as SVG rectangles inside a React component, with d3.scaleBand mapping country names to y-axis positions and d3.scaleLinear mapping population values to bar widths. The chart includes formatted axis ticks via d3.format, a bottom axis label, and tooltips showing each bar’s value through SVG <title> elements.

Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population of 30 countries, ranked from largest to smallest. The visualization uses React components to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) positioning bars and axes. Population values are formatted with D3's Si-prefix format, converting billions to "B" notation. Data loads from a remote CSV file via d3.csv, and tooltips reveal precise population values for each bar.

Loading thumbnail…

activity 6_Task 1

This bar chart displays the populations of 30 countries for 2020, with countries listed along the vertical axis and population values extending horizontally. The visualization uses React and D3 v5, implementing custom `AxisBottom`, `AxisLeft`, and `Marks` components to render SVG elements. Population data is loaded via d3.csv, with values formatted using d3.format. Bars appear in green (#90ee90), while axes and labels use muted grays. The chart includes hover tooltips showing formatted population values, and the x-axis label indicates "POPULATION-2020".

Loading thumbnail…

6 Buddhas

Six Buddhas overlap in a vertical cascade, each rendered from the same hand-drawn SVG path and shifted diagonally across a 960×1000 canvas. The React component maps over six layer objects, applying increasing translation and decreasing scale to create a concentric, procession-like composition. Alternating black and white fills with white or red strokes are used, and each layer’s opacity decreases toward the center. The SVG path, a long `d` string, is reused directly, demonstrating how React and SVG can layer identical geometry with varied transforms and styling.

Loading thumbnail…

6 Buddhas

Six overlapping Buddha silhouettes form a radial mandala-like composition, with each figure rendered as a single SVG path filled with translucent color. Hundreds of small circles are scattered across the canvas with random positions and hues, creating a textured background that layers beneath the central figures. The React app uses `Array.map` to generate both the circular scatter and the repeating Buddha paths, with SVG `circle` and `path` elements drawn directly. The code applies the same path data six times with different `transform` translations and scales, while colors derive from stochastic RGB values.

Loading thumbnail…

5 Buddhas

Five Buddhas depicts five overlapping, differently colored Buddha silhouettes arranged across a black background. Each figure is rendered as an SVG path, surrounded by dense clusters of small, semi-transparent rotating polygons that are generated through nested loops and randomized properties. The visualization is built with React and uses ReactDOM to render the SVG elements, with the Buddha paths defined by complex coordinate data. The piece explores layering, color, and geometric repetition in a meditative composition.