SeanCline213

@SeanCline213·5 public vizzes

Christina Truong, Tech Educator + Front-end Developer

This example presents a personal portfolio page for Christina Truong, a front-end developer and tech educator, highlighting her featured projects, work experience, and educational background. The page is built with React and styled using a linked CSS file that sizes images to 300 pixels wide. It uses static HTML elements such as headers, sections, and anchor tags to display content, including external links to LinkedIn Learning courses, her website, and The Wire Ipsum project. The layout relies on standard document flow without any interactive visualization or data-driven rendering.

Apr 13, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5. It fetches the FreeCodeCamp GDP dataset, converts it to a string, and displays summary statistics including file size in kilobytes, number of rows, and column count. The code uses both `d3.json` with callback syntax and commented alternatives featuring `fetch`, async/await, and `d3.csvParse`. The rendered output appears as large text in a `<pre>` element, highlighting the data parsing process without any visualization.

Apr 10, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that loads external data using the D3.js library. The page fetches GDP data from a freeCodeCamp-hosted JSON file via `d3.json` and logs the retrieved data to the browser’s console. The simple CSS styling centers a large 13em text placeholder on the page, though the body remains empty. The chart logic is incomplete, with the data import function defined but not yet rendered into any visual output.

Apr 3, 2020

Loading thumbnail…

Smiley Face Part V

Five identical smiley faces appear in a grid over an SVG canvas. Each face is composed of React components for the background circle, eyes, and mouth, all rendered inside a translated `<g>` group. The mouth uses the D3 `arc` API to generate a path with specified inner and outer radii and angular sweep. Built with React 16.9 and D3 5.11, the example relies on the UMD builds of both libraries loaded from unpkg, with the entire composition defined declaratively in `index.js` and rendered into a root div.

Mar 31, 2020

Loading thumbnail…

Smiley Face Part III

A smiling face rendered with SVG primitives inside a React component, using circles for the face and eyes and a D3 arc path for the mouth. The code sets D3’s `arc()` generator with explicit inner/outer radii and start/end angles to create the curved mouth path, then draws the face, eyes, and mouth on a 960 by 500 canvas. React manages the SVG output, while D3 v5 computes the path data, and CSS hides page margins for a full-viewport display.

Mar 30, 2020