Sai Sandhya Nannapaneni

Activity_7_Question_2

This area chart displays the total salary for each NBA team, with team names on the x-axis and salary values on the y-axis. The visualization uses a steelblue filled area path, with black dots marking each team’s salary value and text labels above them. Built with D3 v6, the chart employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.area` to generate the SVG path, while CSV data is loaded asynchronously from a GitHub repository. The chart includes rotated x-axis labels and gridlines via `d3.axisBottom` and `d3.axisLeft`.

Activity_7_Question_1

This pie chart displays the top five NBA players by salary, using a categorical color scale and direct value labels. Built with D3 v5, the code employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate path wedges from a CSV dataset, with an SVG group element positioning the chart and a legend for player identification.

Activity7

This pie chart displays the top five NBA players by salary from the provided NBA dataset. Each slice is labeled with the player’s name and salary value, and a color-coded legend identifies the players. The visualization is built with D3 v5, using `d3.pie` and `d3.arc` to generate the slices and `d3.scaleOrdinal` for the color scheme. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the chart is rendered as SVG.

Activity_7

This example visualizes the top five NBA players by salary using a pie chart, with slices labeled by player name and salary. The chart is built with D3 v5, using `d3.pie` to compute arc angles, `d3.arc` to generate SVG paths, and an ordinal color scale (`d3.schemeCategory10`) for slice fills. Data is loaded asynchronously from a CSV file via `d3.csv`, filtered by salary, and sorted descending before the top five are selected. Labels are placed using `arc.centroid`, and a legend maps colors to player names.

Activity_7_QA_1

A pie chart displays the top cuisine types by number of orders from a NYC Foodhub delivery dataset, with each slice sized proportionally to order volume and color-coded per cuisine. The visualization uses D3 v7's `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart, with a legend identifying each cuisine and labels showing order counts above 100. Data is parsed from a CSV via `d3.csvParse` and aggregated using `d3.flatRollup`.

Activity_7_Question_1

This example visualizes a pie chart of skills counts from the Daily Delhi Climate Test dataset, grouping rows by the Skills column and displaying each category's frequency as a colored slice. The chart uses d3.pie for arc generation, d3.arc for path rendering, and d3.scaleOrdinal with the schemeCategory10 color palette. An SVG legend lists each skill with its count, while the main chart is titled "Pie Chart for Skills." Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file.

Activity_7

This pie chart displays the top 10 billionaires and their net worth in billions of dollars, sourced from the DailyDelhiClimateTest.csv dataset. It uses d3.pie and d3.arc to generate SVG segments, with d3.scaleOrdinal assigning colors from a custom palette. Each segment includes value labels positioned via arc.centroid, and a legend lists names with corresponding values. The chart renders in SVG with a gradient background, leveraging d3.csv for data loading and d3.format for tick number formatting.

Activity_7

This animated scatter plot visualizes the Iris dataset, showing four features (petal and sepal length and width) mapped to x/y axes with points colored by species. It cycles through different feature combinations on the x-axis using `setInterval`, with axes and labels updating dynamically. The example uses D3 v6 modules (`scaleLinear`, `axisLeft`, `axisBottom`, `csv`) and a reusable scatter plot component pattern with SVG rendering. A custom color legend distinguishes iris species, and the chart includes rotated axis labels and a title.

Question_4_Activity_6

This visualization displays the Iris dataset as a bubble chart, mapping sepal length and sepal width to the x and y axes while encoding petal length through bubble radius. The SVG chart uses D3 v7’s linear and square-root scales, with axes generated via d3.axisBottom and d3.axisLeft. Data loads asynchronously from a GitHub-hosted CSV using d3.csv, and semi-transparent steelblue circles render the dimensions for each sample.

Activity6_Task4

A bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding fuel efficiency and color distinguishing brands. The D3 v7 SVG visualization reads from a CSV file, using linear scales for axes, a tooltip on mouseover, and a custom legend showing both MPG value circles and color-coded make dots.

