Nordes Ménard-Lamarre

@Nordes·9 public vizzes

Fork of Vega-Lite API Template

A scatterplot visualizes the relationship between engine displacement and horsepower for cars from the auto-mpg dataset. The view maps quantitative fields to the x and y axes, using semi-transparent points with tooltips displaying vehicle names. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries, fetches CSV data via D3’s `csv` function, and renders a full-window SVG with customized axes and label styling.

Sep 6, 2021

Loading thumbnail…

Loading data with react and d3

This example demonstrates how React and D3 can work together to load and summarize a CSV dataset. It fetches a list of CSS named colors from a GitHub gist using `d3.csv`, stores the parsed result in React state via the `useState` and `useEffect` hooks, and then displays a text summary using `d3.csvFormat` to calculate the file size in kilobytes, along with the row and column counts. While the data loads, the component shows a “Loading...” message. The visualization is minimal, consisting solely of this computed metadata rendered as plain text.

Sep 6, 2021

Loading thumbnail…

D3 Load and parse CSV files

This example demonstrates D3’s asynchronous CSV loading and parsing by fetching a remote file of CSS named colors and displaying summary statistics: size in kilobytes, row count, and column count. The primary code uses `d3.csv(csvUrl).then()` to fetch and parse the data, then `d3.csvFormat` to measure its size. A commented alternative shows `fetch()` with `d3.csvParse` for manual text handling. The data comes from a GitHub Gist containing the CSS color names.

Sep 6, 2021

Loading thumbnail…

Mouse follower

A circle tracks the mouse cursor across an SVG canvas, reacting instantly to movement. The visualization demonstrates state management in React, using the `useState` hook to store cursor coordinates and `useCallback` to optimize the mouse-move handler. The SVG circle updates its `cx` and `cy` attributes based on those coordinates, rendered via ReactDOM. The example uses D3.js v7 only for its bundled build, while the core interaction is purely React-driven.

Sep 6, 2021

Loading thumbnail…

Fork of Fork of Fork of Fork of Smiley face part VI

A grid of 18 randomized smiley faces renders with React components, each face varying in stroke width, eye offset, eye radius, mouth width, and mouth radius. The faces are drawn as SVG circles and arcs, using D3’s `arc()` generator for the mouth paths and `range()` from D3 to create the array of faces. Each face is composed of separate React components like `BackgroundCircle`, `Eyes`, and `Mouth`, assembled within an SVG container that centers coordinates. The visualization demonstrates how parametric variations of simple geometric shapes produce diverse facial expressions.

Sep 6, 2021

Loading thumbnail…

Fork of Fork of Fork of Smiley face part V

A smiling face is rendered as a composite of basic SVG shapes within a React application. The visualization constructs the face from three distinct components: a yellow circular background, two black eyes, and an arc-based mouth. The scene is assembled using React components with D3.js, where the D3 arc generator creates the mouth path. Color, stroke, and dimensions are defined through React props, and the entire face is centered within an SVG canvas using SVG transform attributes.

Sep 6, 2021

Loading thumbnail…

Fork of Fork of Smiley face part IV

This example renders a classic smiley face as a static SVG illustration. The face consists of a yellow circle with a black stroke, two black eyes, and a mouth drawn as an arc with a thick stroke width. Built with React for component structure and D3’s `arc` generator for the mouth shape, the visualization uses fixed dimensions (960×500) and centers all elements within a single SVG `<g>` group. The code defines reusable components like `BackgroundCircle` and positions the eyes and mouth using explicit pixel offsets and radius values.

Sep 6, 2021

Loading thumbnail…

Fork of Smiley face part III

The visualization displays a yellow smiley face composed of SVG circles and an arc-shaped mouth on a 960 by 500 canvas. It draws two black eye circles and a mouth path using the D3 `arc` generator for the curved mouth. React (from the UMD build) renders the SVG elements, while the face’s background and stroke rely on d3’s `circle` primitives. The data is hardcoded, not sourced externally.

Sep 6, 2021

Loading thumbnail…

Smiley face part II

The visualization displays a simple yellow smiley face drawn as a single SVG graphic, composed of three circles: a large head and two smaller eyes. It demonstrates how React creates SVG elements declaratively, with the App component returning JSX that defines each circle’s position and styling. The code uses React and ReactDOM to render the graphic into the DOM, with dimensions and offsets computed as constants. The facial features omit a mouth, focusing solely on the head and eyes, and the rendering relies on React 17’s production build loaded via a CDN.

Sep 6, 2021