sairamisetti3829@gmail.com

activity7_PieChart

This example shows the distribution of phone brand counts as a pie chart with labeled percentage slices and a color-coded legend. Using the D3.js library, it loads CSV data from a GitHub repository, calculates proportional arc segments via `d3.pie`, and renders them with `d3.arc`. Each slice displays the brand name and computed percentage, while the legend maps brands to their assigned colors. The chart is drawn as an SVG element, centered on an 800x500 canvas with a light background.

Nov 4, 2024

TestActivity

This interactive scatterplot animates through the Iris dataset, cycling the x-axis among four flower measurements (petal width, sepal width, petal length, and sepal length) every few seconds. The y-axis remains fixed on sepal length. Points are colored by species (setosa, versicolor, virginica) with a static legend, and axes update dynamically via D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The visualization uses D3 6.7.0 loaded via UNPKG, renders as an SVG with animated transitions driven by `setInterval`, and fetches CSV data from a GitHub gist.

Nov 1, 2024

activity 6 task 4.1

This bubble chart visualizes the relationship between average horsepower and torque for various car makes, with bubble size encoding highway MPG and color distinguishing the vehicle makes. The visualization employs D3.js v7 to render SVG elements, using linear scales for the x and y axes. Animated tooltips appear on mouseover, displaying the make name, while a legend communicates the MPG scale. The data is loaded from a CSV file, and the D3 `scaleLinear` and `scaleOrdinal` APIs handle the mappings for size and color, respectively.

activity 6 task 4

This bubble chart visualizes the relationship between average horsepower and torque for various car makes, using the size of each bubble to represent highway MPG and color to distinguish manufacturers. Built with D3.js v7, it renders as an SVG and includes interactive tooltips on hover. The data is loaded from a CSV file, and the chart features axis labels, a title, and a color legend.

activity task qwstionn3

This scatter plot visualizes the relationship between sepal length and petal length for Iris flower species, using distinct symbol shapes to differentiate species categories. The D3 v7 implementation uses `scaleLinear` for both axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and a custom legend component. Data is loaded asynchronously from a remote CSV file and parsed with `csvParse`. The chart includes labeled axes and a shape-based legend, with symbols rendered using the `symbol` generator at a fixed size.

activity 6 task q3

