illus0r

@illus0r·8 public vizzes

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML!” centered with a large font size, while running a JavaScript computation in the background. The code uses the Quaternion.js library to create a quaternion from the string `"99.3+8i"`, then performs multiplication, division, and subtraction operations with other quaternions, logging the resulting value to the console. Styling is handled through basic CSS within the HTML file, and the JavaScript logic is loaded from a separate `index.js` file.

Mar 20, 2022

Loading thumbnail…

Untitled

A choropleth map of the United States visualizes state-level data from a CSV file, with each state filled according to a linear color scale (yellow to red) based on the `prem_an` attribute. The map also plots doughnut markers at state centroids, showing state abbreviations, and includes a partially commented-out section for city locations with circle sizes proportional to years lived. Built with D3 v3, the code uses `d3.geo.albersUsa()`, `d3.geo.path()`, and SVG paths rendered from GeoJSON, merging CSV attributes into the map's feature properties before binding data to the paths.

Feb 6, 2020

Loading thumbnail…

Untitled

This example displays a map of the United States, including Alaska, Hawaii, and Puerto Rico, using a custom composite projection defined in `albers-usa-pr.js`. The code builds on `d3.geoAlbers` and `d3.geoConicEqualArea` to create `d3.geoAlbersUsaPr`, which is then used with `d3.geoPath` to render state boundaries from TopoJSON data in `states.js`. SVG paths are generated for each state, filled gray with white strokes.

Feb 5, 2020

Loading thumbnail…

Let's Make a Face Part I

A static yellow smiley face rendered as SVG, with a black outlined circle for the head and two smaller unfilled circles for the eyes, appears against a blank viewport. The example uses React to structure the SVG elements directly in JSX, with hard-coded coordinates and dimensions for a 960×500 canvas. The code includes a separate React app that logs the React object and renders a simple heading, while the face is drawn in the HTML file using inline SVG tags. The rendering approach relies on basic SVG primitives without dynamic data or interaction.

Feb 5, 2020

Loading thumbnail…

Smiley Face Part II (fork)

This example shows a smiley face with three teeth rendered in an SVG canvas using React and D3.js. The face consists of a silver circle with a black stroke, two eyes, and an open mouth drawn as a D3 arc path. The teeth are created by a React component function, which is reused three times with different rotation values. The code loads state data from a CSV file, though the data is not used in the visualization itself. React manages the SVG elements, while D3 provides the arc generator for the mouth shape.

Feb 4, 2020

Loading thumbnail…

Smiley Face Part II

This example shows a stylized smiley face drawn with SVG shapes. It uses React to render the face, building a silver circle head with a black stroke, two dark eyes, a curved mouth generated by `d3.arc()`, and ten white rectangular teeth positioned around the mouth using rotation transforms. All facial elements are centered within the SVG, with constants defining sizes and offsets for the head, eyes, mouth, and teeth. The code combines React components with D3’s arc utility to produce the static visualization.

Jan 30, 2020

Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face drawn with two black eyes and a yellow circular head, centered on a 960 by 500 SVG canvas. The visualization is built with React and rendered through SVG elements, using hardcoded coordinates and radii for the head, eyes, and mouth. The code relies on React’s `ReactDOM.render` method to inject the SVG into the DOM, with all graphical properties defined declaratively in the JSX. The face is composed of a large circle for the head and two smaller circles for the eyes, all positioned relative to the center.

Jan 30, 2020

Loading thumbnail…

Let's Make a Face Part I

This visualization shows a partial construction of a smiley face using three SVG circles: a large yellow outer circle with a black border, and two smaller solid black circles for eyes. It is an intermediate step toward the full face, lacking a mouth. The code embeds the circles directly in an HTML file using inline SVG elements with absolute coordinates. The layout is calculated with explicit `cx`, `cy`, and `r` attributes, positioning the eyes symmetrically around the center of the face, and the page is set to full-bleed with hidden overflow.

Jan 24, 2020