Skip to main content
Log in
M

mattaouad

@mattaouad·6 public vizzes

Loading thumbnail…

My first test

This example demonstrates a minimal SVG circle rendered with D3.js, showing how to append and style a single shape. The page loads d3.v4 and d3-dsv.v1, logging the D3 object to the console. A circle with radius 280 is added to an empty SVG element, while hidden CSS classes for line styling exist but are not used. The visualization emphasizes basic SVG manipulation rather than data binding or interaction, serving as a foundational test of D3’s selection and attribute methods.

Jan 16, 2020
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying summary statistics about the CSS Named Colors dataset. The visualization shows the file size in kilobytes, the total number of rows, and the number of columns parsed from the remote CSV source. The code uses the D3 v5 `d3.csv` and `d3.csvFormat` functions to fetch and parse the data, displaying the computed values in a large pre-formatted text block. It also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse` for comparison.

Jan 16, 2020
Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to construct a simple face from basic SVG shapes, with a console log confirming the D3 library is loaded. The page renders an empty SVG canvas sized 960 by 500 pixels, while the script references the D3-dsv module and an external D3plus script via CDN, though no data processing or shape generation is explicitly shown. The visualization demonstrates the minimal setup for integrating D3 into an HTML page, relying on raw script tags rather than a bundled module system. The face itself is not actually drawn in the provided code.

Jan 16, 2020
Loading thumbnail…

Lets make a face with D3.js

This visualization demonstrates how to construct a face using SVG shapes and CSS styling, all orchestrated through D3.js. The example builds a simple facial composition within an SVG canvas, setting a red background and applying custom stroke styles to line elements. The code imports D3’s `select` API to target the SVG element and adjust its properties programmatically. Rendering relies on SVG paths and lines, with styles defined in an external stylesheet, showing a basic integration of D3 with SVG drawing primitives.

Jan 16, 2020
Loading thumbnail…

Lets make a face with D3.js

This visualization demonstrates how to construct a face using SVG shapes and CSS styling, all orchestrated through D3.js. The example builds a simple facial composition within an SVG canvas, setting a red background and applying custom stroke styles to line elements. The code imports D3’s `select` API to target the SVG element and adjust its properties programmatically. Rendering relies on SVG paths and lines, with styles defined in an external stylesheet, showing a basic integration of D3 with SVG drawing primitives.

Jan 16, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on a dark background using SVG shapes, with animated eyebrows that rise and fall over two seconds. The example demonstrates fundamental D3.js v3 DOM manipulation by building the face with `circle` elements, a `rect` for each eyebrow, and a `path` created with the `d3.arc` helper for the mouth. The eyebrows are moved using chained `transition().duration()` calls, which shift the group’s `transform` attribute to create the up-and-down motion. All shapes are centered within an SVG canvas using a translated `<g>` element.

Jan 15, 2020