Erik

Axis w react and D3

This example shows a horizontal bar chart of population data for the top four countries from the UN Population 2019 dataset, rendered as SVG using React. The chart includes a linear x-axis with tick marks and labels generated by extracting ticks from `d3.scaleLinear` via `xScale.ticks()`, and uses `d3.scaleBand` for the categorical y-axis. Bars are drawn as `<rect>` elements, with widths proportional to population values, while axis lines and text are positioned using D3’s scale outputs within React components.

Margin convention

This example demonstrates the D3 margin convention by rendering a simple bar chart of UN population data for 2020. A React component uses `useState` and `useEffect` to load and parse the CSV, then renders an SVG with scaled rectangles via `scaleBand` and `scaleLinear`. The chart translates a group element by the specified margins, leaving the visualization area clear of axes or labels. Only the first four countries are displayed, with bars sized proportionally to their populations.

Bar Chart w React and D3

A bar chart displays United Nations population data for the top four countries by 2020 estimates. The graphic uses React’s `useState` and `useEffect` hooks to asynchronously fetch and parse a CSV via `d3.csv`, then renders SVG `<rect>` elements whose widths are scaled by `d3.scaleLinear` and vertical positions by `d3.scaleBand`. The horizontal bars are plotted against a fixed 960×500 viewport, with countries arranged from top to bottom in data order.

Fork of Smiley Face Part II W Mouth

This example shows a smiley face rendered with SVG, featuring a yellow circle head, black stroke outline, two eyes, and a curved mouth. The code uses React components to structure the SVG elements and D3’s `arc` API to generate the mouth path. Positioning uses fixed pixel coordinates for the face center, eyes, and mouth radius. The rendering approach leverages ReactDOM to mount the SVG into the DOM, with the mouth drawn via D3’s arc generator using specified start and end angles.

Rendering Data w React and D3

A pie chart renders all 148 CSS named colors as equal slices, creating a full circle of hues. The visualization uses React’s `useState` and `useEffect` hooks to fetch and store data from a CSV file via `d3.csv`, then maps the data to SVG `<path>` elements. D3’s `pie` and `arc` functions generate the angular geometry, with each slice’s fill set to its corresponding RGB hex value from the dataset.

CSV Parse etc

This example fetches a CSV file containing CSS named colors and displays a summary of its contents, including file size, row count, and column count, in large text on a web page. It uses the Fetch API to retrieve the text, then `d3.csvParse` to parse the data into an array of objects. The code accesses `data.length` and `data.columns` to compute the statistics, and writes the result to a `<pre>` element via `document.getElementById`. The page loads D3 v5 from a CDN.

Ny Följare

A yellow face with black-outlined circular head, offset eyes, and a curved mouth is drawn using React components. The SVG rendering is composed of modular `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components within a `FaceContainer` that centers the drawing. The mouth shape is generated using the `arc()` API from D3 v7. No external data source is used; the face’s dimensions and positions are passed as fixed props from the top-level `index.js` file.

Följare

This example is a minimal HTML page titled "Följare" that, based on its structure, appears to be a placeholder for a data visualization. The page contains no visible JavaScript, CSS, or external libraries, and the body is entirely empty. It does not render any charts, graphs, or interactive elements, nor does it load any data. The only functional aspect is the browser displaying the title in the tab or window. The code uses no specific visualization libraries or APIs, such as D3.js, Canvas, or WebGL, and there is no rendering or data-processing logic present.

Fork of Hello HTML

This D3.js v7 and React example renders a simple cartoon face built from SVG circles and an arc-based mouth. The `Face` component composes smaller components—`BackgroundCircle`, `Eyes`, and `Mouth`—inside a `FaceContainer` that translates the coordinate system to the center of the 960×500 viewport. The mouth shape is generated using D3’s `arc` API, which defines inner and outer radii and angular range. The code demonstrates component-based composition and parameterized positioning with props, though it does not show any underlying data source or interactive behavior.

Mouse Follower

A red circle follows the mouse cursor across an SVG canvas, updating its position in real time as the user moves. Built with React and D3 v5, the app uses React’s `useState` and `useCallback` hooks to track mouse coordinates via the SVG `onMouseMove` event, then re-renders the circle’s `cx` and `cy` attributes accordingly. No data source is involved; the visualization simply demonstrates interactive event handling and state-driven rendering with SVG.

Sep 8, 2021

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7, displaying the dataset's size in kilobytes, row count, and column count. It fetches a CSV file of CSS named colors from a GitHub gist via `d3.csv`, then formats the data with `d3.csvFormat` to calculate its size. The results are rendered as text in a large `<pre>` element, with commented-out alternative code showing `fetch` combined with `d3.csvParse`.

Sep 8, 2021

Gaffel of Hello HTML

A stylized face built from reusable React components uses D3’s `arc()` generator to create the mouth and brow shapes, while SVG circles form the eyes and background. The face, centered via a translated `<g>` group, draws its brow as an arc with controlled angle length and width, and its mouth as a semicircular arc. D3 v7 and React 17 render everything as SVG, with the face’s proportions parameterized through props like `eyeOffsetX`, `mouthRadius`, and `browY`.

Sep 2, 2021