Emily Xie

@emilyxxie·3 public vizzes

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Practice: Make a face with D3.js!” centered on the screen. The page uses plain HTML with embedded CSS in a `<style>` tag to set the body font size to 10em and center the text. It serves as a bare-bones starter template, with no JavaScript or external libraries included. The rendering relies solely on the browser’s default HTML and CSS handling, providing a blank canvas for users to add their own D3.js code.

Jan 13, 2020

Loading thumbnail…

React Starter

This example displays a large, centered text message reading “Make a face with D3.js” inside an HTML page, using React’s component model to render the message into a designated `div` element. The page includes an empty SVG canvas and loads the React and React-DOM libraries via unpkg, while the React component is defined and rendered through `ReactDOM.render`. The code also sets up a script that logs “Test” to the console and selects an SVG element with `d3.select`.

Jan 13, 2020

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—drawn directly within an SVG element, using React 16.10 to render the page structure. The code shows how the `g` group element groups shapes for collective styling and transformation, while CSS classes like `.lines` apply stroke properties to line and path elements. It illustrates static vector rendering with inline SVG attributes, including coordinate positioning, fills, strokes, and the `d` path syntax.

Jan 13, 2020