ramyaraomadhavareddy@gmail.com

PieChart for Activity 7.1

This pie chart visualizes calories burned per 30 minutes across different exercises, using a dataset loaded via `d3.csv`. Each exercise occupies a slice with an extruded label and leader line, computed from start and end angles via the pie layout and `d3.arc` centroids. A color legend maps exercises to their corresponding slice colors. The chart is built with D3 v5, rendering arcs, labels, and leader lines as SVG elements.

Nov 7, 2024

Activity6_Task4_Questions

This animated bubble chart explores the relationship between book sales and price, with each circle representing a title and color-coded by author. The visualization uses d3.csv to load data and d3.scaleLinear to map sales and price values to x/y axes, circle radius, and color. Interactive tooltips appear on mouseover, showing the author name, while opacity transitions in CSS enhance hover feedback. The chart renders as SVG with d3.v7, although the legend code is partially commented out, leaving author colors unlabeled.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, sourced from CSV data. Each circle's position is determined by horsepower on the x-axis and torque on the y-axis, while its size encodes fuel efficiency. The visualization uses d3.scaleLinear for axes and bubble scaling, d3.scaleOrdinal with interpolateTurbo for color mapping, and d3.axisBottom and d3.axisLeft for tick marks. A tooltip, implemented with D3 selections, reveals the car make on hover, and a legend clarifies both MPG values and categorical color assignments.

Fork of Activity3questions

This scatter plot displays stock market data, with each point representing a stock's opening and closing prices. The visualization uses color to categorize stocks into three types: Tech, Finance, and Healthcare. The plot is rendered as an SVG using D3 v6, with data loaded from a CSV file hosted on GitHub. The code uses `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for axis rendering, and `d3.select` to append elements to the body.

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and petal width to the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The code uses D3 v6 methods including `csv` for data loading, `scaleLinear` for scaling, and `axisLeft`/`axisBottom` for axes, rendering circles as SVG marks. The plot also stores sepal measurements as additional attributes, though these are not directly plotted. Data comes from a GitHub-hosted CSV file, and the visualization fills the entire browser window.

Activity6_Task3 Questions

A scatter plot of the Iris dataset displays petal length on the x-axis and petal width on the y-axis, with circles colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses D3 v6 to load CSV data from a remote URL, scales via `scaleLinear`, and renders SVG circles with `selectAll().data().join()`. Axes are drawn using `axisLeft` and `axisBottom`, while sepal measurements are encoded as the circles' `rx` and `ry` properties, though the circles remain perfectly round.

Activity3Tutorial3.2

This example visualizes the iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct shape from D3’s `symbolsFill` array. A legend built with the `shapeLegend` module identifies the species symbols. The code uses D3 v7 (`d3.scaleLinear`, `d3.scaleOrdinal`, `d3.extent`, `d3.symbol`) to construct scales and generate marks via the `symbolGenerator`. Data is fetched as CSV from GitHub, parsed with `d3.csvParse`, and rendered responsively to the full window size. The axes and labels are drawn through a reusable `axes` module.

Oct 23, 2024

Task-2Q1

This stacked bar chart shows how student grades are distributed across five subjects, with each bar representing a student and colored segments showing the percentage of their total score in each subject. The visualization uses d3.stack() to create stacked series and d3.scaleOrdinal for color mapping, while d3.axisBottom formats tick labels as percentages. A tooltip appears on mouseover, displaying the exact percentage for each subject segment using d3.format. The data comes from a CSV file where scores are normalized to sum to 1 for each student.

Fork of Activity6_Task2_Q1

This stacked bar chart visualizes the percentage of five rating levels for different movies, showing how genre impacts audience ratings. Each movie’s bar is segmented by rating categories, with hover tooltips revealing precise percentages. The visualization uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` for color encoding, with `d3.scaleBand()` for the y-axis and `d3.scaleLinear()` for the x-axis. Data comes from a local CSV file, rendered as SVG rectangles with interactive mouse events for tooltip display.

Activity6_Task22

This stacked bar chart shows the percentage distribution of IMDb rating levels across six movie genres, highlighting how genre influences audience scores. Each bar represents a genre with colored segments for five rating brackets, from below 5.0 to above 8.5. Hovering over any segment reveals an exact percentage via a tooltip. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` for data transformation, `d3.scaleOrdinal()` for color mapping, and `d3.scaleBand()` for the categorical axis, all driven by a CSV file.

Activity6_Task2

This visualization presents the distribution of IMDb movie ratings across five genres, using a horizontal stacked bar chart where each bar segment represents the proportion of films falling into specific rating ranges, from "below 5.0" to "above 8.5." The chart is rendered as SVG using D3 v7. The implementation uses `d3.stack` to compute the cumulative segments, `d3.scaleOrdinal` for categorical colors, and `d3.axisBottom` and `d3.axisLeft` for the axes. A custom tooltip is created with `d3.select` and `d3.style`, showing the exact percentage on mouseover for each segment. Data comes from a CSV file containing genre-specific rating percentages.

Fork of Fork of activity6_Task1Question1

This bar chart displays the population of ten countries in the year 2000, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map data to SVG rectangles, with hover tooltips provided by the `title` element. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and axes are rendered through custom components.

Fork of activity6_Task1Question2

This example shows a horizontal bar chart comparing the 2010 population of 20 countries, with each bar labeled by country name and value. Population data is loaded from a GitHub-hosted CSV file via d3.csv, then converted from thousands to raw numbers. The chart is built with React components, using d3.scaleBand and d3.scaleLinear for positioning, SVG rectangles for marks, and d3.format to display tick labels with abbreviations like “1.2B.” Native SVG `<title>` elements provide tooltips on hover.

activity6_Task1

A horizontal bar chart displays the top 30 countries by 2020 population, with each bar’s length proportional to population and country names on the y-axis. The visualization uses React with D3 v5 to load CSV data via `d3.csv`, scale the values with `scaleLinear` and `scaleBand`, and render SVG rectangles through the `Marks` component. Axes are drawn with `AxisBottom` and `AxisLeft`, while tick labels are formatted using `d3.format` to abbreviate large numbers (e.g., “B” for billions). The chart's styling includes light green bars and blue axis lines.

activity 6_Task 1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, with each bar labeled by country name on the y-axis and labeled numeric population values on the x-axis. The chart uses D3’s `scaleBand` and `scaleLinear` to position the bars, and SVG `<rect>` elements for the marks, with hover tooltips displaying the formatted population value. The visualization is built with React and rendered using SVG elements, with the data loaded asynchronously from a CSV file. The axes are customized with blue tick lines and formatted tick labels via D3’s `format` function.

Buddha with Backgroud-RM

A Buddha silhouette rendered as an SVG path is overlaid on a green floral background image loaded via CSS. The visualization uses React to render the SVG graphic, with the path data embedded directly in the component. The code includes commented-out attempts to generate additional circles using nested array mapping and the `Math.random()` function, though these are not active. The final composition relies on React's `JSX` syntax and predefined coordinate points for the figure, with the background set through the `body` style.

Oct 17, 2024

BasicBudhaFork

A dense scatter of small, semi-transparent SVG circles is overlaid on a large, ornate Buddha silhouette path rendered in black. The circles are positioned using repeated chained array maps with random multipliers, creating a chaotic, colorful field that contrasts with the structured figure. The visualization uses React to render the SVG elements, with the Buddha path drawn from static path data and circles colored via randomly generated RGB values.

Oct 14, 2024