Fuzz-Head

@Fuzz-Head·6 public vizzes

Let's make a face with D3.js!

This example constructs a cartoon face using D3.js v5, rendering a yellow circle with eyes, eyebrows, and a mouth as SVG shapes. The code defines geometric parameters like eye spacing, radius, and offsets to position each facial feature around the center of an SVG canvas. It uses `d3.select`, `d3.arc` for the mouth path, and `transition` with `duration` to animate the eyebrows upward and back down over two seconds. All elements are appended to a group translated to the canvas midpoint.

Jun 15, 2020

Loading thumbnail…

React Starter

This example renders a single static message, “Hello React!”, centered on a blank page. It demonstrates a minimal React application by defining an `App` component that returns a `<div>` with a CSS class, then using `ReactDOM.render` to inject that component into the page’s `#root` element. The code imports the React and ReactDOM libraries directly, relying on the `index.html` file to load the production builds of React 16.10.0 and ReactDOM from the unpkg CDN. The visual output is purely typographic, styled via a global CSS rule that sets the font size to 13 em and centers the text.

Jun 15, 2020

Loading thumbnail…

lets make a face using d3!

A blank red SVG canvas appears, ready for drawing a face. The code loads D3 v5 and uses `d3.select` to target the SVG element. It applies a red background color to the entire canvas using `svg.style('background-color', 'red')`. The minimal example demonstrates the basic setup of an SVG element within an HTML page, rendering only the colored background with no additional shapes or face features yet.

Jun 15, 2020

Loading thumbnail…

Stylized Line Chart

This stylized line chart shows weekly temperature readings from the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear handling the scales, while d3.line with curveNatural produces the smooth curved path. Axis components are built from tick marks and labels, and the Poppins font gives the chart its distinctive modern styling.

Jun 15, 2020

Loading thumbnail…

lets make a face

This example renders an SVG canvas with a solid red background, initially presenting an empty frame. The code imports the `select` function from d3 and applies it to the SVG element to set its background color via `style('background-color', 'red')`. The visualization demonstrates a minimal setup for beginning a drawing, with the HTML page linking to D3 v5.16.0 and a separate bundle script. No face or other shapes are drawn; the title implies a playful intent yet the implementation only establishes the base canvas.

Jun 15, 2020

Loading thumbnail…

LEARN SVG

This example demonstrates the basics of SVG drawing with a simple red circle and a yellow rectangle on a blank canvas. It uses raw SVG elements (`<circle>` and `<rect>`) within an HTML page, styled by a minimal CSS file that removes default margins. The visualization serves as an introductory template for learning SVG syntax, with a fixed 1000×500 viewport and no interactive or data-driven behavior. A link to a React starter is included for further exploration.

Jun 15, 2020