This scatter plot visualizes the relationship between sales and profit for five products (A through E), with each point styled by a distinct shape and color derived from its product category. Built with D3.js v7, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeCategory10` for colors, and a custom symbol generator for shapes. Data originates from a hardcoded array in `bundle.js`, mirroring the `product.csv` file, and is rendered on an SVG canvas with axes labeled via the `axes.js` module.

activity 6 question 3

This scatter plot shows the relationship between sales and profit, with points colored by product type using distinct D3 symbols (circle, square, diamond, triangle, and cross). It loads data from a CSV file and renders a scatterplot with axes, labels, and a shape legend. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for shape encoding, and d3.symbol to generate marker paths, while d3.axisLeft and d3.axisBottom draw the axes.

activity 6 task3.2

This example shows the classic Iris dataset as a scatter plot of sepal length against petal length, with each species distinguished by a different symbol shape. A legend maps the species names to their corresponding shapes. The visualization is built with D3 v7, using scales like `scaleLinear` and `scaleOrdinal` along with `symbolGenerator` for shape rendering. The axes are drawn via `axisLeft` and `axisBottom`, and the data is loaded from a remote CSV file using `csvParse`.

activity 6 task 3

This scatter plot visualizes the Iris dataset, depicting petal length against petal width for individual flowers, with color-coded points for each species (setosa, versicolor, and virginica). The visualization uses D3 v6 with `csv()`, `scaleLinear()`, and `extent()` to load data from a GitHub-hosted CSV and map values to screen coordinates. Points are rendered as SVG circles using `selectAll().join()`, with an `axisLeft()` and `axisBottom()` providing labeled axes. The code also reads sepal measurements but applies them as circle `rx` and `ry` attributes, though these are overridden by a fixed radius value.

activity6_question2

This example presents a horizontal stacked bar chart comparing categorical values across multiple years. Using D3 v7, it loads data from a CSV file containing automotive metrics, then renders the visualization as an SVG with animated tooltips. The chart uses d3.stack to aggregate categories, d3.scaleOrdinal for color assignment, and d3.axisLeft and d3.axisBottom for labeled axes. Hovering over any bar segment reveals the specific value through a transition-based tooltip, while a legend identifies each category's color coding. The visualization demonstrates D3's data binding and interactive event handling capabilities.

Activity6_Task2

This bubble chart shows the distribution of movie ratings across different genres, with each genre represented as a horizontal stacked bar broken into five rating categories from below 5.0 to above 8.5. The chart uses D3 v7’s `d3.stack()` to compute the stacked segments and `scaleOrdinal` for category colors, rendering as SVG rectangles within a fixed 960×500 viewport. Mouse interactions trigger tooltips formatted with `d3.format('.2f')` to display the exact percentage value for each rating segment. The data comes from a CSV file containing proportional values per genre.

Activity 6 q2

This example shows a horizontal bar chart of the 2010 population for 20 countries. Each country is listed on the y-axis with a green bar whose length is proportional to its population. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position the bars, with data loaded via `d3.csv` from a GitHub-hosted dataset. Tooltips display formatted population values, and the chart is rendered as SVG.

activity 6_Task 1

This bar chart displays the population of ten countries in the year 2000, with horizontal bars ordered by country name and encoded by population value. Rendered as an SVG via React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data, while `AxisBottom` and `AxisLeft` components generate tick marks and labels. The data is loaded from a CSV file using D3’s `csv` function, and each bar includes a tooltip showing the formatted population value.

Activity 7

This interactive bar chart displays the populations of 20 countries from 2010, presented as horizontal bars ordered by country name. Built with React and D3 v5, the visualization uses SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The chart loads data from a remote CSV file and formats tick labels using D3's `format` function, converting values like "1.2G" to "1.2B" for readability.

Fork of Fork of Activity 7

This chart displays the populations of twenty countries in 2020 as horizontal bars, sorted by country name along the vertical axis and scaled linearly by population along the horizontal axis. The visualization is rendered as an SVG using React, with D3 v5’s `scaleBand` and `scaleLinear` handling the axis mappings and `format` producing the tick labels. Data is fetched via `d3.csv` from a remote GitHub-hosted CSV file, and each bar includes a tooltip showing its formatted population value.

rsk 6 budda

This visualization renders a large, ornate Buddha silhouette composed of hundreds of semi-transparent, randomly colored circles scattered across the SVG canvas atop a floral background image. The illustration is built using React, with each circle positioned via nested array maps and randomized coordinates and RGB fill values. The Buddha’s complex outline is drawn using SVG path data, transformed and scaled within a group element. The code relies on React's `ReactDOM` to mount the component and SVG elements for all rendering.

Oct 17, 2024

Fork of 2 Buddas

Two overlapping Buddha silhouettes are drawn as a single dark path, rendered twice with two different scaling and translation transforms on an SVG canvas. The path is layered over a field of randomly placed, semi-transparent circles whose positions and RGB fill colors are generated with `Math.random()` inside nested `Array.map` calls. The visualization uses React to render the `<svg>` elements, with a background image applied via CSS and the Buddha path drawn using SVG path data with a `stroke-width` of 5.

Oct 17, 2024

activity 6q)1

This example demonstrates the minimal setup for a D3.js visualization inside VizHub, showing how to load D3 from a CDN and use ES6 module imports. The code imports the `select` function from D3 and a local `message` constant from the module `myMessage.js`, then sets the text of a `div` element with the ID `message`. The page styles this text at a large font size via `styles.css`. It serves as a template for combining external libraries with local modules, though it performs no data rendering or chart drawing.

activity 6q)1

activity 6_Task 1

This example shows a horizontal bar chart comparing country populations for 2020, with country names on the y-axis and population values on the x-axis. It loads CSV data dynamically and renders SVG bars using React components. The code builds scales with `d3.scaleBand` and `d3.scaleLinear`, formats tick labels with `d3.format`, and creates custom axis components like `AxisLeft` and `AxisBottom` that generate tick marks and text elements.

Activity 6

This example demonstrates how to integrate D3 with ES6 modules in VizHub, importing both the D3 library and a local module to dynamically update text on a webpage. It uses `select` from D3 to target an HTML div and set its content to a string exported from `myMessage.js`. The page loads D3 via UNPKG and includes external CSS styling, showcasing a minimal setup for mixing CDN-loaded libraries with modern JavaScript module syntax.