Riccardo De Lucia

Fork of Loading and Parsing Coronavirus Data

This example displays text reporting the parsed size, row count, and column count of a CSS named colors dataset loaded from a CSV file. It uses the D3.js library (version 5) with both `d3.csv` to fetch and parse the remote data, and `d3.csvFormat` to compute its length. A React-based build script populates a large `<pre>` element in the HTML with the resulting summary. The visualization is minimal, focusing on the mechanics of asynchronous data loading via Promises rather than graphical representation.

Aug 30, 2021

Missing Migrants: Multiple Views with Brushing

A world map displays circles sized by the total number of dead and missing migrants per location, using a natural Earth projection from d3.geoNaturalEarth1. A linked date histogram below charts monthly totals, with a brushX brush that filters the map to the selected time range. The visualization uses React with d3.v5, SVG rendering, and data from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

Aug 30, 2021

Missing Migrants: Multiple Views

This visualization displays global migrant mortality events using two coordinated views: a natural Earth projection bubble map and a time-series histogram. The map positions each event as a semi-transparent circle scaled by the square root of the total dead and missing, while the histogram aggregates monthly totals. Both views use React and D3 v5, with `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering and `d3.histogram` for binning. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Aug 30, 2021

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, showing relationships between four measured attributes (sepal and petal length/width). Users can dynamically select which attributes appear on the x- and y-axes via dropdown menus, while a color legend distinguishes the three iris species. The visualization uses React with D3 v5 scales (d3.scaleLinear, d3.scaleOrdinal) for positioning and coloring, renders marks as SVG circles, and reads the data from a CSV using d3.csv.

Aug 27, 2021

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The visualization features dropdown menus to switch which attributes appear on the x and y axes, with species distinguished by color using a categorical scale. Built with React and D3 v5, the chart uses d3.scaleLinear for axes and d3.scaleOrdinal for color encoding, rendering SVG circles with tooltips that display precise values. The CSV data is loaded asynchronously via d3.csv and typed numerically before plotting.

Aug 27, 2021

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions for three flower species. Users select which attributes to plot on the x and y axes using two ReactDropdown menus, dynamically updating the chart in real time. The visualization is built with React and D3 v5, using `scaleLinear` for both axes and SVG circles for data points, with axis labels and tick marks rendered through reusable React components.

Aug 27, 2021

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements such as sepal length and petal width. Users can select which attribute is mapped to the x-axis and y-axis using two drop-down menus, built with React’s `useState` hook. The visualization, rendered as SVG, uses `d3.scaleLinear` and `d3.extent` to compute scales, while `d3.csv` loads the data. Each point is a circle with a native SVG `<title>` element for hover tooltips, and axes are generated from tick values using custom React components.

Menus With React

This example demonstrates a React form with a dropdown menu for selecting a pet, using `useState` to manage the chosen value. The `Dropdown` component renders a native `<select>` element, mapping over an options array and triggering `onSelectedValueChange` on change. While the menu interaction is the focus, the embedded D3 v5 and React code suggest a smiley face visualization could render alongside, though the visible implementation only shows the form controls. The interface uses a simple HTML label and select styled with CSS, with rendering handled by React DOM.

React Template

This example shows a simple smiley face rendered as an SVG using React and D3. The React component defines a static graphic with a yellow circle for the face, two smaller circles for eyes, and a commented-out reference to a full SVG structure. The code uses React’s `ReactDOM.render` to mount the component into the DOM, while D3 v5 is loaded via a CDN but not actively invoked in the visible script. The rendering approach relies purely on JSX-defined SVG elements, with the face’s dimensions fixed at 960 by 500 pixels in the underlying markup.

Margins and Axes

This example displays the top 10 most populous countries as horizontal bars, with a y-axis labeling country names and an x-axis showing population counts with tick marks and gridlines. The visualization uses React for component structure and d3.scaleBand, d3.scaleLinear, and d3.max to compute scales and domain values directly from CSV data provided by the United Nations World Population Prospects 2019. SVG renderings are generated through d3-selection helpers, with margins applied via a translate transformation to position the chart content within the 960×500 viewport.

Loading Data in React

This example demonstrates how to load and summarize CSS named colors data within a React application. It displays a text summary showing the data’s size in kilobytes, row count, and column count, prefixed by a loading message until the data arrives. The code uses React hooks (useState, useEffect) to manage state, and D3’s csv function to asynchronously fetch a remote CSV file. The message formatting relies on d3.csvFormat to calculate the data size.

Parsing CSV Data with D3

This example demonstrates how to parse CSV data using D3, presenting a simple text summary of the file’s size, row count, and column count. The code loads a CSS Named Colors dataset from a GitHub gist via `d3.csv`, which internally fetches and parses the data, then displays the results in a large `<pre>` element. The example also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, highlighting different approaches to loading and parsing CSV data with D3 v5 and React.

Interaction With React

A React application demonstrates mouse interaction by rendering a single circle that follows the cursor across an SVG canvas. The code uses React’s `useState` and `useCallback` hooks to track the pointer position and update the circle’s `cx` and `cy` attributes on every `mousemove` event. The circle is drawn with SVG elements, and ReactDOM renders the component into the `#root` div. No external data is loaded; the visualization simply shows real-time positional state changes.

Let's Make a Face Part VI (Compartmentalizing Complexity)

A yellow face with black outlines, black eyes, and an arched mouth is drawn as a reusable React component composed of smaller subcomponents. The code structures the visualization by splitting the face into separate modules for the background circle, eyes, mouth, and an SVG container. It uses `d3.arc` to generate the mouth path and React fragments to group the eyes without extra DOM nodes. The final composition is rendered via `ReactDOM.render` into an SVG.

Let's Make a Face Part V multiple files with ES6 modules

A React application renders a smiley face using modular ES6 components and D3. It shows a yellow circle background with black stroke, two eyes positioned symmetrically, and a curved mouth drawn with a D3 arc generator. The face is centered via SVG transforms, and the react app mounts to a DOM root using ReactDOM. The components receive numeric props for dimensions, demonstrating reusable SVG elements with D3-shape paths.

Let's Make a Face Part III (React & D3)

This example creates an interactive smiley face that fills the browser window, with the face centered and scaled to the viewport dimensions. The visualization is rendered as an SVG using React for component structure and D3 v5’s `arc` API to generate the mouth path. The code imports both React and ReactDOM, defines a custom `BackgroundCircle` component, and positions the eyes and mouth using computed center coordinates and offset values. The mouth is drawn with `arc()` using inner and outer radii plus start and end angles, while the face’s radius is derived from the window height and stroke width.

Let's Make a Face Part II (React)

A React component renders a yellow smiley face in SVG, with a circular face and two black eyes positioned symmetrically around the center. The code defines numeric constants for dimensions, offsets, and radii, then uses ReactDOM to mount the `App` component into the DOM. React 16.9 and ReactDOM are loaded via UMD builds, and the visualization updates declaratively through JSX.

Let's Make a Face Part I

Three hand-drawn-style black circles on a yellow SVG face—two blank eyes and an unfinished mouth—suggest the start of a modular facial construction. The page relies solely on raw SVG elements, defining circles with explicit `cx`, `cy`, `r`, and `stroke` attributes within a 960×500 viewport, with no JavaScript or external libraries. The static composition emphasizes geometric primitives and outlines a playful, step-by-step approach to building a character.