Aftab Hussain

@Afthab33·7 public vizzes

Activity6_Task3

This visualization displays a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, and orange for virginica). The code loads CSV data using `d3.csv`, scales the axes with `scaleLinear` and `extent`, and renders circles as SVG elements via `selectAll` and `join`. It includes custom axis labels using `axisLeft` and `axisBottom`, plus a legend built with appended SVG `rect` and `text` elements. The plot uses D3 v6.

Apr 2, 2025

Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the relationship between engine horsepower, torque, and highway fuel efficiency for various vehicle makes. Each bubble is positioned along the x-axis by horsepower and the y-axis by torque, while its radius encodes highway MPG. The chart uses D3.js v7 with the `d3.csv` method to load data from bubblechart.csv, `d3.scaleLinear` for axes and bubble sizing, and `d3.schemeTableau10` for categorical color coding. Hovering over a bubble triggers a tooltip displaying exact values, with SVG circles providing the animated visual representation.

Mar 31, 2025

Loading thumbnail…

Activity6_Task2_Question2

A stacked bar chart shows the proportional distribution of movie ratings across six genres, with each bar divided into five rating score ranges from below 5.0 to above 8.5. The chart uses d3.stack with stackOffsetExpand to normalize each genre bar to 100%, and displays percentage labels within segments wider than 40 pixels. D3 v7 renders SVG rectangles and axes, with an ordinal color scale and tooltips via appended title elements. Data is hardcoded as an array of objects in the script.

Mar 31, 2025

Loading thumbnail…

Activity6_Task2

This visualization shows the distribution of IMDb ratings across six movie genres using stacked horizontal bars, with each genre displaying the percentage of films in five rating categories from "below 5.0" to "above 8.5." The chart makes it clear that Documentary films have the highest proportion of high ratings, while Action movies concentrate heavily in the lowest rating bracket. Built with D3 v7 and rendered as SVG, the code uses `d3.stack()` to create stacked segments, `d3.scaleBand()` for the categorical genre axis, and `d3.scaleLinear()` for the percentage axis. Interactive hover effects trigger tooltips displaying exact percentage values, and the visualization loads data from a local CSV file.

Mar 31, 2025

Loading thumbnail…

Activity6_Question1.2

This horizontal bar chart displays the population of 20 countries in 2010, sorted with the largest population at the top of the chart. The visualization uses React components to render SVG elements and D3 v5 APIs, including `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is loaded asynchronously from a CSV file using D3’s `csv` function, with population values converted from the raw 2010 column. Marks are rendered as rectangles whose widths are proportional to population values, with tooltips formatted using D3’s `format`.

Mar 31, 2025

Loading thumbnail…

Activity6_Question1.1

This bar chart displays the population of ten countries in the year 2000, sorted in descending order along a horizontal axis. Each bar’s length is proportional to the population value, and hovering reveals the precise figure in billions. The visualization is built with React and uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with data loaded from a CSV via `d3.csv`. The SVG render includes styled axes and tick labels, with a green fill for the bars.

Mar 31, 2025

Loading thumbnail…

Activity6_Task1

A bar chart displays the population of 20 countries in 2010, ranked along a vertical band scale. The React application loads CSV data from a GitHub URL via D3’s `csv` and uses `scaleBand` and `scaleLinear` to position bars, with axes rendered as SVG elements from custom `AxisBottom` and `AxisLeft` components. Native SVG `<title>` elements provide tooltips on hover, and ticks are formatted using `format('.2s')` to abbreviate large numbers.

Mar 31, 2025