shaikfayazfz64@gmail.com

@ShaikFayaz6·14 public vizzes

FZ_ICE8_Q2_SocialNetwork

This force-directed network shows relationships among students, study groups, and topics in a computer science course, using node color to indicate entity type and edges to represent collaboration or shared focus. The D3.js v7 visualization renders nodes and links as an SVG, with the layout driven by a physics simulation of repulsive and attractive forces. Interactive tooltips reveal node details on hover, while node labels are drawn from the explicit data model in the code.

Nov 9, 2025

Loading thumbnail…

FZ_ICE8_Q2_FamilyTree

This D3.js v7 tree diagram visualizes a custom Computer Science and Technology learning roadmap as a hierarchical dataset. It shows four levels—root, main areas, topics, and tools—where each level uses a different shape and color in the SVG rendering to distinguish hierarchy. The code defines the roadmap data as a nested JavaScript object, then uses d3.select to target the SVG element and appends a group for layout, drawing nodes and links with CSS-styled tree-link and tree-label classes for the connecting lines and text labels.

Nov 9, 2025

Loading thumbnail…

FZ_ICE8_Q1_USMap

This choropleth map of the United States colors each state by a fictional “CS & Tech Engagement Score” (0–100), representing student participation in coding clubs, hackathons, and STEM events. Hovering over a state highlights it and displays a tooltip with the score. Built with D3 v7, the visualization uses `d3.geoAlbersUsa` for projection, `d3.geoPath` for rendering state boundaries from TopoJSON data, and SVG polygons for interactive state shapes. The sample dataset is defined inline as a JavaScript Map, and the tooltip follows the mouse using fixed positioning.

Nov 9, 2025

Loading thumbnail…

FZ_ICE8_Q1_WorldMap

This choropleth map visualizes a sample “Digital Access Score” by country, using a blue color scale to represent the mock 0–100 indicator values. Built with D3 v7, the visualization uses a Natural Earth projection and `d3.geoPath` to render countries from TopoJSON data. It displays a graticule grid on a soft blue ocean sphere, with an interactive hover tooltip that reveals each nation’s score and name. The example demonstrates linking geographic boundaries with attribute values, with a legend and header clarifying the illustrative nature of the data.

Nov 9, 2025

Loading thumbnail…

Fz_Ice7_Line_plot

This line chart shows the average aroma score for each coffee origin, with origins sorted alphabetically along the x-axis. The chart uses a point scale for origins and a linear scale for scores, with the line connecting points to reveal trends across regions. d3.csv loads the coffee dataset, and d3.rollups computes mean aroma values per origin. The SVG rendering includes rotated tick labels for readability and interactive tooltips on each data point via SVG title elements.

Oct 27, 2025

Loading thumbnail…

Fz_Ice7_Pie_Chart

This pie chart shows the distribution of coffee roast levels—Light, Medium, and Dark—across a dataset of coffee beans. The chart uses a D3 v7 SVG rendering with a custom legend, displaying counts for each category. The code loads coffee data from a CSV file, normalizes the Roast_Level field, and aggregates counts using `d3.rollups`. It then visualizes the results with `d3.pie`, `d3.arc`, and a color scale from `d3.schemeSet2`.

Oct 27, 2025

Loading thumbnail…

Fz_Ice7_Area_Chart

This area chart displays the average Aroma Score for coffee beans grouped by origin, with origins sorted alphabetically along the x-axis and mean scores plotted on the y-axis. The visualization uses D3 v7 to load a CSV file, aggregate the data with `d3.rollups` and `d3.mean`, and render smooth paths via `d3.area` and `d3.line` with a monotone curve. SVG axes are generated using `d3.axisBottom` and `d3.axisLeft`, with rotated tick labels for readability.

Oct 27, 2025

Loading thumbnail…

Fork of Fz_Ice7_reusable_scatter_plot

This scatter plot visualizes the relationship between acidity and sweetness levels across various coffee varieties, with point size encoding aroma score and color distinguishing roast level. The visualization uses a reusable scatter plot factory built with D3 v7, employing scaleLinear, scaleSqrt, and scaleOrdinal to map data dimensions. The chart renders as SVG with hover tooltips displaying detailed coffee information, while an HTML legend indicates roast categories. Data comes from a CSV file containing coffee attributes measured on quality scales.

Oct 27, 2025

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length against petal width for three flower species. The D3.js v7 code uses `d3.csv` to load the data and renders each flower as a semi-transparent SVG circle, with an ordinal color scale distinguishing species. Linear scales (`d3.scaleLinear`) map data values to pixel positions, while `d3.axisBottom` and `d3.axisLeft` add labeled axes.

Oct 19, 2025

Loading thumbnail…

Fork of D3 Starter

This visualization compares three coffee quality metrics—acidity, sweetness, and aroma—across countries of origin using a multi-series line chart. The code loads a CSV dataset, converts numeric columns, and renders three colored lines with data point markers using D3 scales and axis generators. It employs `d3.scalePoint` for the categorical x-axis of origins, `d3.scaleLinear` for the 0–10 score range, and `d3.line` to draw each metric series. Gridlines, rotated axis labels, and a legend clarify the chart, which renders as SVG.

Oct 19, 2025

Loading thumbnail…

Fork of D3 Starter

This bar chart displays the average aroma score for coffees grouped by their country of origin, based on data from a CSV file. The visualization uses D3 v7 to load the dataset, compute the means with `d3.rollups` and `d3.mean`, and render an SVG with `scaleBand` and `scaleLinear`. Bars are drawn with the `join` method and axes are labeled. The chart helps compare which origins produce higher-rated aromas visually.

Oct 19, 2025

Loading thumbnail…

Fork of Project with D3.js!

This example visualizes the number of coffee types by origin using a bar chart rendered with SVG via D3.js v5. It loads data from a CSV file and uses `d3.rollup` to count entries per origin. The chart employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to display tick labels. Bars are styled with a green fill, and the x-axis labels are rotated for readability.

Oct 19, 2025

Loading thumbnail…

Html_VizHub

This example shows a web page that summarizes a curated CSV dataset of global coffee varieties. It presents a text-based dashboard displaying the total number of coffee types, the file size of the source data, and the dataset's row and column counts. The page loads its data from a GitHub Gist via a `fetch` request, parses the CSV using `d3.csvParse`, and then injects the calculated statistics into the HTML. The presentation uses custom CSS for a coffee-themed color scheme and includes a hand-drawn SVG coffee mug icon.

Oct 5, 2025

Loading thumbnail…

VizHubHtml

This example renders a static “Hello HTML!” message with oversized typography, demonstrating a minimal HTML/CSS/JavaScript setup. The page displays the message in a centered 12em font, styled via a separate stylesheet. The code uses a plain HTML document structure, a CSS class selector, and a JavaScript module that logs “hello world” to the console. No data or visualization libraries are involved; the focus is on the basic file organization and load sequence.

Oct 5, 2025