moulidomar@hotmail.com

Task-9 Q2

Task-9 Q1

Task 9 Question 1

This animated scatterplot displays Iris flower measurements across four variable pairs, cycling through petal width, sepal width, petal length, and sepal length on the x-axis while sepal length remains fixed on the y-axis. The visualization uses D3 v7 to load CSV data via `d3.csv`, render SVG circles colored by species, and animate transitions with `setInterval`. A custom legend with interactive hover effects and a separate pie chart module using `d3.pie` and `d3.arc` demonstrate additional chart types, with tooltips appearing on pie slice hover.

Task-9

Activity6_Q4

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes. It reveals a general trend where vehicles with higher horsepower and torque tend to have lower fuel efficiency. The visualization uses D3.js to render an interactive SVG, with bubble size representing highway MPG and color encoding the car make. Hovering over a bubble triggers a tooltip displaying the make name, implemented using D3 event handlers.

Question 3

Task-3

Activity6_Task3

Activity6_Task2 Q2.1

Activity6_Task2

activity 6_Task 1 Q1.2

This horizontal bar chart displays the 2010 population of 20 countries, sorted from largest to smallest. Built with React and D3 v5, it renders SVG rectangles using the `scaleBand` and `scaleLinear` scales. The chart loads CSV data from a GitHub repository, applies a custom tick formatter to abbreviate values in billions, and includes accessor functions for country and population. Both axes are custom components, with axis labels styled in blue and green marks that each contain a native SVG tooltip.

activity 6_Task 1 Q1.1

This bar chart displays the population of ten countries in the year 2000, with a green horizontal bar for each country, ordered from largest to smallest population. The visualization uses React to render SVG elements via d3.scaleBand and d3.scaleLinear, and reads CSV data from a GitHub repository. Population values are formatted using d3.format with SI notation. A native SVG `<title>` element provides a tooltip showing the exact population value for each bar.

Activity 6_Task 1

This bar chart displays the population of the top 30 countries in 2020, ordered by country name along the vertical axis and scaled population values along the horizontal axis. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a CSV file via `d3.csv`, rendered as SVG rectangles, with axes generated by custom components and formatted tick labels using D3's `format` function.

Fork of overlapping Buddha

The visualization presents a dense, colorful field of overlapping polygons layered over a single Buddha silhouette path. The chaotic arrangement of semi-transparent shapes creates a vibrant, textured collage effect against a black background. The piece uses React with ReactDOM to generate an SVG canvas, where the `App` component maps over an array to render hundreds of polygons with random coordinates, fill colors, and rotations. The Buddha figure is drawn via a `<path>` element with intricate SVG path data, while the background polygons are computed using JavaScript's `Math.random` for positioning and styling.