Aziz Jaffrey

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which data columns map to the X and Y axes, with d3.v5 handling the dynamic re-rendering. The visualization uses d3.scaleLinear for axis scales, d3.axisBottom and d3.axisLeft for tick marks, and animated SVG circle transitions to update positions smoothly.

Apr 10, 2020

Scatter Plot with Menus

Two dropdown menus let the viewer choose which quantitative column from the dataset maps to the x- and y-axes of a scatter plot. Initially, the chart displays weight against mpg, but selecting a different column updates the corresponding axis and re-renders the circles with a staggered 2-second transition using D3 v5’s `transition().duration()` and `delay()`. The code uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` in an SVG-based visualization.

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to explore relationships between attributes of the auto-mpg dataset. Selecting different columns from the menus updates the x- and y-axes via `d3.scaleLinear` and re-renders the circles through a general update pattern. The code leverages D3 v5’s `csv` for loading data, `dropDownMenu` for UI controls, and transitions with `delay` to animate points emanating from the center. Axes are drawn using `axisBottom` and `axisLeft` with gridlines, and menu selections trigger a full chart re-render.

Scatter Plot

This scatter plot visualizes the relationship between car horsepower and weight, using data from the UCI Machine Learning Repository's Auto MPG Data Set. The visualization encodes each car as a red, semi-transparent circle, with horsepower on the x-axis and weight on the y-axis, plotted using D3.js v5's `scaleLinear` and `axisBottom`/`axisLeft` functions to render the SVG axes. The code reads the `corona.csv` file, which contains module start times, though the rendered title and axis labels indicate the intended dataset.

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.

Stylized Line Chart

This stylized line chart visualizes temperature over time using the Data Canvas Sense Your City Dataset, employing a smooth natural curve to connect data points. Built with React and D3 v5, the chart renders as an SVG with a teal stroke, Poppins font, and tick marks styled in muted tones. The code uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, d3.line with curveNatural for the path, and timeFormat for the x-axis labels.

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius across multiple cities, with each city represented by a distinct colored line. The chart uses d3.line with curveBasis for smooth curves, d3.scaleTime for the time axis, d3.scaleLinear for temperature, and d3.scaleOrdinal with schemeCategory10 for city colors. Data is loaded via d3.csv from the Data Canvas - Sense Your City dataset, parsed into timestamp and temperature values, then nested by city using d3.nest. A custom colorLegend module renders the legend, while the chart includes axis labels, gridlines, and a title.

Stylized Line Chart

This example shows a stylized line chart tracking temperature readings across a week, using a smooth curve to connect time-series data points. The visualization renders as an SVG in React, with axes labeled “Time” and “Module” and a teal-colored path emphasizing the trend. It uses d3.scaleTime and d3.scaleLinear to map data, d3.line with curveNatural for the smoothed path, and d3.csv to load the Data Canvas Sense Your City dataset. Axis ticks and labels are built as reusable React components, with Poppins font styling applied via CSS.

Coronavirus Deaths by Country over Time (with Voronoi Hover)

This visualization tracks cumulative COVID-19 deaths by country over time using a log-scaled line chart. A Voronoi overlay, built with d3.Delaunay, enables smooth hovering to highlight the active country’s line and display a tooltip with the death count and date. The chart uses React with d3.v5 for scales and axes, rendering SVG paths from data sourced from the Johns Hopkins Coronavirus Dataset.