S

samozarif@gmail.com

@SamyAttia·24 public vizzes

Loading thumbnail…

World Happiness Report 2022

This interactive visualization of the World Happiness Report 2022 displays a rotating orthographic globe using `d3.geoOrthographic` and `d3.geoPath`, with country circles scaled and color-coded by happiness score. It includes side panels with donut charts for top and bottom-ranked countries, scatter plots analyzing factor correlations, and a legend that filters highlighted circles by score ranges via `updateFilteredCircles`. Data comes from the World Happiness Report 2022 dataset, with SVG rendering and animations for hover interactions.

Loading thumbnail…

Top 5 U.S. Cities by Population in 2023

This animated visualization displays the top five most populous U.S. cities in 2023, with circles scaled by the square root of each city's population and labeled with the city name and exact population figure. The chart uses a dark radial-gradient background and color-coded radial gradients for each circle. Built with D3.js version 7.8.5, the code leverages the `select`, `transition`, and `easeLinear` APIs to manage the animated entrance of elements, delaying the growth of each circle and the fading in of its labels. The underlying data comes from a Wikipedia list of U.S. cities by population.

Loading thumbnail…

Happiness Factors Viz

This visualization displays the World Happiness Report 2022, plotting happiness scores for countries on an orthographic globe projection using d3.geoOrthographic and d3.geoPath. Circles sized by happiness score and colored by range bands appear on the map, with interactive tooltips and a legend for filtering by score. The visualization also includes side panels highlighting the top and bottom five happiest countries with flag icons, and a button to explore additional happiness factors from the dataset.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, displaying sepal length versus petal length with points colored by species using d3.scaleOrdinal and schemeCategory10. Hovering over the color legend highlights marks matching that species while dimming others, managed through a hoveredValue state and mouseover events. The visualization uses d3-selection joins (selection.join) for efficient SVG updates, with axes and labels rendered via custom functions built on d3.axisLeft, d3.axisBottom, and linear scales.

Loading thumbnail…

World Map_ World Happiness Countries_ 2022

This visualization depicts the top 10 countries in the 2022 World Happiness Report, using a world map with each country filled according to its happiness score and a red circle sized proportionally to that score placed at the country’s centroid. The map uses an equirectangular projection with a graticule, and the data, from a Kaggle dataset, is loaded via `d3.json` and `d3.csv`. The code leverages D3’s `geoPath`, `geoEquirectangular`, and `geoGraticule` APIs, along with TopoJSON to convert the world-110m TopoJSON into GeoJSON for rendering as SVG paths.

Loading thumbnail…

World Map

This example presents a stylized world map using an equirectangular-like natural Earth projection, displaying country boundaries, graticules, and landmasses in a teal color scheme with interactive zoom and hover effects. The visualization uses React with D3 v5, leveraging `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic rendering, while loading land and interior mesh data from the World Atlas TopoJSON source. The map features SVG rendering with CSS transitions for hover states and implements zoom functionality via D3's zoom behavior.

Loading thumbnail…

test

This visualization presents the top 5 U.S. cities by population in 2023, with each city represented as a white circle that fades in sequentially within a vertically centered panel. The circles are positioned using D3.js transitions, and users can hover over them to trigger a color change from white to a gold-brown, providing interactive feedback. The data is sourced from Wikipedia's list of United States cities by population, and the visualization is rendered as an animated SVG.

Loading thumbnail…

test

A heatmap visualizes correlations among six factors—GDP per capita, social support, healthy life expectancy, freedom, generosity, and perceptions of corruption—for the top ten happiest countries, with data from a CSV file. Panels flanking the heatmap list the top five countries, each shown as a circle containing its flag via SVG images. The code uses d3.scaleSequential with interpolateRdBu, d3.flatMap for matrix computation, Pearson correlation from helper functions, and animated opacity transitions with random delays.

Loading thumbnail…

World Happiness Pseudo-Visualization

This example demonstrates the fundamental D3 concepts of marks and channels by mapping a synthetic world happiness dataset to visual encodings. It uses `d3.scaleOrdinal` with a custom color range to distinguish continents, and encodes happiness values through point positions and circle sizes, echoing the `d3.symbol()` and bar-height variations shown in separate module files. The visualization combines SVG circles, text labels, and a title using `selection.data()` and `selection.join()`, while the included `hue.js`, `length.js`, `shape.js`, `size.js`, and `xPosition.js` modules illustrate alternative encodings such as color, length, and shape. The code builds upon the JavaScript ES6 module system and D3 7.8.5.

Loading thumbnail…

Pseudo-Visualization

This example demonstrates how to create a stylized line chart from a small set of six manually defined x-y coordinates. Rather than using standard axes or gridlines, the visualization relies on a single thick black polyline rendered as an SVG path element. The code uses D3.js version 7.8.5, specifically the `line()` generator from `d3-shape`, which constructs the path data from the data points. The path is styled with a 55-pixel-wide stroke, round line caps and joins, and no fill, producing a bold, continuous line across the container.

Loading thumbnail…

Pseudo-Visualization

This visualization demonstrates the fundamental D3 concepts of marks and channels by rendering the same five-value dataset across six separate SVG panels. Each panel isolates a single encoding channel: x-position, y-position, circle size, rectangle length, symbol shape, and categorical color. The code uses D3 selections, `selection.join()`, and `selection.each()` to drive the panels, with explicit SVG attributes for positioning, sizing, and styling. It applies `d3.symbol()` for path-based shape generation, `d3.schemeCategory10` for color mapping, and uses modular JavaScript files to keep each channel’s logic separate.

Loading thumbnail…

World Happiness Scatter Plot

This scatter plot visualizes the relationship between GDP per capita and happiness scores using the World Happiness dataset. Each circle represents a country, positioned along the axes with a light gray background and semi-transparent points to reveal overlapping data. The visualization is built with D3.js, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and custom `xAxisLabel` and `yAxisLabel` functions for clear labeling. Data points are rendered as circles with fixed radius and opacity, and the plot is designed to adapt to its container’s dimensions.

Loading thumbnail…

Video Game Scatter Plot

This scatter plot visualizes the relationship between global sales and critic scores for video games, with each point colored by genre. Using a log-scaled x-axis for sales, the chart reveals how commercial success correlates with critical reception. Built with D3.js, it leverages the `scaleLog`, `scaleLinear`, `axisLeft`, and `axisBottom` functions, along with the `xAxisLabel` and `yAxisLabel` utilities. The visualization filters out missing critic scores and non-positive sales, rendering circles with fixed radius and opacity over a gray inner rectangle.

Loading thumbnail…

Fork of Axis Labels

This example demonstrates how to add descriptive labels to the X and Y axes of a chart using the D3.js library (version 7.8.5). It shows a scatter plot with labeled axes, where the X-axis label is positioned below the axis and the Y-axis label is rotated 90 degrees and placed to the left. The implementation uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` functions to create scales and axes, while custom text elements handle the label placement and styling.

