jonasveenhues

@jonasveenhues·10 public vizzes

Loading Data with React

This example demonstrates how to load and display a CSV dataset within a React application using the D3.js `csv` function. The interface shows a loading message before presenting the data’s size in kilobytes, row count, and column count. React hooks like `useState` and `useEffect` manage the asynchronous data fetching, while `ReactDOM.render` mounts the component. The visualization relies on the built-in browser window dimensions and the React and D3 libraries from CDN links.

May 20, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors CSV data from a GitHub gist, displaying summary statistics about the dataset as large text on a blank page. The code uses the D3 v5 `d3.csv` method with a promise to fetch the remote CSV file, then computes and reports the formatted data size in kilobytes, the total row count, and the number of columns. The resulting message is rendered into a `<pre>` element using the DOM API `textContent`.

May 20, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face whose single eye follows the mouse cursor across the screen, with the circle’s position updating in real time. Built with React, it uses the `useState` and `useCallback` hooks to track mouse coordinates and re-render an SVG `<circle>` element. The SVG’s `onMouseMove` event handler triggers state updates, and ReactDOM renders the component into the root div. The visualization uses a fixed viewport matching the browser window and demonstrates interactive pointer tracking in a minimal, responsive setup.

Apr 29, 2022

Loading thumbnail…

Fork of Smiley Face Part V

A grid of React-generated smiley faces, each rendered as an SVG, demonstrates component modularity and randomization. The code assembles faces from separate components for the background, eyes, and mouth, using D3's `arc` to draw the mouth path. Each face applies random multipliers to the eye and mouth widths, creating visual variety across the array. The example showcases ES6 module splitting and React Fragments for grouping SVG elements without extra wrapper nodes.

Apr 29, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

This example is a React component that renders a classic smiley face using SVG. It shows a yellow circle with a black outline, two solid black eyes, and a curved mouth drawn as an arc. The code imports the `arc` function from d3 to create the mouth’s path, while React composes SVG elements like `<circle>` and `<path>`. The face is centered in a 960 by 500 viewport, with the background circle’s radius and stroke width defined in the component. D3 v5 handles the geometric arc, while React renders the static result without interaction.

Apr 29, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A forked smiley face visualization built with React and D3 v5 renders a yellow circular face with black outlines, two offset eyes, and a curved mouth as SVG elements. The code defines reusable React components for the background circle, eyes, and mouth, with the latter using D3's `arc` generator to create the mouth path based on inner/outer radii and start/end angles. Static numeric constants position the facial features relative to the SVG center, and the composition is rendered declaratively through `ReactDOM.render`.

Apr 25, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

Apr 25, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This fork renders a yellow smiley face that scales to fill the browser window, using React to structure the SVG output and D3 to compute its mouth shape. The face is composed of a large yellow circle with a black stroke, two small eye circles, and a curved path generated by the d3.arc() API. All elements are positioned relative to the viewport center, with dimensions derived from window.innerWidth and window.innerHeight so the graphic remains responsive.

Apr 25, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This interactive visualization displays a simple smiley face rendered with scalable vector graphics. The face consists of a yellow circle with a black outline, two smaller circles serving as eyes, and a central representation of a face. The code uses React to structure the SVG elements, with ReactDOM to render the component tree into the web page. The drawing dimensions adapt to the browser window size, positioning the face at the center and eye circles offset horizontally and vertically from the center. The example demonstrates basic geometric shapes and proportional sizing within a JavaScript-driven SVG canvas.

Apr 8, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal SVG visualization renders a yellow circle with a thick black outline, accompanied by two smaller black circles positioned as eyes. The page uses raw SVG elements—`<circle>` and `<svg>`—defined directly in the HTML, with no JavaScript or external libraries. The styling is handled inline via CSS, setting the body margin to zero and hiding overflow for a clean, full-frame presentation. The code is a static, hand-coded drawing rather than a data-driven chart, serving as a basic demonstration of SVG shapes and attributes in an HTML document.

Apr 8, 2022