paulrosedigital

@paulrosedigital·5 public vizzes

Loading and parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js. It shows the process of fetching an external CSV file and converting its rows into JavaScript objects for further visualization use. The code employs D3's `d3.csv()` method to handle the asynchronous data retrieval and parsing. The rendered output is presented within an HTML page that contains a single script block, with the data ultimately displayed in the browser's console rather than as a graphical chart.

Mar 4, 2021

Loading thumbnail…

Let's make a face part 1

A grid of eighteen smiley-style faces, each generated with randomized facial feature parameters, displays a playful range of eye sizes, mouth widths, and stroke thicknesses. The example uses React components to compose each face from modular SVG elements, including a `BackgroundCircle`, `Eyes`, and a `Mouth` drawn with a D3 arc generator. React renders the full array of faces via `range(6 * 3)`, with all coordinates and dimensions computed relative to a central transformation, showcasing a reusable, data-driven approach to SVG chart assembly.

Mar 4, 2021

Loading thumbnail…

Playing with Smiley Face part 2

This example shows a simple smiley face drawn with three circles for the eyes and nose, plus a thick yellow face outline and a mouth created using an arc path. It demonstrates how to build SVG graphics in React using D3’s `arc` helper for the mouth’s curved shape. The code renders fixed-size circles and paths to a 960×500 SVG canvas, with styling for stroke width and fill colors provided directly in the JSX. The visualization relies on React for component rendering and D3 v6 for the arc geometry.

Mar 3, 2021

Loading thumbnail…

HTML Starter

This example demonstrates a minimal web page that displays the text “Hello HTML” in large, centered type using CSS. The page also executes a simple JavaScript command that logs “Hello JavaScript!” to the browser’s developer console. It uses plain HTML, CSS, and JavaScript, with no external libraries, to illustrate the foundational structure for any web-based visualization. The rendering approach is static, relying on the browser’s default text layout and styling.

Mar 2, 2021

Loading thumbnail…

My Let's Make a Face Part I

A static SVG face with two blank eye circles sits on a yellow circular head outlined in black. The drawing uses no interactive behavior or animation, relying solely on hard-coded coordinates and radius values in the markup. With SVG’s native circle elements, the face shows a simple, unfinished composition—only the head and eyes are present, leaving the mouth and other features absent. This example demonstrates basic SVG shape construction without additional JavaScript libraries or data binding.

Mar 2, 2021