rajeswariamruthabommaraju@my.unt.edu

Area

This area chart displays the change in a numeric value over time, using a filled blue region beneath a line to emphasize the magnitude of the data. The visualization loads CSV data from a GitHub repository, parses the date and value fields, and uses `d3.scaleTime` and `d3.scaleLinear` to map the data. A `d3.area` generator creates the shaded path, while `d3.axisBottom` and `d3.axisLeft` render the axes in an SVG container.

piechart

This pie chart visualizes categorical data loaded from a CSV file, displaying each category as a colored slice with a label and a legend. The code uses D3 v6 API functions including `d3.pie` to compute arc data, `d3.arc` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. It renders as an SVG with a centered group, positioning arc paths and text labels via the `arc.centroid` method, while the legend is built with appended rectangles and text elements.

Pie Chart

This pie chart displays categorical data loaded from a CSV file, with slices colored by category and labeled directly on the chart. It uses D3.js APIs such as `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG paths. Text labels are positioned using `arc.centroid`, and a legend is built with appended rectangles and text elements. The SVG is centered via a transform, and the chart dimensions are fixed at 500 by 500 pixels.

Activity6-Task4

This bubble chart displays the relationship between employee experience, salary, and the number of projects handled. Data is loaded from a remote CSV file via `d3.csv`, with numeric fields parsed for scaling. The visualization uses `d3.scaleLinear` for the x and y axes (experience and salary), `d3.scaleSqrt` for bubble radius (projects handled), and a sequential `d3.interpolateBlues` color scale for the same metric, rendered as SVG circles.

activity6-task-3

This example visualizes the relationship between employee experience and salary in a scatter plot. Each circle represents an employee, with the x-axis showing years of experience and the y-axis displaying salary, while the circle’s fill color encodes the number of projects handled using a sequential blue scale. It uses D3 v6 to load CSV data from a GitHub repository and render SVG elements with `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleSequential` for color mapping.

Activity6_Task2

This example shows a stacked bar chart of employee projects handled and sales achieved, using data from a CSV file hosted on GitHub. The code loads D3 v6 via UNPKG and reads the remote CSV with `d3.csv`. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.stack` to create the stacked series. A color scale with `d3.scaleOrdinal` assigns distinct colors, while mouseover events log bar data to the console, and an extra blue rectangle is appended to the SVG as a rendering check.

Activity 6_task 1_q1.2

A horizontal bar chart displays the 20 most populous countries in 2010, with country names on the y-axis and population on the x-axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to position bars, while custom React components render axes and marks as SVG rectangles. Data loads from a remote CSV file via `d3.csv`, with population values multiplied by 1000 and formatted using `d3.format`. Tooltips show exact population values through SVG `<title>` elements.

Activity 6_task 1_q1.1

6 Buddhas