martfhill

React Starter With d3

This example demonstrates a minimal React application that loads a CSV dataset and displays its size in kilobytes, row count, and column count. The code uses React hooks (useState and useEffect) to fetch data asynchronously via d3.csv from a remote URL, then formats the result using d3.csvFormat. The interface is intentionally simple: the output renders as large, plain text inside a pre element. This serves as a starter template for integrating d3 data loading and parsing workflows within a React component structure.

Fork of Daily temperature in Belgium between 2017 and 2021

This fork visualizes daily average air temperatures in Belgium from late 2017 to late 2021 as a smooth line chart. The SVG rendering uses React with D3 v7, employing `scaleTime` and `scaleLinear` for axes, `line()` with `curveNatural` for the path, and data fetched via D3’s `csv` from a Gist. A pale gray grid and labeled axes frame the temporal trend.

Fork of Vega-Lite API Template

This visualization displays daily average air temperatures in Belgium from 2017 to 2021 as a smooth line chart, using a bright magenta color scheme for high contrast against a dark background. It is built with the Vega-Lite API, which compiles specifications into Vega and renders via SVG, while D3.js loads the CSV data from a GitHub gist. The visualization configures custom axis styles and tooltips through vega-tooltip to show temperature readings on hover.

Fetch CSV DATA

This example demonstrates loading a remote CSV file with D3 and displaying basic dataset metrics—file size in kilobytes, row count, and column count—in large, styled text. The visualization relies on `d3.csv` from d3-fetch to parse the data, then uses `d3.csvFormat` to measure the formatted output length and accesses `data.length` and `data.columns` for row and column tallies. The result updates a `<pre>` element via React’s production build, though the core data fetching and parsing use D3 v4 and v7 APIs alongside native `fetch` in commented alternatives.

Fork of d3 csv

This example renders a cartoon face with randomized facial features, including eyes, a mouth, and a yellow background circle, centered inside an SVG canvas. The face is built from React components that compose SVG elements, with dimensions and offsets generated randomly in `utils.js`. The mouth shape is drawn using d3’s `arc` generator, while the face container applies a translation transform to center the group. The app imports a CSV dataset from a GitHub gist using `d3.csv`, though the data is not used in the visualization.

Fork of Fork of d3 CSV

Nine cartoon faces render in a three-by-three grid, each drawn as a yellow SVG circle with black stroke, two eyes, and an arc-based mouth. The React components compose the faces from separate `BackgroundCircle`, `Eye`, and `Mouth` elements, while `d3.arc` generates the mouth path. Random values from `utils.js` determine stroke width, eye offset, eye radius, and mouth dimensions, giving each face slightly different proportions. The `FaceContainer` translates the SVG group to center each face within a 300 by 300 viewport.

Fork of d3 CSV

This example displays a 3x3 grid of cartoon faces, each with randomized facial features, rendered as SVG circles, eyes, and mouths. Built with React and D3, it uses `d3.arc` to generate mouth paths and `d3.range` to create the grid array. The face geometry—including eye offsets, radii, and stroke width—varies per render due to random values from a shared `utils.js` module. The `FaceContainer` component applies a centered translation to position each face within its SVG canvas.

d3 Data useState

This example demonstrates a React component that fetches a CSV file from a GitHub gist using D3's `csv` function, stores the resulting data in React state via `useState`, and then displays the raw data as large text in the browser. The visualization shows the parsed CSV data rendered directly as a string, with the code initiating the fetch within the component body and updating the state asynchronously. It uses React 17, D3 v7, and ReactDOM to render the `<App />` component into the HTML root element.

Mouse Follower

A mouse follower demonstrates real-time pointer tracking within an SVG canvas using React state. As the user moves the mouse over the 800×800 viewport, a circle smoothly repositions itself to match the cursor’s x and y coordinates. The component uses React’s `useState` hook to store the mouse position and `useCallback` to handle the `onMouseMove` event efficiently. While the code includes D3 v7 as a dependency, the interaction itself relies purely on React’s event handling system, not on D3-specific visualization APIs.

Fork of Fork of Smiley Face Part II

A cartoon smiley face with large, detailed eyes and a wide smiling mouth is rendered on a yellow circular head. The entire SVG is composed using React components, with the face, eyes, and smile defined in separate files and assembled in the main `App` component. React 16.9 and ReactDOM render the SVG elements, which are transformed and scaled using SVG `g` tags and CSS classes for styling.

Fork of homework smiley face

This example renders a large smiley face as an SVG graphic using React and D3 v7. It shows a circular face with eyes, pupils, eyebrows, ears, and a curved mouth, all composed of basic SVG shapes. The code imports the `arc` function from D3 to generate the mouth path, while all other elements use React JSX syntax with fixed coordinates. The visualization is fully static, with dimensions set to 960x500 and centered via SVG transforms.