mjglsn

@mjglsn·6 public vizzes

Fork of HTML Starter

This example renders a stylized smiley face using React and D3.js, drawing a yellow circle for the head, two black circles for eyes, and an arc for the mouth. The visualization is created with SVG elements, where the mouth is generated using the D3 `arc` function with specified inner and outer radii and start/end angles. The React component positions all shapes relative to the center of the 960x500 canvas using SVG transforms.

Apr 9, 2021

Loading thumbnail…

Fork of D3 Starter

This example shows how to begin building a simple SVG visualization with D3 version 6, rendering a yellow circle as a face with two black eyes and a half-circle mouth. The code uses the `select` and `arc` functions from D3, explicitly setting attributes like radius, position, fill, and stroke on SVG circle elements. Drawing coordinates are computed from the SVG’s width and height attributes, and the mouth is generated as a path using a D3 arc generator with defined inner and outer radii. The visualization demonstrates basic composition and styling with D3’s SVG manipulation.

Apr 8, 2021

Loading thumbnail…

Face Fork of Fork of HTML Starter

This example displays a blank SVG canvas with a minimal HTML page setup, logging both the loaded D3 library and a simple "Hello JavaScript!" message to the browser console. It uses D3 v3 loaded from an unpkg CDN link, alongside standard HTML and CSS, with React as the declared framework. The visualization itself contains no rendered data or shapes, serving primarily as a starter template for testing environment configuration and console output.

Apr 8, 2021

Loading thumbnail…

Fork of D3 Starter

This bare-bones starter demonstrates the minimal setup required to begin scripting with D3 version 6. The page simply renders the text “Hello D3 version 6” in the body of an HTML document, using a single call to `select('body').text(...)`. The code imports the `select` function directly from the `d3` module, loads the library via a CDN script tag, and relies on an external `bundle.js` for execution. It serves as a clean template for adding future visualization code.

Apr 7, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shape rendering on an HTML page, using a React framework setup. It shows circles, rectangles, lines, and a path that scale together inside a grouped `<g>` element with a 1.5x transform. The code uses raw SVG markup with attributes like `fill`, `stroke`, and `stroke-width`, along with CSS for styling. A JavaScript `console.log` call runs in the browser's developer tools, confirming script execution alongside the static vector graphics.

Apr 6, 2021

Loading thumbnail…

HTML Baseball Report

This example displays a simple baseball report as a red, large-font HTML page listing three player names, including Mike Trout and Shohei Otani. The page is built with static HTML and CSS, while a separate JavaScript file uses `select` from the D3 library to set the text content of a `#message` div. The code imports the D3 module from UNPKG and also imports a local ES6 module, `myMessage.js`, which exports a short string. The styling and content are rendered entirely by the browser without any data processing or dynamic visualization.

Apr 6, 2021