AndrewsTrinh

@AndrewsTrinh·4 public vizzes

Fork of Smiley Face Part II

This example shows a smiling face made of two eyes and a yellow circle, drawn with SVG elements inside a React app. The code imports React and D3 v7, using `csv` from D3 to load CSS named colors data from a GitHub gist, though the visualization itself is a static SVG smiley. The `App` component conditionally renders a message based on whether the data has loaded, while the commenting, incomplete SVG markup in `index.html` hints at the intended face design. React 16.9 and D3 are loaded via UMD scripts, and the app renders into a `#root` div.

Jul 26, 2021

Loading thumbnail…

Initial

This example displays the text “Hello HTML” in large, centered type and demonstrates reading a remote CSV file using D3 v7’s `d3.csvParse` after fetching it with the Fetch API. The page loads a dataset of CSS named colors from a GitHub gist and parses it into JavaScript objects. The code logs the parsed data’s columns to the browser’s developer console, while the visible page remains a static HTML and CSS layout. It highlights minimal setup with D3 loaded via CDN in a plain HTML file.

Jul 25, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A dynamic smiley face visualization built with React and ReactDOM renders an SVG that adapts to the full browser window. The code calculates the viewport dimensions to center a yellow face, positioning its eyes using offset constants relative to the center point. Using React's JSX syntax and SVG circle elements, the example demonstrates a simple, responsive approach to basic geometric drawing within a React component. The implementation relies on the React 16.9 production build, with a commented-out static version showing the original dimensions for reference.

Jul 25, 2021

Loading thumbnail…

Let make a face

This bar chart displays country populations for China, India, the United States, and Vietnam, sourced from a local CSV file. The example uses React and renders with SVG, leveraging the D3.js API functions `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the axes and data points. It also demonstrates D3’s `csv` method for data loading and the `format` function for axis tick labels. The visualization applies a 100x multiplication to raw population values during data preparation, as seen in the code.

May 1, 2020