bhargavipagolu2025@gmail.com

Activity-7_Q2

This area chart visualizes Tesla EA deliveries over time, using quarter-based data points plotted on a continuous numeric axis. The visualization loads data from a GitHub-hosted CSV file and renders an SVG area chart with a light blue fill and stroke. Built with D3 v7, the code uses `scaleLinear` for both axes, `d3Area` to generate the area path, and `axisBottom` with `axisLeft` for tick marks and labels. A custom quarter-parsing function converts date strings into numeric timeline values, and formatted tick labels display the year and quarter.

Activity_7 Q1

This pie chart displays total sales aggregated by product category from a CSV dataset, with slices color-coded using Tableau10 and labeled directly on the chart. The visualization uses D3 v7 APIs including `d3.csv`, `d3.rollups` for aggregation, `d3.pie` for arc generation, and `d3.arc` for rendering SVG paths. The chart also includes hover effects with a tooltip and a legend, with data loaded from a GitHub-hosted Sales.csv file.

Activity7.1_Q1

This pie chart displays the average horsepower distribution across the top 10 car makers, with all remaining manufacturers aggregated into an "others" category. The visualization uses D3 v7's `d3.pie` and `d3.arc` generators to compute slice geometry, with `d3.scaleOrdinal` and `d3.schemeTableau10` providing color encoding. Data loads from a remote CSV file containing smartphone specifications, which the code aggregates and normalizes to percentages. Each slice includes percentage labels positioned via `arc.centroid`, while an HTML legend to the right maps colors to maker names.

Activity_7

This pie chart displays the percentage share of smartphone brands or models from a CSV file loaded from GitHub, with slices sized proportionally to each category’s value. The visualization renders slices using D3’s `d3.pie` and `d3.arc`, with percentage labels positioned via `arcLabel.centroid` and a supplementary legend constructed from SVG rects and texts. Data is processed using helper functions that detect label and value columns, filter null entries, and normalize sums exceeding 100 into percentages. The chart uses D3 v7’s `d3.csv` fetch, `d3.rollup` for counting, and `d3.scaleOrdinal` with the Tableau10 color scheme for categorical coloring.

Fork of Hello VizHub

This D3.js pie chart visualizes the global smartphone market share from a CSV file, displaying each brand or model as a colored slice with a percentage label and a legend on the right. The chart loads data from a GitHub-hosted CSV, dynamically detects label and value columns, and optionally normalizes values to percentages. It uses `d3.csv`, `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with the Tableau10 color scheme, and renders the visualization as an SVG. The code also demonstrates flexible CSV header detection and data preprocessing.

Activity 7_1

This pie chart displays the market share of smartphone brands, using percentage labels for slices above 5% and a legend listing each brand alongside its count. The visualization is rendered as SVG using D3 v7, with the `d3.pie()` layout, `d3.arc()` for the path geometry, and `d3.scaleOrdinal` for categorical coloring. Data is loaded from a CSV file via `d3.csv()`, and the chart is positioned with a translated group. The code also adds generic X and Y axis labels, even though no axes are present.

Activity 6 Bubble chart

This bubble chart displays the correlation between average torque, horsepower, and highway MPG for various vehicle makes. Each bubble represents a car model, with its x-position mapped to horsepower, y-position to torque, and bubble size scaled by highway MPG. The color of each bubble indicates the vehicle's make, with a legend showing the mapping. Built with D3.js v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `interpolateTurbo` for colors, and includes interactive tooltips on hover. Data is loaded from an external CSV file.

Bubble chart

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius and color represent highway MPG and make, respectively. Hovering a bubble reveals its make via a tooltip. The chart is rendered as an SVG with d3.csv loading, d3.scaleLinear for axes and sizing, d3.scaleOrdinal for colors, and d3.interpolateTurbo for the color palette, including a legend and hover animations.

bubblechart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes from a CSV file. Each bubble's x-position encodes horsepower, its y-position torque, and its radius highway MPG, with color representing the make. The chart uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with d3.interpolateTurbo for color, and d3.axisBottom and d3.axisLeft for axes. Interactive tooltips display the make on hover, implemented via d3.select and event handlers. SVG rendering is used with fixed margins and dimensions.

Activity 6

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) for cars, with points colored and shaped by origin (USA, Europe, Japan). The visualization uses d3.csv to load data from a GitHub-hosted CSV file and renders the chart as an SVG with d3.v7. Interactive tooltips appear on mouseenter to display car details, while a legend indicates the mapping between shape, color, and origin. The implementation uses d3.scaleOrdinal, d3.symbol, and d3.axisBottom/axisLeft to create the marks and scales.

Activity 6

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with points colored and shaped according to species. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbol` generator, and custom `axes` and `shapeLegend` modules to render the chart and its legend. Data is fetched from a raw CSV file on GitHub and parsed with `csvParse`. The plot updates responsively to the browser window size and includes labeled axes and a legend showing the three species categories.

