Mouad Et-tali

@MouadEt-tali·9 public vizzes

Untitled

This example renders a small, abstract emblem composed of multiple dark navy and blue vector shapes. The SVG paths define a stylized form with curved strokes and a bold, geometric composition, suggesting a logo, crest, or artistic glyph. The page is built with a minimal HTML structure and uses CSS for overall page styling, including a monospace font and hidden overflow. The JavaScript defines the SVG elements, which are filled with specific color values like `#0A0F25` and `#476CEF`.

Feb 1, 2023

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern for animated data changes in D3.js. It shows a row of fruits—apples and lemons—that are added, removed, or replaced over time, with the visualization updating accordingly. A set of timed transitions modifies the underlying array, and the code uses `selection.selectAll('g').data()` to manage enter, update, and exit states for each fruit group. The visual properties, such as circle radius and fill color, are mapped via `scaleOrdinal` from the D3 API, and the updates are triggered by `setTimeout` calls in a simple script. The rendering is done as SVG elements within an HTML page.

Nov 7, 2022

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 v5, showing how a static visualization changes over time as a fruit bowl is modified. It renders a bowl of apples and a lemon as SVG circles and text labels, with a fixed background rect. The code uses `d3.select`, `d3.range`, and custom `scaleOrdinal` scales for color and radius, while the `fruitBowl` function handles enter, update, and exit transitions. The sequence removes an apple, changes one to a lemon, and filters out another, each triggered by a `setTimeout`.

Nov 7, 2022

Loading thumbnail…

Bowl of fruit general update pattern

A D3.js animation demonstrates the general update pattern by rendering a bowl of fruit as colored circles that appear, change, and disappear over time. The code uses `d3.scaleOrdinal` for color and radius mappings, while `selection.data`, `enter`, `merge`, and `exit` manage the lifecycle of SVG elements. Transitions animate circle radius changes when apples are replaced by lemons or removed. The visualization shows fundamental DOM manipulation with a simple dataset and timed intervals.

Nov 7, 2022

Loading thumbnail…

World population area chart

This area chart visualizes global population growth over time, with a maroon filled curve set against a clean SVG backdrop. Using D3 v5, the code loads CSV data from VizHub, maps years to a time scale and population values to a linear scale, then applies `d3.area()` with `curveBasis` for smoothing. Axes are generated via `axisBottom` and `axisLeft`, with population labels formatted as billions (e.g., “7.0B”). The chart also includes custom tick styling, a rotated y-axis label, and a title from the provided dataset.

Oct 29, 2022

Loading thumbnail…

area chart

This area chart displays temperature readings in San Francisco over time, using a filled maroon curve against a clean grid. The data comes from a CSV file loaded via `d3.csv` from VizHub’s dataset repository. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, with `d3.area` and `curveBasis` to generate the smooth filled path. Axes are rendered as SVG elements with `d3.axisBottom` and `d3.axisLeft`, including tick lines and labels.

Oct 29, 2022

Loading thumbnail…

A week in san fransisco

This example visualizes a week of temperature readings in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. It uses D3 v5 to load data from a CSV, scales the values with `d3.scaleTime` and `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The line is generated using `d3.line` with a `curveBasis` interpolation, drawn as an SVG path. The chart includes labels and a title, with data sourced from a hosted temperature dataset.

Oct 29, 2022

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart plots temperature (in Celsius) against time, with the line smoothed using `curveBasis` and labeled axes for Time and Temperature. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to generate the SVG rendering. Grid lines, a maroon styled path, and axis labels enhance readability, while data parsing converts timestamps to `Date` objects and temperatures to numbers.

Oct 29, 2022

Loading thumbnail…

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

This example builds a smiley face in SVG using D3.js v5, demonstrating fundamental DOM manipulation. It uses `d3.select` to append SVG elements and `d3.arc` to generate the mouth path, while circles and rectangles form the eyes and eyebrows. The face is centered on a 960×500 canvas via a transformed `<g>` group, with static features positioned by absolute coordinates. The code shows how D3 creates and styles shapes directly, though the eyebrows remain fixed rather than animating.

Oct 27, 2022