F

Fayezuddin Mohammed Khan

@Fayezkhan1·16 public vizzes

Loading thumbnail…

Activity7_q2

This area chart shows the average fuel efficiency (MPG) of cars over model years, separated into three regions: the USA, Europe, and Asia. Each region is represented by a semi-transparent filled area with a smooth curve, using a color scale and a legend to distinguish them. The visualization aggregates data from a CSV file using d3.groups and d3.mean, then renders the areas with d3.area, d3.curveCatmullRom, and d3.axisBottom/axisLeft for the axes.

Loading thumbnail…

Activity7

This interactive pie chart visualizes global CO₂ emissions by country for 2019, using data loaded from a CSV file via d3.csv. Each slice represents a country’s emissions, with a color-coded legend, country labels inside slices, and hover tooltips displaying exact emission values in tonnes. The visualization is rendered as SVG using d3.pie and d3.arc, with d3.scaleOrdinal mapping countries to the d3.schemeSet3 color palette. Transitions on tooltip opacity provide subtle animation feedback during mouse interactions.

Loading thumbnail…

Activity6_q9

This interactive bubble chart visualizes car performance data, plotting average horsepower on the x-axis against average torque on the y-axis, with each bubble’s area representing fuel efficiency in miles per gallon. The visualization, built using D3 v7, loads a CSV dataset and encodes car make through a color-coded legend. It displays all data points as semi-transparent circles with dark strokes, and implements a custom tooltip that appears on mouseover, showing the specific make, horsepower, torque, and MPG values for each vehicle.

Loading thumbnail…

Task4

This visualization shows the relationship between average horsepower, torque, and highway MPG for various car makes. Each bubble represents a car brand, positioned by horsepower on the x-axis and torque on the y-axis, with bubble size encoding highway fuel efficiency and color distinguishing makes. The code loads data from a CSV file using d3.csv, applies linear scales to both axes and a sqrt scale for bubble radius, and renders circles as SVG elements. Interactive tooltips appear on hover using D3 event listeners, and axis labels and a title are generated with SVG text elements.

Loading thumbnail…

Activity6_q3

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) for vehicles in the Auto MPG dataset, with points colored by region of origin (USA, Europe, Japan). It uses d3.csv to load the data, d3.scaleLinear for positioning both axes, and d3.scaleOrdinal for categorical color mapping. The SVG rendering includes axis labels, a legend, and circles with opacity, all generated using D3 v7 selections and the axisBottom and axisLeft components.

Loading thumbnail…

Activity6_3.2

A scatter plot of the Iris dataset encodes each observation as a distinct SVG symbol, with circles, squares, and triangles mapping to setosa, versicolor, and virginica species respectively. D3 scales map petal length and sepal length to Cartesian axes, with color and shape encoding species via `d3.scaleOrdinal` and `d3.symbol`. The visualization renders the data as SVG paths selected via `d3.symbol().type(...)`, includes axes using `d3.axisBottom` and `d3.axisLeft`, and displays a legend for the species shapes.

Loading thumbnail…

Activity6_task3

An interactive scatter plot of the Iris dataset displays petal length against sepal length, with each of the 150 flowers colored by species (setosa, versicolor, virginica). The visualization uses D3 v7 with a linear scale for both axes, an ordinal color scale for species categories, and an SVG-based legend. Data loads asynchronously via `d3.csv` from a GitHub gist, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. The plot adapts to the browser window size, showing clear species clustering patterns.

Loading thumbnail…

Task2_Q2.3

This stacked bar chart displays revenue breakdowns for major tech companies across four categories: Hardware, Software, Services, and Cloud. Using d3.csv to load local data and d3.stack to transform the dataset, the visualization employs a horizontal bar layout where each company’s total revenue is segmented by colored bars, rendered as SVG rectangles. The x-scale uses d3.scaleLinear for revenue values, while the y-axis uses d3.scaleBand for company names. A legend is manually appended to identify the color-coded categories.

Loading thumbnail…

Activity6_Task2

This visualization shows the distribution of movie ratings across different genres using a stacked horizontal bar chart. Each bar represents a genre, segmented proportionally into five rating categories from below 5.0 to above 8.5, with a legend clarifying the color encoding. The code uses D3 v7’s `d3.stack()` to compute stacked series, `d3.scaleOrdinal` for category colors, and `d3.scaleBand` for genre positioning. Interactive tooltips appear on mouseover, displaying the percentage value. The chart is rendered as SVG, with data sourced from a CSV file containing genre-specific rating proportions.

Loading thumbnail…

Activity6_1.2

This chart displays the population figures for 20 countries in 2010 as a horizontal bar chart. The visualization uses React with D3 v5 to render SVG elements, with scales created via `d3.scaleLinear` and `d3.scaleBand`. Country labels appear on the y-axis, while population values are formatted using `d3.format` with a custom tick format that converts billions. Interactive tooltips reveal exact population values on hover, and the data is loaded from a remote CSV file using `d3.csv`.

Loading thumbnail…

Activity6_1.1

A horizontal bar chart displays the population of the first ten countries from a CSV dataset for the year 2000. The chart uses light green bars that darken on hover, with axis ticks and labels styled in gray. Built with React and D3 v5, the visualization uses D3's `scaleLinear` and `scaleBand` for scales, `svg` for rendering, and `format` to abbreviate tick labels, converting 'G' to 'B' for billions.

Loading thumbnail…

Activity 6

This example shows a horizontal bar chart ranking the populations of 30 countries in 2020, using a scaleBand for the categorical country axis and a scaleLinear for the numeric population axis. The bars are rendered as SVG rectangles with a light green fill that darkens on hover, and each includes a tooltip showing the formatted population value. Built with React and D3 v5, it loads CSV data via `d3.csv`, formats tick labels with `d3.format`, and uses custom axis components to display the population scale with billions abbreviated as "B".

Loading thumbnail…

Fork of Activity 7

This fork of Activity 7 shows a horizontal bar chart of 2020 population by country, with bars ordered by country name. The React component uses a D3 `csv` fetch to load the data (sliced to 30 entries) from a gist, and `scaleBand`/`scaleLinear` for positioning. The SVG rendering draws axes via custom `AxisBottom` and `AxisLeft` components, and `Marks` creates `<rect>` elements with `<title>` tooltips. Styling includes HTML/CSS for tick lines and fill colors.

Loading thumbnail…

6 Bhuddas

Six overlapping Buddha silhouettes in black and white form a layered portrait. The paths are drawn as SVG paths using React with `ReactDOM`, each rendered in a `<g>` transform with varying scales and translations. The repeated path data creates a mosaic effect, with white stroke outlines on `black` fills. The background uses a floral image via CSS, while the SVG itself sits on a black body background with `overflow: hidden`. The code defines a cube function `sq` and arrays but does not use them in the visualization.

Loading thumbnail…

6 Bhuddas

Six Buddhas overlap in a dense, colorful SVG composition generated by React. The code maps arrays of numbers to hundreds of semi-transparent polygons, each with randomized coordinates, fill colors, and rotations, creating a chaotic, layered effect. A single detailed Buddha path is also rendered and scaled within the mix, while the background is styled green. The example relies on React’s `ReactDOM` to render the SVG elements directly.

Loading thumbnail…

5 Bhuddhas

Five overlapping Buddha silhouettes, drawn as detailed SVG paths, are scattered across a black canvas amidst a dense field of small, randomly colored and rotated diamond polygons. The piece uses React with ReactDOM to render the SVG elements, while the background pattern is generated through nested array maps and randomized values. The composition creates a busy, chaotic visual texture around the five central Buddha figures.