yadlapallisaisathvik@gmail.com

Activity 7.1.2

This area chart visualizes LEGO sales over the past decade, showing a smooth, curved trend of annual revenue growth. The visualization uses D3 v5 APIs, including `area` and `line` generators with `curveBasis` for smooth interpolation, along with `scaleTime` and `scaleLinear` for axes. Gridlines and axis labels are rendered via `axisBottom` and `axisLeft`. Data is loaded from a CSV hosted on GitHub, parsed with `timeParse`, and displayed as an SVG with a steelblue filled area and darkblue line.

Actvity 7.1.1

This pie chart depicts the distribution of car models by brand, aggregated from a CSV file of individual car records. The visualization uses D3 v5 to generate SVG arcs, with an interactive tooltip revealing each brand's model count and percentage on hover. A legend displaying brand names, color swatches, and formatted model counts accompanies the chart, and the code explicitly uses `d3.pie`, `d3.arc`, `scaleOrdinal`, and `schemeCategory10` for rendering and color assignment.

Activity6_tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with bubble size encoding MPG and color distinguishing makes. Built with D3 v7, it uses SVG circles positioned by linear scales for torque and horsepower, with a legend for MPG values and a tooltip displaying car make on hover. The chart also includes a color legend for all makes, and data is loaded from a CSV file.

Activity6_task4

This bubble chart visualizes the correlation between average sugar, weight, and calories across various food items from a CSV dataset. Each circle’s x-position maps to weight, y-position to sugar, and radius to calorie content, with color distinguishing food type via the d3.scaleOrdinal and schemeCategory10 palette. The chart includes interactive tooltips on mouseover, plus legends for both calorie radius and food categories. Built with D3 v7, it renders as SVG and uses d3.axisBottom and d3.axisLeft for scales.

Fork of Activity6_tutorial4

This bubble chart visualizes the correlation between price and average battery life for various watch brands. Each circle represents a watch model, with its horizontal position indicating price and vertical position indicating battery life, while the circle’s size and color both encode price. Built with D3.js (v7), the visualization uses `d3.scaleLinear` for axes and bubble radius, and `d3.scaleOrdinal` to assign colors from `d3.interpolateTurbo` for brand differentiation. Hovering a bubble triggers a custom tooltip showing brand, price, and battery life. A legend displays example circle sizes, and the data is loaded from a local CSV file.

Activity6_tutorial4

Activity6_task3

This example shows the relationship between car price and mileage with an interactive scatter plot. Each circle represents a vehicle, positioned by mileage on the x-axis and price on the y-axis, with color encoding price ranges via a `d3.scaleThreshold` (green, yellow, orange, red). Hovering over a point enlarges the circle and reveals the make, model, and price in a temporary text tooltip. The chart uses `d3.csv` to load external data and renders axes and circles as SVG, with a legend summarizing price bins.

Activity6 Tutorial3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). It renders as an SVG using D3 v6, employing `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map scales, and draw axes. The code also applies a custom marker function to assign species-specific colors to each circle. Data is sourced from a raw GitHub CSV file, with page-filling dimensions based on `window.innerWidth` and `window.innerHeight`.

Fork of Activity6 Tutorial3

A scatter plot visualizes the relationship between vehicle price and mileage for 21 used cars, with each point colored by price tier: green for under $25,000, yellow for $25,000–35,000, orange for $35,000–45,000, and red for over $45,000. Built with D3.js v7, the plot uses `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to render SVG axes and circles. Hovering over a point triggers a `d3.transition` that enlarges the circle and appends a temporary text tooltip showing the car’s make, model, and price.

Fork of Activity6_tutorial3.2

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis. Instead of using colors to differentiate species, the plot encodes species identity through distinct symbol shapes, such as circles, triangles, and crosses, with a corresponding legend at the right. The implementation uses D3.js v7 utilities like `scaleLinear`, `scaleOrdinal`, and `symbolGenerator` to position marks and generate the shape encodings. Data is loaded asynchronously from a remote CSV file and parsed with `csvParse`.

Activity6_tutorial3.2

This scatter plot of Fisher’s iris dataset uses D3 v7 to visualize sepal length against petal length, with species encoded through distinct symbol shapes instead of colors. The code employs `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape mapping, and a custom `shapeLegend` to display the species key. Data loads from a remote CSV via `fetch` and `csvParse` before rendering.

Activity6_task2

This visualization shows the distribution of horsepower across ten car models, using a horizontal stacked bar chart where each bar represents a model and segments show the proportion of its power falling into five ranges from below 200 to above 800 horsepower. The chart uses a divergent color scale from green through purple, blue, yellow, and red, with model names on the y-axis and percentage on the x-axis. Built with d3.v7, it employs d3.stack() to create the stacked layout, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the continuous x-axis. Interactive tooltips display the exact percentage for each segment on mouseover, with data sourced from a CSV file containing proportional values that sum to one per car.

Trial and error

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, comparing the proportion of films within five rating bands from below 5.0 to above 8.5. Using D3 v7 with SVG rendering, the visualization employs `d3.stack()` to create the stacked segments, `d3.scaleBand()` for the genre categories on the y-axis, and `d3.scaleLinear()` for the percentage values. Interactive hover effects reveal exact percentages through a custom tooltip, with opacity changes highlighting the selected segment.

Fork of Activity6_tutorial2

This visualization displays the distribution of horsepower percentages across different car models using a stacked horizontal bar chart. Each bar represents a car model, with colored segments corresponding to horsepower ranges. The chart uses D3.js v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to compute and render stacked segments as SVG rectangles. Interactive tooltips, styled via CSS, reveal the exact percentage for each range on hover. Data originates from the included `data.csv`, read as a static D3 dataset.

Activity6_tutorial2

This stacked bar chart visualizes how IMDb movie ratings are distributed across six genres, showing the proportion of films falling into five rating brackets from below 5.0 to above 8.5. Each genre’s bar is segmented by rating category, with colors and a legend clarifying the categories, and hovering over a segment reveals the exact percentage via a tooltip. The visualization uses d3.v7’s `d3.stack` and `d3.scaleOrdinal` for data stacking and color mapping, with SVG rendering and axes created via `d3.axisBottom` and `d3.axisLeft`. Data comes from the included CSV file.

Activity6_tutorial2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five percentage-based rating categories from “below 5.0” to “above 8.5.” The data is loaded from a CSV file and rendered as SVG using D3 v7. The chart uses `d3.stack()` to compute the stacked series, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for the percentage scale. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment.

Activity6_Tutorial2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar segmented into five rating categories from "below 5.0" to "above 8.5." Hovering over a segment reveals its exact percentage via a tooltip. The visualization uses d3.v7 with SVG rendering, employing `d3.stack()` for the stacked data, `d3.scaleBand()` for genre positioning, and `d3.scaleLinear()` for the percentage axis, styled with custom CSS.

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within the VizHub environment, displaying the text “Hello VizHub!” centered in the browser. It loads D3 v5 from a CDN via UNPKG and uses the `select` API to target a `div` element and set its content. The code also illustrates importing a local ES6 module, `myMessage.js`, to supply the displayed string, with styling applied through an external CSS file.

Activity6_task1.2

Activity6_task1.1

Activity6_task1

Budha_Q3

A dense background pattern of semi-transparent colored circles, generated deterministically from nested array mappings, overlays a large, intricate SVG line drawing of a Buddha figure. The drawing is rendered as a single complex path, positioned and scaled via an SVG transform. The visualization uses React to construct the SVG elements, with circle positions, sizes, and fill colors determined by multiplication and random number generation, while the Buddha path is embedded directly in the markup.

5 buddha's