Question_4

This example displays the Iris dataset as a bubble chart, encoding sepal length on the x-axis, sepal width on the y-axis, and petal length as the bubble radius. It uses d3.csv to load the data and d3.scaleLinear and d3.scaleSqrt to map values to positions and sizes. Axes are generated with d3.axisBottom and d3.axisLeft, and circles are appended to an SVG with a steelblue fill and opacity 0.5. Tooltip styling is included in the HTML but not activated.

Question_3

This example presents a scatter plot that maps categorical data from a CSV file onto two quantitative axes, with each point colored by its category. The visualization uses D3.js (v7) to load and parse the data via `d3.csv` and `d3.autoType`, and then builds the chart with SVG elements. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while the points are drawn as circles with positions scaled by `d3.scaleLinear`. The color of each circle is assigned using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette.

Question2_Activity_6

This example shows a stacked bar chart that breaks down sales of three products—productA, productB, and productC—across four regions (North, South, East, West). The code reads a local `data.csv` file using `d3.csv` and `d3.autoType`, then builds the chart with D3 v7’s `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `d3.stack` to accumulate the segment values. Each region’s bar is divided into colored segments, with a legend identifying the product categories, and the y-axis is labeled “Sales.” The SVG output is generated directly through D3’s selection and append methods.

Activity6_Task_3.2

This interactive scatter plot displays iris flower measurements, mapping sepal length against petal length and using different symbols to distinguish species. The visualization loads CSV data from a GitHub gist, parses it with d3.csvParse, and renders the plot using D3 v7 scales (d3.scaleLinear and d3.scaleOrdinal) with custom axes and a shape legend implemented as local ES6 modules.

Activity6_Task_3.2

This example demonstrates a minimal VizHub project that renders a simple text message. The code loads D3 via UNPKG and uses the `select` function from D3 to set the text content of an HTML div, displaying "Hello VizHub!". A local ES6 module exports the message string, and CSS styles the text with large, centered font size. The example primarily serves as a template for loading libraries and importing local modules.

Activity_6_Task_2

This stacked bar chart shows how movie ratings are distributed across genres, using percentage segments for five rating ranges from "below 5.0" to "above 8.5". The chart uses `d3.stack` to compute the cumulative bar segments and `d3.scaleOrdinal` for color mapping, with interactive tooltips on mouseover that display the exact percentage for each rating category. The SVG is built using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleBand` for the categorical genre axis.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing 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). Built with D3 v6, the code loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scaling, and renders circles with SVG attributes. Axes are added via `axisLeft` and `axisBottom`, and the plot fills the browser window.

Activity_6_Question_1_2

This interactive bar chart displays the 2010 population data for 20 countries, using the dataset from the linked GitHub CSV file. The visualization is built with React and renders SVG elements, utilizing D3.js v5 functions like `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Each bar includes a tooltip showing the population value, while the axes are styled with blue lines and grey text, and the chart is designed with a clean layout and minimal margins.

Oct 21, 2024

6 buddhas

Six overlapping Buddha silhouettes in violet, white, and other colors float against a floral background image. The React application renders each figure as an SVG path with distinct stroke and fill properties, applying translate and scale transforms to create layered compositions. The code defines path data manually and uses React’s JSX syntax within a single SVG canvas of 960 by 1000 pixels.

Oct 19, 2024

5 Buddhas

Five Buddhas displays a field of colorful, rotated SVG polygons generated procedurally from nested array maps, creating an abstract, overlapping pattern. The visualization uses React and ReactDOM to render SVG elements, with polygon positions, rotations, and RGB fill colors computed using `Math.random()`. Overlaid on this generative background is a single, static Buddha face drawn as an SVG path, which appears to be traced from a source image. The rendering leverages the `transform` attribute for polygon rotation and scaling, showcasing a mix of algorithmic and hand-coded SVG composition.

Oct 18, 2024