Skip to main content
Log in
A

Awrng

@AWgithub1·13 public vizzes

Loading thumbnail…

Assignment #2 Building Dashboard

This dashboard visualizes how AI tool usage relates to productivity and work/study hours among students and professionals, using a dataset from Kaggle. It presents four interactive charts: a bar chart showing AI tool popularity, a pie chart for user type distribution, a line chart for productivity against work/study hours, and a scatter plot of AI usage versus productivity. Built with D3.js v7, the visualization uses SVG rendering and employs `d3.rollup` for data aggregation, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` for axes. The code handles missing numeric values by substituting column means and filters out incomplete categorical rows before rendering.

Oct 6, 2026
Loading thumbnail…

AI Tool Usage

This visualization uses small multiples to compare cloud provider performance across service types. Each panel displays a scatter plot of CPU utilization percentage against throughput requests per second, with points colored by cloud provider using a Tableau10 scheme. The d3.v7 code loads CSV data, shares x and y linear scales across all panels for consistent comparison, and uses `d3.scaleOrdinal`, `d3.extent`, and `d3.csv`. The SVG rendering includes panels arranged in a three-column grid with axes, titles, and a legend.

Oct 4, 2026
Loading thumbnail…

AI Usage Dashboard

This dashboard visualizes AI usage patterns and productivity among students and professionals, with data sourced from a Kaggle dataset. It presents four linked charts: a bar chart showing AI tool popularity, a pie chart for user type distribution, a line chart examining productivity against work or study hours, and a scatter plot relating AI usage to productivity. Built with D3 v7, the visualization uses SVG rendering, `d3.rollup` for data aggregation, and scales like `d3.scaleBand` and `d3.scaleLinear`, with a custom axis and rotated labels.

Oct 4, 2026
Loading thumbnail…

AI Tool Usage

This dashboard visualizes car data from a CSV file, filtering by country to show four coordinated charts: a line chart of cars manufactured over time, a bar chart of top car brands, a pie chart of car color counts, and a scatter plot comparing brand count against average year of manufacture. The visualizations are built using D3.js v7 with SVG rendering, leveraging scales such as `d3.scaleLinear` and `d3.scaleOrdinal`, as well as `d3.rollups` for data aggregation. A dropdown selector and tooltip enhance interactivity.

Oct 4, 2026
Loading thumbnail…

Assignment#1 Resume

This example renders a professional resume as a web page using standard HTML, CSS, and JavaScript, with embedded SVG graphics for section headers. The page displays a data analyst’s summary, technical skills, projects, and work experience, using styled text and colored rectangles to organize content. JavaScript functions `showText` and `clearText` manage a dynamic message area that responds to mouse hover events over icons. The layout relies on CSS for typography and positioning, while inline SVG elements create the visual accents. The code demonstrates a straightforward, non-interactive document-style visualization using only core web technologies.

Oct 2, 2026
Loading thumbnail…

Resume

This resume presents a professional summary for a data analyst, formatted as a standard HTML page styled with a custom CSS stylesheet. Content is organized into distinct sections for skills, projects, experience, and education, with key headings highlighted in blue. The interactive element involves hovering over hobby icons displayed as large text glyphs, which triggers a scale transformation for visual feedback. The page relies on core HTML and CSS for layout and interactivity, with JavaScript utility functions for display messaging but no external libraries or data sources.

Oct 2, 2026
Loading thumbnail…

Resume

This interactive HTML resume presents a job applicant's professional profile using structured sections for a summary, skills, projects, experience, and education. The page relies on standard HTML and CSS, with JavaScript functions `showText` and `clearText` that dynamically update a message area with a specified color when triggered. The document itself is the primary data source, formatting career details into a clean, readable layout with a simple hover effect on hobby icons.

Sep 28, 2026
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the religious composition of populations across fifteen countries, using horizontal segments within each bar to represent different faiths. Built with React and D3 v7, the visualization loads CSV data and processes it through d3.group and d3.stack to create the layered series. The SVG rendering uses d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal for positioning and coloring, with clickable bars that trigger React state updates to highlight selected countries with a black stroke.

Sep 1, 2026
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the religious composition of populations across fifteen countries, using horizontal segments within each bar to represent different faiths. Built with React and D3 v7, the visualization loads CSV data and processes it through d3.group and d3.stack to create the layered series. The SVG rendering uses d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal for positioning and coloring, with clickable bars that trigger React state updates to highlight selected countries with a black stroke.

Sep 1, 2026
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the religious composition of populations across fifteen countries, using horizontal segments within each bar to represent different faiths. Built with React and D3 v7, the visualization loads CSV data and processes it through d3.group and d3.stack to create the layered series. The SVG rendering uses d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal for positioning and coloring, with clickable bars that trigger React state updates to highlight selected countries with a black stroke.

Sep 1, 2026
Loading thumbnail…

SVG Fandamental_AW

This example demonstrates fundamental SVG shapes and a simple pie chart showing gaming genre distribution. It displays colored circles, rectangles with strokes, and polygons forming a rocket illustration, alongside a pie chart breaking down data into FPS, Casual, and RPG genres. The visualization uses raw SVG elements including `<circle>`, `<rect>`, `<polygon>`, and `<path>` with arc commands to construct the pie slices. Labels are connected using `<line>` and `<text>` elements, with all shapes explicitly positioned and colored through SVG attributes.

Sep 1, 2026
Loading thumbnail…

new SVG Fandamental_AW

This example demonstrates fundamental SVG shape creation and styling through hand-coded markup, featuring colored circles, rectangles with strokes, and a stylized rocket built from polygons. The code also includes a pie chart showing gaming genre distribution, constructed with SVG path arcs and accompanied by labeled lines and a legend. All elements are rendered directly in the browser using native SVG APIs without additional libraries, with basic styling provided through external CSS and JavaScript logging a simple console message. The visualization highlights basic geometric composition and data representation through vector graphics.

Sep 1, 2026
Loading thumbnail…

Fork of new SVG Fandamental_AW

This example demonstrates three separate SVG-based visualizations within a single HTML document, beginning with basic shapes like circles and rectangles, followed by a rocket illustration composed of polygons, and concluding with a pie chart showing gaming genre distribution. The pie chart uses SVG path elements with arc commands to create three segments for FPS, Casual, and RPG genres, accompanied by labels and a legend. The code leverages native SVG APIs, including `<circle>`, `<rect>`, `<polygon>`, `<path>`, and `<text>` elements, with inline styling for colors and strokes, and includes a separate stylesheet for additional text formatting.

Aug 31, 2026