ssuryateja804@gmail.com

Activity 7_Q2

This example displays monthly average temperatures as a smooth area chart, with the area fill and line colored green and each data point labeled with its value in degrees Celsius. It loads CSV data from a GitHub gist and renders an SVG visualization using D3 v5, applying `scaleBand` and `scaleLinear` for the axes, `area` to generate the area path, and `axisBottom`/`axisLeft` for the titled axes. The code uses `select`, `csv`, `max`, and the `join` method to add text labels for peaks and troughs.

Activity 7

Activity6_Q4

This bubble chart visualizes the correlation between max speed, acceleration, and fuel efficiency for various car brands, with each circle's size representing fuel efficiency and color encoding brand identity. The visualization includes a tooltip that displays the brand name on hover, as well as legends for both fuel efficiency values and brand categories. Built with D3 v7, the chart uses d3.csv to load data, d3.scaleLinear for positioning and sizing, d3.scaleOrdinal for colors, and SVG circle elements with mouse event handlers for interactivity.

Activity6_Task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s position maps horsepower (x-axis) and torque (y-axis), while its size encodes highway MPG. Color distinguishes car brands, with a legend explaining the size scale and a color key. Built with D3 v7, the SVG visualization includes animated tooltips on hover, showing the car make. Data comes from a local CSV file, and the chart uses D3’s scaleLinear, scaleOrdinal, and interpolateTurbo APIs for scaling and coloring.

Activity6_Q3

This scatter plot visualizes the relationship between car length and weight, using distinct symbols to differentiate car types. The plot is rendered with D3.v7, and the axes are drawn using custom API calls like `axisLeft` and `axisBottom`. A shape legend maps the categorical values to their symbols, and the data is loaded asynchronously from a CSV file hosted on GitHub, with numerical fields parsed before plotting.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length and using distinct symbol shapes to represent the three flower species. The visualization is built with D3 v7, using scaleLinear for the axes, scaleOrdinal with symbolsFill for the shape encoding, and a custom axes module that calls axisLeft and axisBottom. A shape legend, positioned at fixed coordinates, translates the symbol markers to species names. Data is loaded asynchronously from a raw GitHub CSV file and parsed with csvParse.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length while encoding species type through circle color. The visualization renders in SVG using D3 v6, with circles positioned via d3.scaleLinear and axes generated using d3.axisLeft and d3.axisBottom. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv, with a color mapping assigning skyblue to setosa, lightgreen to versicolor, and orange to virginica species.

Activity6_Task3

Activity6_Q2

This stacked bar chart shows customer satisfaction levels across ten car brands, with each bar segmented into five rating categories from “Very Dissatisfied” to “Very Satisfied.” Hovering over a segment displays its exact count via a tooltip. The visualization uses D3 v7’s `d3.stack()` to compute stacked layers, `d3.scaleOrdinal()` for color mapping, and `d3.axisLeft()` and `d3.axisBottom()` for axes. Data comes from the embedded `car_data.csv` file, and the SVG rendering includes a legend and axis labels.

Activity6_Task2

Fork of Acticity_6_Question_1.2

Acticity_6_Question_1

This interactive bar chart displays the population of the top ten countries in the year 2000, using horizontal bars to compare values. The visualization is built with React and renders to an SVG canvas. It uses D3 version 5's `scaleBand` and `scaleLinear` to map data from a CSV file loaded via `d3.csv`, with axes and marks created by custom components. A tooltip shows the formatted population value when hovering over a bar.

activity 6_Task 1

This example shows a horizontal bar chart of the top 30 countries by population in 2020, sourced from a CSV file via `d3.csv`. The chart uses D3 v5's `scaleBand` for the y-axis (countries) and `scaleLinear` for the x-axis (population), rendered as SVG rectangles in React. Bars are colored light green, with a blue axis line and tick marks, and a formatted axis label "POPULATION-2020". Hovering over a bar reveals a tooltip via the `<title>` element, showing the population value formatted with `d3.format` to replace "G" with "B" for billions.

Fork of Hello VizHub

Budha 6

A stylized lotus-bud path is rendered repeatedly at multiple scales and positions over a floral photographic background. Using React 16.10 and SVG, the visualization duplicates a single complex path definition across different transforms, with varying stroke colors and opacity levels to create a layered, decorative pattern. The code constructs arrays and cubic functions to generate scale values, while the fixed background image and centered text label frame the composition.

5 Buddhas

The visualization displays a chaotic field of multicolored, randomly generated polygons overlaid with five intricate, geometric Buddha figures rendered as detailed SVG paths. Constructed using React and ReactDOM, the background polygons are generated through nested array maps, with points, fill colors, and rotations determined by random values. The five main Buddha images are defined by complex path data, each scaled and translated into place. The entire composition sits on a black background with high opacity and saturated colors, creating a dense, visually rich collage effect.