Scatterplot

A4_ScatterPlot

This example visualizes the relationship between study hours and exam scores using a scatter plot, where each circle represents a student. The data comes from a CSV file loaded with D3’s `d3.csv` method and filtered to exclude zero-value pairs. The SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom`, and `d3.axisLeft` for tick marks, while circles are appended with `d3.selectAll` and `enter`. Interactive tooltips appear on mouseover, displaying the exact hours and scores for each point. All rendering is done with React-compatible vanilla JavaScript and D3 v6.

DDuc Pham

Scatter Plot

This scatter plot visualizes the start times of various module codes, showing the distribution of class schedules across the day. It uses D3 v5 to load CSV data and render SVG circles, with linear scales mapping time and module code to x and y positions. The axes are generated with `axisBottom` and `axisLeft`, and the data comes from a local `proj.csv` file.

AAziz Jaffrey

Scatter Plot Using Different Data Set

A scatter plot displays tweets per minute across the hours of the day, using time on the x-axis and tweet count on the y-axis. The visualization loads CSV data from a GitHub repository and renders points as SVG circles. D3 v7 APIs such as `scaleTime`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` handle scaling and axes, while `selectAll` and `join` bind data to circles. Tick labels are formatted with `timeFormat` to show hour periods like “AM” and “PM.”

KKhurram Shafique

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.

Stacked bar chart

A stacked bar chart displays the time required for five business processes, comparing required working hours against missing hours for each category. The chart uses d3.v4 to bind data from a local JSON file, structuring the dataset through a map function that generates intermediate array objects for rendering. The visualization relies on D3’s data-join and scale APIs to position and size the bars, with each process split into two stacked segments representing the required and missing hour values. The accompanying HTML file sets up a full-viewport body and loads D3 from the official CDN.