A

Asrar Al Qassem

@Alasrar·29 public vizzes

Loading thumbnail…

Cancer Survival Rates

This visualization uses overlapping semi-transparent areas to compare cancer survival rates for females and males from 1977 to 2013. The chart highlights the trend in survival percentages over time for each sex, with pink representing females and light blue representing males. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `csv` to load and parse data, then renders the areas and axes via SVG. A legend and labeled axes clarify the visualization, which sources data from the five-year cancer survival rates by sex and race.

Loading thumbnail…

Brain and CNS Cancer Mortality Rate in UK

This visualization displays the mortality rate of brain and central nervous system cancer in the United Kingdom over time, with each orange circle representing a yearly data point and a blue line tracing the overall trend. The line animates itself into view using a stroke-dashoffset transition over two seconds, drawing from left to right across the SVG canvas. The chart uses D3 v5 scales for time-based x-coordinates and linear y-coordinates, with grid lines extending from both axes for readability. Data comes from a CSV file loaded via D3’s csv function, filtered to include only United Kingdom records, and the visualization is built with React, rendering as an SVG with smooth animation.

Loading thumbnail…

Cancer Worldwide by Region

This pie chart displays the cancer mortality rate for top regions worldwide in 2019, with each slice representing a country’s liver cancer value. The visualization uses D3 v5’s `pie()` and `arc()` generators to create the chart, while `scaleOrdinal` with `schemePastel2` assigns colors to regions. Labels are positioned using an arc generator with a larger radius, and a legend is built from the pie data. The data is loaded via `csv()` from a WHO dataset hosted on GitHub, and the chart renders in an SVG container within a React framework.

Loading thumbnail…

Reusable D3 Scatter Plot

This animated scatter plot cycles through cancer types—liver, breast, prostate, and thyroid—displaying death rates over time using the Iris Dataset-inspired structure. Built with reusable D3.js components and SVG rendering, the visualization updates every 2 seconds, transitioning between datasets while updating the title and axis labels. Symbols vary by cancer type (circle, square, star) and axes represent years and number of deaths, with smooth transitions on each refresh.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris Dataset using D3 v7, rendering each data point as a circle positioned by scaled time and linear axes. The chart is built through a custom `ScatterPlot` class with a `render` method that appends SVG elements, using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The example demonstrates a modular chart architecture inspired by reusable chart patterns, with data passed separately from the visualization logic.

Loading thumbnail…

ICE-6 Impact of Cancer Deaths 2019

This interactive visualization displays cancer mortality trends in the United States from 1990 to 2019, plotting individual yearly death counts for fifteen distinct cancer types as colored dots. The scatterplot uses SVG circles rendered through React and D3, with each cancer type assigned a unique color and an interactive tooltip revealing exact death numbers on hover. Built with D3 scales (`scaleTime`, `scaleLinear`), axes (`axisLeft`, `axisBottom`), and event handlers, the chart reads from a CSV dataset filtered for USA records, making temporal patterns across cancer categories immediately comparable.

Loading thumbnail…

Q1 ICE6: Bar Chart for Cancer Deaths USA - 2019

This chart displays the number of deaths for each cancer type in the USA for 2019, sorted in descending order. It uses horizontal bars with lengths proportional to the death counts, colored by cancer type via a categorical scale. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and animated `transition` effects to grow the bars smoothly. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

ICE-6 Cancer Deaths 2019

A horizontal bar chart displays cancer death counts across cancer types in the USA for 2019, using data from a CSV file filtered to the year and country. Built with React and D3 v5, the visualization renders SVG rectangles whose widths animate over eight seconds via `transition()` based on a linear scale. Categorical colors from `schemeCategory10` distinguish each cancer type, with axes generated by `axisBottom` and `axisLeft`. The data is loaded with `d3.csv` and processed into a flat array for scaling and rendering.

Loading thumbnail…

Fork of ICE-6 Impact of Cancer Deaths 2019

This fork of the ICE-6 visualization shows the impact of cancer deaths in 2019, using an SVG-based chart built with D3 v5 and React. The graphic combines abstract, flowing line forms and circular motifs in a soft gray palette to represent mortality data. A prominent donut-style chart on the right displays proportional data, while icon-like elements and directional shapes on the left suggest demographic or temporal flows. Although the original dataset focused on 2017, this 2019 version updates the underlying figures while preserving the overall layout and visual metaphor of the original design.

Loading thumbnail…

Fork of HTML Starter

