Aurore Paligot

@aurorepaligot·8 public vizzes

Face I

A stylized face rendered as a static SVG graphic, built from three circles: a large paleturquoise head with a black outline and two small pupils as dark dots. The composition is centered on a 960 by 500 canvas. The example uses raw SVG markup within an HTML page, with React and ReactDOM loaded via CDN, though the JavaScript code itself only logs the React object and does not drive the drawing.

Jul 1, 2021

Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. The page fetches a dataset of CSS named colors from a GitHub gist and logs the raw text to the browser console. A large, styled text element displays “Hello HTML” as a visual placeholder. The code uses `fetch()` with an async function to retrieve the CSV, showing the initial step of data loading before any visualization or parsing occurs.

Jun 17, 2021

Loading thumbnail…

Fork of Fork of Fork of Fork of Data Visualization with D3 - Smiley Part VI

A grid of randomly generated smiley faces fills the screen, each rendered as a separate SVG component. The code builds faces from reusable React components for the background circle, eyes, cheeks, and a mouth drawn with a D3 arc generator. Each face uses randomized eye offsets, radii, stroke widths, and mouth dimensions, while keeping a consistent yellow cheek and green outline. The example demonstrates composing D3’s `arc()` with React’s declarative rendering and the `d3.range` function to produce multiple variations in a single view.

Jun 17, 2021

Loading thumbnail…

Fork of Fork of Fork of Data Visualization with D3 - Smiley Part V

This example shows a stylized smiley face rendered as an SVG, with a green circular face, yellow rectangular cheeks, green eyes, and a green mouth formed by an arc. The face is composed from reusable React components, including `BackgroundCircle`, `Eyes`, `Cheeks`, and `Mouth`. Positioning relies on D3’s `arc` API to generate the mouth path, while all shapes are centered via an SVG `<g>` transform. The visualization uses React 17 and D3 v7, with static, hard-coded dimensions.

Jun 16, 2021

Loading thumbnail…

Fork of Fork of Data Visualization with D3 - Smiley Part IV

This example shows a stylized smiley face composed of green SVG shapes on a white background, centered within a 960×500 viewport. The face includes two eyes, a semi-circular mouth, and yellow cheek rectangles, all rendered using D3’s `arc` generator for the mouth path and React components for each facial feature. The code uses React 17 and D3 v7, applying SVG primitives like `circle`, `rect`, and `path` within a grouped `g` element translated to the center. Positioning relies on fixed offsets for the eyes and cheeks, while the mouth arc is defined by inner and outer radii and start/end angles.

Jun 16, 2021

Loading thumbnail…

Fork of Fork of Fork of Data Visualization with D3 - Smiley Part III

A smiling face is drawn as a red-outlined white circle on a transparent canvas, with red eyes, yellow cheeks, and an open red mouth created from a D3 arc path. The entire face is centered using an SVG group transform. The example combines React's declarative component structure with the D3.js library, specifically using the `arc()` API to generate the mouth path, while rendering all shapes as SVG elements within a fixed 960x500 viewport.

Jun 16, 2021

Loading thumbnail…

Fork of Data Visualization with D3 - Smiley Part II

A React component renders a static smiley face using SVG circles. It shows a large yellow circle with a red stroke for the face, and two smaller red circles positioned symmetrically for the eyes, all centered within a 960 by 500 viewport. The code uses ReactDOM to mount the component into the HTML root, with all dimensions and offsets defined as JavaScript constants. The example demonstrates basic SVG shape composition and layout within React, without any interactive or data-driven behavior.

Jun 15, 2021

Loading thumbnail…

Data Visualization with D3 - Smiley Part I

This example shows a simple smiley face built with two-dimensional SVG shapes. It draws a large yellow circle with a red stroke for the head, plus two smaller red circles for the eyes, all placed on a 960x500 canvas. The code uses basic SVG elements—`circle`—with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, rendered directly in the browser. No JavaScript libraries or data sources are involved; the static composition demonstrates manual positioning and styling without interaction or animation.

Jun 15, 2021