rayking99

menus

A simple pet selector uses two HTML dropdown menus to choose an animal from a fixed list of six options. The React component manages the selected value with the `useState` hook, and the `Dropdown` component renders a native `<select>` element. The example demonstrates a basic React-D3 integration by rendering the menus with D3’s layout engine while relying on standard React event handling for user interaction. No data is loaded externally; the options are hardcoded in the source.

Jun 11, 2021

Line Chart + Time

This example displays a world map using a natural Earth projection, with landmasses filled in teal and country borders drawn as interior mesh lines. The visualization loads GeoJSON topology data from the World Atlas TopoJSON file, then processes it with topojson feature and mesh functions. Using D3's geoNaturalEarth1 projection and geoPath, the map renders graticules and sphere outlines for context. The React-based application asynchronously fetches and transforms the geographic data through a custom useData hook, with styling applied through SVG classes.

Jun 11, 2021

Working With Time

This example shows a scatter plot of temperature readings over the course of a week, using a time-based x-axis and a linear y-axis for temperature. The data is loaded from a CSV file containing timestamps and temperatures for San Francisco, fetched via the `csv` function from `d3`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to SVG coordinates, with React components rendering the axes and circular marks. Each point includes a tooltip showing the corresponding day of the week, generated with `d3.timeFormat`.

Stylised ScatterPlot

This stylized scatterplot visualizes the Iris dataset, plotting petal width against sepal width. Each flower observation is represented by a teal circle with a tooltip showing its petal width value. The visualization uses React components to render SVG elements, with D3 scaleLinear functions handling the x and y axis scaling. The code implements custom AxisBottom and AxisLeft components for tick marks, and axis labels are positioned using SVG transforms. The chart includes axis tick formatting using D3's format function to display numbers in a compact notation.

Axes With React and D3 UNPOP

This visualization displays the population of ten countries in 2020 as horizontal bars, with a linear x-scale for population and a band scale for country names. Built with React and D3 v6, the code defines custom axis components (`AxisBottom`, `AxisLeft`) that render SVG ticks and labels, while `Marks` generates rectangles with tooltips. It fetches UN population data from a CSV file, formats axis ticks using D3’s `format` function (replacing 'G' with 'B' for billions), and applies custom CSS styling for fonts and color.

MarginConvUNPop

This example displays a horizontal bar chart of the top ten countries by population for 2020, using data from the UN Population 2019 dataset. The chart renders as SVG via React, with D3 v6 functions `scaleBand`, `scaleLinear`, `max`, and `csv` handling data loading and scaling. The code applies margins to the SVG layout and maps each country’s population to bar widths.

UNPop

This bar chart displays the top 10 countries by population for 2020, sourced from a UN population CSV. The visualization uses React to manage state and render an SVG, while D3 v6 handles data fetching via `csv()`, scaling with `scaleBand` and `scaleLinear`, and the `max` aggregation. Each country’s population is mapped to a rect’s width, with countries positioned along the y-axis. The chart highlights population magnitudes through horizontal bars, relying on D3’s declarative API for layout and React for component lifecycle.

Rendering data with react: pie

A pie chart displays the colors from the CSS color names dataset, with each slice representing a color category. The chart is rendered as an SVG using React and D3, where the `d3.pie` function computes the arc angles and `d3.arc` constructs the path for each slice. The data is loaded asynchronously from a CSV file via `d3.csv`. The code maps each data row to a pie slice, filling it with the corresponding hex value from the dataset.

rendering data with react: pie

This example renders a pie chart from a CSV file of CSS color names and their RGB hex values. The React component loads the data with d3.csv, then maps each row to a thin horizontal div whose background color matches the hex value. The visualization presents the color palette as stacked stripes, with a loading message displayed until the data arrives. It uses React hooks (useState, useEffect) and ReactDOM for rendering.

Data D3 Loader

This example demonstrates progressive loading of a remote CSV dataset by displaying its metadata. It shows the file size in kilobytes, row count, and column count derived from a CSS color palette dataset hosted as a GitHub gist. The visualization uses React hooks (`useState`, `useEffect`) to fetch and asynchronously load the data with D3’s `csv` method, then formats and displays the computed statistics in a styled `<pre>` element. The rendering is purely SVG-free text output, with D3’s `csvFormat` used to calculate string length for the size measurement.

mouse follower

A circle follows the mouse position inside an SVG canvas, updating its center coordinates in real time as the pointer moves. The React component uses the `useState` hook to track the mouse's `clientX` and `clientY` values, which are set through an `onMouseMove` event handler on the SVG element. The circle's radius is fixed at 30 pixels, and its position is rendered directly as SVG `cx` and `cy` attributes. The example demonstrates state-driven rendering with React 17 and DOM event handling without external data sources.

loadparse

This example demonstrates a minimal workflow for fetching and inspecting a remote CSV file in the browser. It uses the native JavaScript `fetch` API to request CSS color name data from a GitHub gist, then logs the raw `Response` object to the console. The page contains only a script tag with no rendering or parsing logic, highlighting the initial step of data loading and the structure of a fetch response. No additional libraries or frameworks are used beyond plain JavaScript.

Hello HTML

A grid of 690 randomly generated smiley faces fills the viewport, each rendered as an SVG composition of a yellow circle, two eyes, and a curved mouth. The example demonstrates React component composition, where each face is built from reusable components for the background, eyes, mouth, and container. It uses the D3.js arc generator to construct mouth paths and ReactDOM to render the array of faces, with randomized stroke widths, eye offsets, eye radii, and mouth dimensions creating variation across the grid.

Smiley Face Part I

This example displays a single yellow circle with a black outline centered in an SVG canvas, forming the base for a smiley face. The React component renders the circle using SVG primitives, with hardcoded attributes for position, radius, and stroke. ReactDOM mounts the component to the root div, while the page loads React and ReactDOM from CDN links. The visualization demonstrates fundamental SVG shape rendering within a React framework, with the circle dimensions computed relative to the image height and stroke width as noted in the HTML comments.