C

Cees Klap

@cees1911·16 public vizzes

Loading thumbnail…

Menus with React

This example demonstrates interactive dropdown menus built with React. It shows a pet-selection interface with six options, where the chosen value is logged to the console and reflected in the selected option. The code uses React’s `useState` hook to manage the selected value and a reusable `Dropdown` component that renders a native HTML `<select>` element. React’s `onChange` event handler updates the state, while the component receives `options`, an `id`, and callbacks as props. The example runs in a browser using the React and ReactDOM UMD builds via unpkg.

Loading thumbnail…

World Map

This interactive world map visualizes global landmasses and country borders using a natural Earth projection. The visualization renders a sphere, graticule grid, land areas in teal, and interior boundaries in a lighter teal stroke. Built with React and D3 v5, it uses the `geoNaturalEarth1` and `geoPath` APIs to project and draw geographic features, while TopoJSON converts the world-atlas dataset into GeoJSON features and meshes. Styling is applied via CSS classes on SVG path elements.

Loading thumbnail…

Bar chart

This bar chart displays the populations of ten countries in 2020, sourced from UN population data, using horizontal bars where length encodes magnitude and a title tooltip reveals exact values. Built with React and D3 v5, it uses `scaleBand` for categorical y-axis positioning and `scaleLinear` for quantitative x-axis scaling, with axes rendered as SVG elements and a `.replace('G', 'B')` format to show billions.

Loading thumbnail…

rendering date with reaxt & d3

This example visualizes CSS named colors as a radial burst of pie slices, with each slice filled by its corresponding color value. It loads data from a CSV file using `d3.csv`, applies `d3.pie` to compute the arc angles, and renders each slice as an SVG `<path>` via `d3.arc`. React manages the component state with `useState` and `useEffect`, triggering the data fetch and re-rendering once the data arrives.

Loading thumbnail…

rendering date with reaxt & d3

A radial burst chart displays CSS named colors as slices of a circle, using data loaded from a CSV file via D3's `csv` utility. Each color's hex value from the dataset is directly applied as the fill for its corresponding path, which is generated by D3's `pie` and `arc` functions. React manages the component state and renders the SVG elements, with the `useEffect` hook triggering the data fetch and `ReactDOM.render` mounting the application. The visualization showcases the full spectrum of named colors arranged around a central point.

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of auto-mpg data, mapping miles per gallon against horsepower, with color encoding for country of origin and point size for vehicle weight. Tooltips reveal car names on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite specifications programmatically, with data loaded via d3.csv from the UCI Machine Learning Repository. It renders as an SVG through Vega, with a custom configuration for axis styling and tooltip interactions.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car model as a circle positioned by fuel efficiency (mpg) and horsepower, with color encoding the country of origin and size representing vehicle weight. The visualization is constructed programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render SVG. Data is fetched asynchronously via d3.csv, and the tooltip feature from Vega-Tooltip is attached to show car names when hovering.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3’s `d3.csv` method, displaying summary statistics about the dataset in a large `<pre>` element. It fetches a remote CSV of CSS named colors from a GitHub gist, then reports the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to fetch and parse the data, `d3.csvFormat` to measure the formatted output, and `d3.csv`’s built-in promise handling to access the parsed array and its columns property.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3’s `d3.csv` method, displaying summary statistics about the dataset in a large `<pre>` element. It fetches a remote CSV of CSS named colors from a GitHub gist, then reports the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to fetch and parse the data, `d3.csvFormat` to measure the formatted output, and `d3.csv`’s built-in promise handling to access the parsed array and its columns property.

Loading thumbnail…

Fork of follow the mouse

A smiley face drawn with SVG circles follows the mouse cursor across a full-screen canvas. Built with React, the component tracks pointer movement through an `onMouseMove` handler and updates the circle's `cx` and `cy` coordinates via the `useState` and `useCallback` hooks. The rendering uses React DOM to mount an SVG element sized to the browser window, with the cursor position stored as state. A commented-out static smiley face suggests the interactive version replaces a fixed layout.

Loading thumbnail…

follow the mouse

A React SVG renders a single black circle that follows the mouse cursor across the full browser window. The component tracks pointer position via the `onMouseMove` event, storing coordinates in state with `useState` and updating them through `useCallback`. The circle's `cx` and `cy` attributes are bound to the current mouse coordinates, redrawing on every move. This example demonstrates real-time interaction between user input and SVG elements using React's declarative rendering.

Loading thumbnail…

loading csv data

This example demonstrates how to load and inspect a CSV file in the browser. It fetches a remote CSV file containing CSS named colors from a GitHub gist, then logs the raw text content to the browser’s console. The code uses the Fetch API’s `fetch()` method and the async/await pattern via a custom `fetchText` function, which calls `response.text()` to extract the data. No external libraries or charting libraries are used, and no visualization is rendered on the page.

Loading thumbnail…

cjk smile face

A grid of eighteen randomly generated smiley faces fills the screen, each rendered as an SVG circle with red fill, black stroke, two eyes, and an arc-shaped mouth. The code builds each face from modular React components and uses the D3 `arc` generator to create the mouth path. Random values for stroke width, eye size and offset, and mouth dimensions give every face a slightly different expression.

Loading thumbnail…

Fork of Smiley Face Part V

A grid of 18 randomly generated smiley faces renders in SVG via React components, each with varied stroke widths, eye offsets, eye radii, and mouth dimensions produced by Math.random(). The visualization demonstrates modular React component composition across files, using ES6 imports and React Fragments to assemble facial features. D3’s arc() API generates the mouth path for each face, while the ReactDOM render and range() from d3 populate the array of faces.

Loading thumbnail…

Fork of Let's Make a Face Part III

This example builds a stylized smiley face from a yellow circle, two eyes, and a curved mouth, all rendered as SVG shapes. React component files organize the face parts, while D3’s `arc` function generates the mouth’s path. The face is centered using an SVG transform, with the background circle’s radius calculated from the viewport height and stroke width. The code uses React to manage the SVG elements and hardcoded numeric constants for positions, sizes, and stroke properties, producing an abstract facial composition.

Loading thumbnail…

Let's Make a Face Part I

This example renders a simple face using three SVG circles: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes. The markup is hand-coded directly in the HTML file, with inline attributes for positioning (cx, cy) and radius (r). It uses no external JavaScript libraries, only plain HTML and CSS. The face is centered on a 960 by 500 pixel canvas, with the eyes placed symmetrically around the center point.