Loading thumbnail…

Video Game Sales Scatter Plot

This scatter plot visualizes video game sales data from a custom dataset, showing the relationship between release year and global sales in millions. The visualization uses D3.js scales and axes to map the data points, with each circle representing a game and its position determined by the year and sales values. The code leverages D3’s `scaleLinear` and `extent` for scaling, along with helper functions from curated libraries for axis labels and rendering. The chart includes a light gray inner rectangle to highlight the plotting area, making the distribution of sales over time clearly visible.

Loading thumbnail…

WorldHappiness Report2022

This example displays the first record of the World Happiness Report 2022 dataset as formatted JSON text. The code imports the CSV data, converts all numeric fields to numbers, and renders the first data object inside a `<pre>` element using a template literal. The visualization demonstrates the structure of the dataset, including the happiness score and its contributing factors, using vanilla JavaScript and the imported data.

Loading thumbnail…

Video Game Sales

This example presents a React-based visualization of video game sales data from Kaggle, loaded and parsed from CSV. It shows the raw structure of the dataset by displaying the first record as a JSON object in a formatted `<pre>` element. The code converts numeric fields such as sales figures and scores from strings to numbers during initialization, preparing the data for analysis. Using basic DOM manipulation via `innerHTML`, the visualization outputs the parsed data at a large font size for easy inspection, demonstrating a simple data-loading and display workflow rather than a complex graphical chart.

Loading thumbnail…

World University Rankings

A scatterplot matrix reveals correlations among institutional attributes like quality of education, alumni employment, and world rank, using the Kaggle World University Rankings dataset. The view also maps institutions by country and traces score changes over time. Data is loaded and parsed from a CSV via the `data.csv` import, with numeric coersion applied in `index.js` before rendering. The implementation relies on standard JavaScript and a container-based layout to display the parsed data as text.

Loading thumbnail…

Video Games Sales

This visualization displays the top 20 video games ranked by global sales in millions, with each game shown as a vertical bar. The bar chart shows sales values on the y-axis and game names on the x-axis, with rotated labels for readability. The code uses D3.js `d3.csv` to load and parse the video game sales dataset, then applies `d3.scaleBand` and `d3.scaleLinear` for positioning. The chart includes axes via `d3.axisBottom` and `d3.axisLeft`, with bars rendered as SVG rectangles colored steelblue.

Loading thumbnail…

Games

This example displays a JSON representation of the first video game entry from a CSV dataset, including attributes like title, platform, year, and sales figures. It parses numeric values from the CSV using JavaScript’s unary plus operator within a React component. The visualization is a simple, text-based output that shows the raw data structure, intended as a template for loading and examining external datasets.

Loading thumbnail…

Netflix Titles

This example displays the first row of the Netflix Titles dataset, parsed from a CSV file and rendered as a JSON object in a preformatted block. The code imports the data with a custom CSV loader, converts quantitative attributes to numbers, and uses a plain container innerHTML assignment to show the result. It relies on the Vue framework and the exported data object for VizHub integration, with the original dataset sourced from Netflix’s publicly available titles list.

Loading thumbnail…

Fork of Circles with D3

This example creates a starry night sky inside an SVG container using D3’s `select`, `append`, and `join` methods. A radial gradient background transitions from deep navy to black, while 120 randomly generated circles vary in position, radius, color, and opacity. The code uses D3’s data binding to produce the circles, with colors drawn from a palette of cool and warm tones. The rendering is fully SVG-based, and the dataset is procedurally generated with the `Math.random` function.

Loading thumbnail…

Fork of Circles with D3

This example generates a starry night visualization with 200 twinkling stars and five larger planets rendered as circles on a dark radial-gradient background. Using D3’s data join and method chaining, each star and planet gets randomized positions, sizes, and colors from predefined palettes. The stars’ opacity animates continuously through repeated transitions with `transition.attr` and a recursive `on('end')` callback to simulate twinkling. All geometry comes from procedural arrays built in JavaScript, with no external data source.

Loading thumbnail…

Fork of Circles with D3

This example creates an animated night sky using 200 randomly positioned stars and five larger planets rendered as SVG circles. Each star twinkles by continuously varying its opacity through a recursive transition loop, while the planets maintain a constant opacity. The visualization uses D3.js’s `select`, `join`, and `transition` APIs to bind data arrays containing position, radius, and color properties, with attributes like `cx`, `cy`, `r`, and `fill` set dynamically. A radial gradient background simulates deep space.