Skip to main content
Log in
U

uzairnaeem15@gmail.com

@uzairnaeem015·12 public vizzes

Loading thumbnail…

ProjectGraph

This example shows a line chart of monthly discount amounts aggregated from a CSV file containing daily transaction data. The original data, which includes multiple entries per day, is grouped by month and summed to produce the visualization. Built with Chart.js and rendered on a Canvas element, the chart features a single red line with transparent fill, a legend, tooltips, and zoom/pan controls enabled via the chartjs-plugin-zoom library. The visualization highlights monthly spending patterns, with notable peaks and dips in discount values.

Jun 13, 2024
Loading thumbnail…

Project Graph #2

This scatter plot visualizes the relationship between billing amount and original charge for active student billing records, with point color encoding the program type and point size encoding the discount amount. The visualization filters the source dataset from a CSV file to exclude refunded or inactive records and caps billing amounts at 3000. Using the Vega-Lite API with D3.js, the chart employs circular marks with a fixed size of 200 units, opacity set to 1, and includes an interactive tooltip displaying multiple data fields such as discount type, charge category, and date. The visualization adapts to the browser window dimensions and applies custom styling for improved readability.

Apr 27, 2024
Loading thumbnail…

Project Graph # 3

This chart uses an area mark with a monotone interpolation to display total billing amounts over the course of a year, with distinct areas for each year overlaid at partial opacity. The data is loaded from a remote CSV via D3’s `csv` function, filtered to exclude zero and large billing amounts, and aggregated by month and year. The visualization is built with the Vega-Lite API, encoding the month on the x-axis, total billing amount on the y-axis, and year as a color grouping, while enabling tooltips to inspect specific values.

Apr 26, 2024
Loading thumbnail…

Task 9 & 10 D3 Q2 Area chart UN

This area chart displays quarterly worldwide user numbers for Twitter, Instagram, and Facebook from Q1 2016 through Q4 2020, with each dataset layered as a filled line using gradient colors. The chart uses Chart.js with the chartjs-plugin-zoom extension to enable interactive panning and zooming via mouse wheel or pinch gestures. It renders to a Canvas element within an 800x400 pixel container, and includes tooltips and a bottom-positioned legend for cross-platform comparison. The data is hardcoded in the script and reflects growth trends across the three social media platforms.

Apr 20, 2024
Loading thumbnail…

Task 9 & 10 D3 Q1 Pie chart UN

A D3 pie chart visualizes the top 10 companies by revenue, with each slice labeled in billions and a matching color-coded legend. The chart uses `d3.pie()` and `d3.arc()` to generate segments, `d3.scaleOrdinal` for colors, and SVG text elements for labels. Revenue data is loaded from a CSV file, formatted with `d3.format`, and rendered at 500 pixels high with a legend positioned to the side.

Apr 20, 2024
Loading thumbnail…

Task 9 & 10 D3 Tutorial UN

This interactive scatter plot visualizes the Iris dataset, displaying measurements of petal and sepal dimensions colored by species (setosa, versicolor, virginica). Using D3 v6, the animation cycles through different column pairs every few seconds, updating the axes and labels to compare various feature combinations. The visualization includes a custom legend, title, and axis labels, with SVG circles representing each flower instance. The code leverages D3's scaleLinear, axisBottom, axisLeft, extent, and csv data loading functions to create a reusable scatterPlot component that updates dynamically.

Apr 20, 2024
Loading thumbnail…

Activity-8_Task4UN

This bubble chart visualizes the correlation between heart rate, systolic blood pressure, and age, with point size encoding age and color encoding risk level. Built with D3 v7, it renders as an SVG with tooltips on hover, while a legend displays age-to-size mapping. The chart uses d3.scaleLinear for axes and bubble sizing, plus d3.scaleOrdinal with interpolateTurbo for categorical colors, reading data from bubblechart.csv.

Apr 11, 2024
Loading thumbnail…

Activity8Task3UN

This D3.js scatter plot visualizes the relationship between a car's horsepower and its fuel efficiency (miles per gallon), with each circle colored by the vehicle's country of origin (USA, Japan, or other). The visualization uses `d3.csv` to load data from a GitHub-hosted `cars.csv` file, then employs `d3.scaleLinear` to map the numeric axes and `d3.axisLeft`/`d3.axisBottom` to render the labeled scales. Circles are drawn as SVG elements, with colors assigned via a switch statement on the origin field.

Apr 11, 2024
Loading thumbnail…

Activity8Task2UN

A horizontal stacked bar chart shows the percentage distribution of social media platform users across each month of 2023. The chart displays the total share for platforms like Facebook, Pinterest, and Twitter, with each bar segmented by platform and colored via a custom ordinal scale. Using D3 v7, the code loads a CSV file and applies d3.stack to compute the layered segments, while d3.scaleBand positions the months and d3.scaleLinear maps percentages. Interactive tooltips reveal exact values on hover, with axes rendered by d3.axisBottom and d3.axisLeft.

Apr 11, 2024
Loading thumbnail…

Activity8Task1_UN

This example displays a horizontal bar chart of the 2020 populations for ten countries, with bars extending rightward from the y-axis. The chart is built with React and rendered as an SVG, using D3 v5’s `scaleBand` and `scaleLinear` functions for axis scaling. Data is loaded from a CSV file via D3’s `csv` parser. The x-axis tick labels are formatted using D3’s `format` function to abbreviate large numbers, and tooltips show the same abbreviated values.

Apr 11, 2024
Loading thumbnail…

Activity8Task1Q2_UN

This horizontal bar chart displays the populations of 20 countries for the year 2020, sorted in descending order. The visualization uses a React application with D3.js v5 APIs, specifically `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Each bar is rendered as an SVG `rect` element, with tooltips formatted via D3's `format` function to show values in billions. Data is loaded asynchronously from a CSV file using D3's `csv` function, and axes are generated with custom `AxisBottom` and `AxisLeft` components.

Apr 11, 2024
Loading thumbnail…

Fork of Buddha in colors -overlapping Buddha

A colorful, overlapping geometric composition recreates the silhouette of a Buddha formed from layered, rotating polygons with random coordinates and RGB fills. The visualization uses React to render an SVG scene, mapping arrays through nested iterations to generate multiple semi-transparent diamond shapes across a black background. The Buddha path is drawn via an SVG `<path>` element with a detailed `d` attribute, scaled and translated into place. The code relies on React and ReactDOM, with `Math.random()` driving the stochastic positioning and color values.

Mar 16, 2024