Fork of Activity 6

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length and distinguishing species by shape. The visualization uses D3 v7's `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and a custom legend. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, with numeric fields converted to numbers. The plot renders using SVG `path` marks positioned by D3 scales.

Activity 6 scatterplots

This scatterplot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis, with each species represented by a distinct symbol shape. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal with symbolsFill to differentiate species. It loads CSV data via fetch and d3.csvParse, then renders the plot through a custom scatterPlot function that calls axes and shapeLegend modules. The shape legend displays the species mapping, while d3.axisBottom and d3.axisLeft provide the labeled axes.

Activity 6

This visualization presents a stacked horizontal bar chart that compares the distribution of user satisfaction ratings across six mobile phone brands. Each bar represents a brand, and its segments show the percentage of responses within rating buckets, from below 4.0 to above 8.0. The chart allows viewers to see how each brand’s ratings are distributed, with many brands showing a peak in the higher rating ranges. The chart is rendered using the d3.js library, specifically leveraging `d3.stack` to create the stacked segments and `d3.scaleOrdinal` for color encoding. The SVG output includes custom axis labels, a title, and tooltips for interactive exploration. Data is loaded from a hardcoded array in the script, which mirrors the structure of the provided CSV, showing the same buckets and percentages.

Activity 6

This bar chart displays the population of 20 countries for the year 2010, sorted by country name along the y-axis. The visualization uses React with D3 v5 scales, rendering an SVG with colored horizontal bars. D3’s `scaleBand` and `scaleLinear` map country names and population values, while the tick format converts values to billions. Data is loaded from a remote CSV via D3’s `csv` method, and interactive tooltips appear on each bar using SVG `<title>` elements.

Fork of 6 Buddha

This visualization displays a single, large Buddha silhouette rendered as an SVG path, repeated and scaled within a 960 by 1000 pixel viewport. The code uses React to structure the SVG elements, with the path data embedded directly in the source. A background image of flowers is applied via CSS, and the Buddha paths are filled with random RGB colors. The example demonstrates programmatic SVG rendering and random color generation within a React component.

Fork of 6 Buddha

This example displays a single, large geometric figure rendered in red SVG paths over a floral background image. The visualization is built with React and uses inline SVG path data to draw the intricate, buddha-like shape. The code includes commented-out map functions that generate random circles, but the active rendering relies on the hard-coded path coordinates. The page applies a background image via CSS and centers the SVG within a full-viewport container, with the figure scaled and positioned using SVG transform attributes.

Fork of 6 Buddha

A Buddha silhouette is drawn as a single SVG path in red on a background image of green flowers. The path data is embedded directly in the code, rendered with React into an SVG element with a fixed width and height. The visualization uses React's `createElement` and `ReactDOM.render` to display the static graphic, with CSS applied for styling and the background image.

5Buddha

A set of five Buddha-themed SVG path drawings appears over a floral background image. The React application renders each Buddha as a complex, hand-defined SVG `<path>` element, transformed and scaled within an `<svg>` container using JSX. The code includes computed arrays and mathematical functions, though the primary visualization relies on static path data. The project uses React 16.10 and ReactDOM, with the background set via CSS. The rendering is fully SVG-based, with no data-driven or interactive elements visible in the provided source.

Fork of 2 budha reflection

A generative SVG composition renders repeated, randomly placed semitransparent polygons in vivid colors over a black background, forming a layered, abstract meditation on multiplicity and reflection. The polygons are generated by nested loops over a fixed numeric array within a React component, using JavaScript’s `Math.random()` for coordinates and fill values, and a rotation transform. The artwork also embeds a large, hand-coded Buddha silhouette path, scaled and translated via SVG `<g>` and `<path>`, creating a dense, overlapping visual that blends algorithmic chaos with a sacred icon.

Fork of 5 budha

This visualization displays a kaleidoscopic arrangement of hundreds of randomly colored, rotated polygons layered over a detailed Buddha path. The polygons are generated procedurally within nested React map functions, with each vertex position and fill color randomized using `Math.random()`. The Buddha silhouette is rendered as an SVG path with a complex cubic Bézier curve, transformed and scaled within a `<g>` element. The piece is built with React and ReactDOM, outputting to SVG on a black background.

5 budha

5 budhas

A grid of tiny, randomly placed circles creates a colorful, textured backdrop, while an intricate Buddha silhouette—defined by a single detailed SVG path—is drawn in white on top. The piece layers five identical overlapping Buddha forms generated through nested loops in React. Rendered with React and ReactDOM, the visualization uses SVG circles and a path with a stroke, combining generative random color and positioning with a fixed geometric figure against a black background.