This example is a minimal HTML page that uses CSS and JavaScript to display a static visualization. It demonstrates the foundational structure for a web-based graphic, rendering a simple visual element on a canvas. The code provides a barebones template for customizing a visualization, serving as a starting point for more complex projects. It is a fork of an HTML starter, showcasing the core technologies of the web.

Loading thumbnail…

Fork of Fly

This bar chart visualizes cancer deaths in the USA for 2019, comparing three cancer types: liver, kidney, and lip/oral cavity. The code loads CSV data from a GitHub gist using `d3.csv`, filters for USA and year 2019, and maps the selected values to a dataset. It uses `d3.scaleBand` and `d3.scaleLinear` to position bars, with `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes rotated x-axis labels and a title, with bars filled with steelblue.

Loading thumbnail…

Fork of Pink Face

This example shows a bar chart of randomly selected cancer types and their death counts for the USA, titled “Cancer Deaths in the USA (Random Selection).” It loads a CSV dataset via `d3.csv`, filters it to USA records, and picks three random column names to build the dataset. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and renders SVG rectangles as bars, with `d3.axisBottom` and `d3.axisLeft` for the axes.

Loading thumbnail…

Fork of Blank Slate

This example demonstrates how to load a CSV dataset from a remote URL and display basic information about it, such as file size, row count, and column count, using D3.js. The visualization shows a static text report rendered inside a styled container, with the dataset’s metadata presented in a readable format. The code uses the `d3.csv` function to fetch and parse the data, then computes the formatted CSV string length to estimate size. The `d3.csvFormat` method converts the parsed data back to CSV for size calculation, while `data.length` and `data.columns` provide row and column counts. The result is injected into the DOM via `textContent`.

Loading thumbnail…

ICE5- Retrieve information from the dataset

The visualization presents a stylized, abstract planetary-like form rendered as an SVG with gradient fills and animated paths. The central element is a large dark blue sphere overlaid with intricate, flowing curves that suggest geographic or atmospheric features, drawn in contrasting cyan and light blue tones. A smaller grey sphere in the lower-left corner echoes the main form. The composition is minimal, using smooth gradient transitions, with no visible axes, labels, or data marks, focusing purely on geometric form and the retrieval of shapes from the dataset. Subtle animation is implied through the path stroke-dasharray and layered rendering, inviting exploration of the underlying data structure.

Loading thumbnail…

Importing Data from URL

The visualization demonstrates loading a remote CSV dataset into D3.js, parsing it asynchronously via `d3.csv`, and rendering an animated bubble chart in SVG. It uses force simulation to position circles, with smooth transitions on data updates and tooltip interactions. The chart is built with React, employing D3 v6 to bind data, apply scales, and drive enter/update/exit animations.

Loading thumbnail…

Pink Face

A pink smiley face rendered in SVG animates its blinking eyes, shifting eyebrows, and a mouth that opens and closes. Built with D3.js v5, the example demonstrates core DOM manipulation through selections, shapes, and chained transitions. It uses `transition.attr` and `transition.attrTween` with the `arc` and `interpolate` helpers to animate the mouth’s angles and eyebrow position, while a recursive `blink` function cycles eye radii via timed transitions.

Loading thumbnail…

Propeller2

A rotating three-blade propeller is visualized with D3.js, rendered as SVG shapes over a grey background. The visualization shows a central black hub with three silver blades and yellow tips spinning continuously. The rotation is achieved using D3’s `transition.attrTween` with a linear easing function, updating the group’s `transform` attribute by incrementing the rotation angle by 360 degrees per cycle and recursively restarting the animation on end. The code uses D3 v6 to append circle and rectangle elements, constructing the propeller geometry via explicit coordinate attributes.

Loading thumbnail…

Propeller

A motorless propeller spins continuously on a grey background, its three blades and central hub rotating around the center of an SVG canvas. The blades use a red-to-black linear gradient, while the hub is a plain yellow circle. The rotation is driven by D3.js v6’s `transition.attrTween`, which interpolates the group’s `transform` attribute to increment the angle by 360 degrees per second with `d3.easeLinear`. No data source is involved; the visualization demonstrates a purely procedural animation.

Loading thumbnail…

Windmill

This animated scene depicts a windmill beside a flowing river, with curly white wind paths drifting across a bright sky. The visualization uses D3.js v6 to render and animate SVG elements, including a river whose path oscillates between two bezier curves via chained transitions. Multiple wind curls loop endlessly using `transition.attrTween` to interpolate their horizontal position. The scene demonstrates programmatic landscape drawing with no external data, relying entirely on hardcoded coordinates and animation logic in plain JavaScript.

Loading thumbnail…

Sailing

A serene sea scene rendered with SVG and animated using D3.js v6. The visualization depicts a sailboat with a brown hull, green triangular sail, and mast, floating on a deep blue ocean with white wave circles oscillating vertically via chained transitions with sinusoidal easing. Clouds drift horizontally across the sky using linear transitions, while simple black bird shapes flap through the air. The code constructs the scene procedurally, generating wave data with `d3.range` and `Math.sin`, and animates all elements using D3 transitions with recursive callbacks for infinite looping.

Loading thumbnail…

Decorated Vase with Flowers

Two D3.js flower-vase compositions render in side-by-side SVG containers. Each uses a linear gradient to shade the vase brown and places three stems with differently colored flower petals around dark or yellow centers. The first container draws stems as lines with five-petal layouts, while the second uses rectangles and path-drawn leaves with eight petals per flower, all generated programmatically with D3's select and append methods.

Loading thumbnail…

Office

This example uses D3.js (v6) to draw a simple office scene in an SVG container. It shows a wooden desk with legs, a person seated in a chair, a laptop, keyboard, mouse, coffee cup, and a small plant. The code appends rectangles, circles, lines, and a path onto the SVG, using attributes like `x`, `y`, `width`, `height`, and `fill` to style each element. All shapes are positioned manually with fixed coordinates, producing a static, schematic illustration of a workspace.

Loading thumbnail…

People Dancing

Three stylized people, each composed of simple SVG shapes—a head, body, eyes, smiling mouth, arms, and legs—stand in a row and animate in a coordinated dance. The D3.js v6 code binds an array of three data objects to group elements and uses `selection.append` to draw each body part. Legs swing back and forth while arms wave repeatedly through chained `transition` calls with rotation transforms, creating a looping, cheerful motion.

Loading thumbnail…

Fly

Three birds rendered as simplified SVG shapes—a grey circle for the body and two black paths for wings—flap in place within an 800-by-600 viewport. D3 transitions with `transition.attrTween` and `d3.interpolateString` alternate wing rotation between -45 and 45 degrees in a continuous loop, triggered recursively via the `on('end')` listener. The animation runs directly from a plain HTML file using D3 v6 and raw JavaScript, with no external data source; the birds are positioned at fixed coordinates (200,200), (400,300), and (400,150) and flap independently.

Loading thumbnail…

People

This visualization uses D3.js v6 to render simple stick figures representing people in an SVG container. Each person is constructed from basic geometric shapes: a peachpuff circle for the head, a skyblue rectangle for the body, and lines for arms and legs. The code binds an array of x,y coordinates via `selectAll().data().enter()` and appends a group per person, translating each group to its position. It demonstrates fundamental D3 data joins and SVG shape creation with hardcoded sample data rather than an external source.

Loading thumbnail…

Snowman

A stylized snowman composed of stacked SVG circles with arms, a triangular orange nose, and blinking eyes is rendered on a gray background. The animation uses SVG `<animate>` elements to cycle the eye radius from 5 to 0 and back every 2 seconds. All shapes are created programmatically via the `createSVGElement` helper, using the `document.createElementNS` API for the SVG namespace. The snowman is positioned centrally within a 960×500 SVG viewport using a `transform` translation.

Loading thumbnail…

Fork of Fork of Bird's Landscape - D3.js

This interactive SVG landscape depicts a dynamic outdoor scene with a gradient sky, sun, land, trees, birds, dogs, flowers, stars, and a moving truck. Built with native SVG and JavaScript, the visualization uses animated elements such as `animateTransform` for bird wing flaps, `animate` for sky color transitions, and CSS keyframes for a sun track. Procedurally generated and placed elements, including flies with `animateMotion`, populate the scene, while a red truck moves across a road via manual animation.

Loading thumbnail…

Bees

This example presents an animated SVG scene where 20 bee-like figures move randomly across an 800×600 canvas. Each bee consists of a yellow circular body and two gray wings that continuously flap using `d3.interpolateString` within a recursive `transition.attrTween` loop. The bees’ positions are updated every 10 seconds via chained `transition` calls with `easeLinear`, selecting random coordinates from the viewport. The scene uses D3 v6 to build and animate the SVG elements directly within HTML, with no external data source.

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows bobbing up and down in a looping transition. The example demonstrates basic SVG shape creation and DOM manipulation using D3 selections, appending circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. The `transition()` method with a 2000-millisecond duration moves the eyebrow group vertically, then reverses the transform to create the oscillation. It uses D3 v5's `select` and `arc` APIs.