Patrick Hebner

@hetec·6 public vizzes

Fork of Polished World Map

This example shows a polished world map with country boundaries, graticules, and a highlighted sphere background. It uses d3.geoNaturalEarth1 and d3.geoPath to project GeoJSON features from the World Atlas TopoJSON dataset, with React rendering the SVG marks. The code explicitly separates land features, interior borders via topojson.mesh, and graticules using d3.geoGraticule, styled through CSS classes for a clean, muted color palette.

Nov 11, 2022

Loading thumbnail…

React Follow Circle

A React component renders an SVG circle at the center of a 960×500 canvas, with a mouse-move handler logging cursor coordinates to the console. The example uses React 17 and D3 v7 for utility functions like `range` and `arc`, with SVG for vector graphics output. A separate Mouth component builds a semi-circular arc path using D3's `arc()` generator, though it is not integrated into the main App. The visualization demonstrates basic event handling and coordinate tracking in a React-D3 hybrid setup.

Sep 19, 2022

Loading thumbnail…

Loading and parsing csv

This example demonstrates loading and parsing a CSV file from a remote URL. The code fetches the raw text data using the `fetch` API and then passes it to the `text()` method, displaying the resulting string in the browser console. The page displays the title "Loading and parsing csv" in large text via custom CSS. The CSV source is a GitHub gist containing CSS named colors. The example uses standard JavaScript async/await syntax and basic DOM styling to illustrate the initial steps of fetching and inspecting CSV data for subsequent visualization.

Sep 19, 2022

Loading thumbnail…

Line Chart

This example presents a static HTML page displaying the message “Hello HTML!” in large, centered text. The visualization does not contain any data or charting logic; instead, it demonstrates a minimal setup for a web-based graphics project. The code includes a basic CSS style rule for the message class and a single HTML div element. No data source or rendering library is used; the page relies solely on standard HTML and CSS for its presentation.

Mar 2, 2022

Loading thumbnail…

Fork of Make a Face Part II

Fifteen yellow cartoon faces render in a grid, each assembled from React components that layer a background circle, two eyes, and a d3 arc-based mouth. The faces vary randomly in eye radius and mouth radius, while the eye offset, mouth position, stroke width, and background color remain constant. The code uses d3.range to generate the faces, d3.arc for the mouth path, and React’s StrictMode with SVG rendering.

Mar 2, 2022

Loading thumbnail…

Make a Face Part I

A static SVG face built from three circles: a large yellow head with a black outline and two smaller unfilled circles for eyes. The code defines the SVG canvas directly in HTML, positioning the head at the center of a 960 by 500 viewport and placing the eyes symmetrically on either side. The rendering relies on raw SVG circle elements with explicit coordinates and stroke properties. The example demonstrates basic geometric composition and styling within an inline HTML document.

Feb 9, 2022