guruabhay294@gmail.com

@Guru-Abhay-Magapu·13 public vizzes

Activity_7_2

This example displays an area chart of monthly sales data, using a steel blue filled path to show the trend across categories. It loads data from a CSV file hosted on GitHub and renders the visualization as an SVG. The code uses D3.v7’s `scaleBand`, `scaleLinear`, `area` generator, and axis functions to construct the plot, including an axis label for months and sales, plus a simple legend indicating the series.

Nov 6, 2024

Loading thumbnail…

Activity_7

This example visualizes market share by category as a pie chart with a sorted legend showing each category’s percentage. It loads CSV data from a remote GitHub source, computes arc positions with `d3.pie` and renders slices via `d3.arc` into an SVG. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, while the legend displays sorted percentages beside the chart. The code demonstrates D3 v6 loading via UNPKG and local ES6 module imports.

Nov 6, 2024

Loading thumbnail…

Activity6_Task4(Question 4)

This bubble chart visualizes the distribution of IMDb-style ratings across six movie genres, showing the proportion of titles in each rating range from "below 5.0" to "above 8.5". Each circle's size corresponds to the percentage value, with genres spaced along the x-axis and rating proportions on the y-axis. The visualization uses D3 v7 to load CSV data, apply square-root scaling via `d3.scaleSqrt`, and render SVG circles with interactive tooltips on mouseover. Animated transitions on tooltip opacity enhance user feedback when exploring the genre-rating relationships.

Oct 22, 2024

Loading thumbnail…

Activity6_Task4(Tutorial)

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s x-position maps to horsepower, its y-position to torque, and its radius to highway MPG, while its color encodes the car manufacturer. The visualization is built with D3.js v7, loading data from a local CSV via `d3.csv`. Interactive tooltips appear on hover, showing the make of each car. The chart also includes a legend for the bubble-size scale and a categorical color legend, all rendered as SVG with animated transitions.

Oct 22, 2024

Loading thumbnail…

Activity6_Task3(Tutorial 3.1)

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower sample. Points are color-coded by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange fills. The visualization uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axis scaling, and `axisLeft`/`axisBottom` for rendering axes. SVG circles represent data points, with axis labels styled in green. The chart renders full-window with margins, displaying sepal dimensions as dataset attributes alongside the plotted petal measurements.

Oct 22, 2024

Loading thumbnail…

Activity6_Task3(Question 3)

This scatter plot visualizes the relationship between horsepower, torque, and highway MPG for a set of cars, using color to encode the third variable. The visualization is rendered as an SVG using D3 v6, with the code leveraging `d3.csv` to fetch data, and `d3.scaleLinear`, `d3.scaleSequential`, `d3.interpolateBlues`, `d3.axisLeft`, and `d3.axisBottom` to build the plot, axes, and color scale. The dataset is loaded from a GitHub-hosted CSV file, and the chart fills the browser window.

Oct 22, 2024

Loading thumbnail…

Activity6_Task3(tutorial 3.2)

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length and encoding species with distinct marker shapes. It loads data from a CSV file hosted on GitHub, parsing and converting numeric fields. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `axisLeft`, and `axisBottom` to construct the plot, axes, and a custom shape legend. The chart updates dynamically as data loads, demonstrating modular ES6 imports and a state-based rendering pattern.

Oct 22, 2024

Loading thumbnail…

Activity6_Task2 (question2)

This stacked bar chart visualizes the mean measurements of sepal length, sepal width, petal length, and petal width for three iris species: setosa, versicolor, and virginica. Each horizontal bar represents a species, segmented into colored sections corresponding to each measurement type, with tooltips displaying exact mean values on hover. The visualization loads data from iris.csv using D3 v7, applying a linear scale for the x-axis and a band scale for the y-axis. It employs `d3.stack()` to compute stacked bar segments, `d3.scaleOrdinal()` for color encoding, and renders all elements as SVG with interactive mouseover tooltips.

Oct 22, 2024

Loading thumbnail…

Activity6_Task2 (tutorial)

This example uses a stacked bar chart to show the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating range (below 5.0 to above 8.5) as a percentage. The chart loads data from a local CSV file and renders it as SVG using D3 v7, employing `d3.stack()` to compute the stacked segments, `d3.scaleOrdinal` for color coding, and `d3.scaleBand` for the categorical y-axis. Interactive tooltips appear on hover, displaying the exact percentage for each genre-rating combination, while axis labels and a title provide context.

Oct 22, 2024

Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the population of ten countries for the year 2000, with bars arranged in descending order from top to bottom. It uses React with SVG rendering and D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Each bar includes a `<title>` element for tooltip support, and axes are created with D3’s `format` function to abbreviate large numbers. The data is loaded remotely as a CSV file using the `csv` function from D3.

Oct 22, 2024

Loading thumbnail…

acitivity6_task1(2)

This interactive bar chart displays the 2010 population data for 20 countries, ranked from highest to lowest. Built with React and D3 v5, it renders SVG rectangles whose lengths are scaled linearly by population. The chart uses D3's `scaleBand` for categorical country labels, `scaleLinear` for quantitative values, and a custom number formatter that abbreviates large figures with 'B' for billions. Data loads remotely as CSV through D3's `csv` function, with tooltips showing formatted population values.

Oct 22, 2024

Loading thumbnail…

6 Buddhas

Six Buddhas overlap in a vertical stack, each a violet SVG path drawing of the same seated Buddha figure, scaled and translated to create a cascading, layered composition against a photographic flower background. The React app renders the paths via JSX inside an SVG element, with each Buddha’s transform applied through a group element. The original Buddha path data is reused across all six instances, demonstrating how SVG scaling and positioning create visual repetition and depth.

Oct 18, 2024

Loading thumbnail…

2 buddha

Two overlapping, multicolored Buddhas emerge from a dense scatter of semi-transparent circles on a black background. The piece layers one large, detailed vector path of a Buddha figure atop a second, smaller copy, both rendered with a thick stroke. Built with React and ReactDOM, the visualization generates hundreds of circles with random positions, colors, and opacity values, while the Buddha silhouettes are defined by complex SVG path data, creating a vibrant, chaotic abstract composition.

Oct 14, 2024