jakers19

@jakers19·5 public vizzes

Smiley Face - Part 1

Rendered as an SVG canvas with React, the smiley face consists of a yellow circle outlined in black, two concentric-ring eyes, and a thick arc mouth. The drawing is centered via SVG transformations, with all geometric parameters defined as constants. The piece uses D3's `arc` generator to construct the mouth path, while ReactDOM handles declarative SVG element creation, resulting in a static, vector-based illustration.

Aug 11, 2020

Loading thumbnail…

SMiley Face Part 1

A yellow circle rendered as a smiley face appears centered in a 960 by 500 SVG canvas, with a black stroke outline. The drawing displays a single circular shape without facial features, representing the first part of a multi-step visualization. Built with React, the code defines a functional component that returns SVG elements, using ReactDOM to render the app into the page's root element. The circle's radius and position are calculated from the canvas dimensions, and the stroke width is set to 10 pixels.

Aug 11, 2020

Loading thumbnail…

Smiley Face - Part 1

This example renders a static smiley face using React and D3’s arc generator. A large yellow circle forms the head, with two dark eye circles, pink blush ovals, and a mouth drawn as an arc path centered on the display. The code positions all elements via SVG circle and path tags, using React to manage the component structure and d3.arc with explicit start and end angles to define the mouth’s shape. Fixed coordinates and dimensions hard-code the layout without any interaction or data updates.

Feb 14, 2020

Loading thumbnail…

Locations of Datavis 2020 Students First Pass

This map shows the global distribution of students who joined Datavis 2020 during its first few days, with each location represented by a green circle. The data was manually compiled from student introductions in the Slack channel and geocoded using Google. The visualization uses React with D3’s `geoNaturalEarth1` projection and `geoPath` to render SVG landmasses, graticules, and sphere. Circles are positioned by projecting latitude and longitude coordinates, with country and state locations approximated at their centroids.

Jan 7, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a plain webpage using a bare minimum HTML document. It uses inline CSS within the `<style>` tag to set the body’s text alignment and a large font size of 13em. No external libraries, JavaScript, or data sources are involved; the rendering approach relies entirely on static HTML and CSS for a minimal starter template.

Jan 6, 2020