Kate-2222004

@Kate-2222004·12 public vizzes

Fork of Smiley Face Part II

This example displays a table of CSS named colors loaded from a CSV file, showing the row count and data size in kilobytes. The visualization uses React with hooks to manage state, while D3 version 7 fetches the CSV data via `d3.csv`. The app conditionally renders either “loading” or the calculated message about the dataset, leveraging ReactDOM for rendering into the DOM. The underlying SVG smiley face markup in the HTML is commented out, indicating the current focus is on data loading rather than graphical output.

Jun 17, 2021

Loading thumbnail…

Fork of color

This example displays a minimal text readout of a CSV dataset, showing row count and file size in kilobytes. It uses D3 v7’s `d3.csv` loader to fetch a gist-hosted list of CSS named colors. The rendered `<pre>` element updates with two lines of summary statistics. The code also includes commented-out alternatives using raw `fetch` and `d3.csvParse`, demonstrating equivalent data-loading strategies without altering the visible output.

Jun 17, 2021

Loading thumbnail…

color

This example loads a CSV file of CSS named colors from a GitHub gist and parses it with `d3.csvParse`. The page fetches the text asynchronously using the Fetch API, then logs the row count to the browser console. The visualization itself is not yet rendered; the code only demonstrates the data-loading and parsing step, with a commented-out alternative fetch path for reference. It uses D3 v7’s `csvParse` to convert the raw text into an array of objects, though no chart or graphical output is currently displayed.

Jun 17, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example demonstrates a yellow smiley face rendered as a static SVG composition, using two filled circles for eyes within a larger yellow face outlined in black. Built with React 16.9 and ReactDOM, the application defines a constant width and height of 960 by 500 pixels and uses the `useState` hook to manage data, though the rendering logic is left incomplete in the provided source. The visualization relies on inline SVG elements rather than external data sources, with the face geometry hard-coded in commented-out markup.

Jun 15, 2021

Loading thumbnail…

Fork of Hello HTML

This example fetches a CSV file containing CSS named colors from a remote GitHub gist using the Fetch API. It demonstrates the basic structure of an HTML page with a script that initiates an asynchronous request to retrieve the data, logging the raw CSV text to the browser console. The visualization itself is not rendered; instead, the example focuses on the initial step of loading and inspecting the dataset through the promise-based `fetch` and `response.text()` methods.

Jun 15, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and React. The visualization displays a summary of the CSS Named Colors dataset, reporting the file size in kilobytes, the number of rows, and the number of columns. The code uses the `d3.csv` method to fetch and parse the remote CSV file, then formats the results with `d3.csvFormat` and displays them in a large text element. A commented alternative using `fetch` with `async/await` and `d3.csvParse` is also shown.

Jun 15, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiling face composed of SVG primitives, built with React and D3. The face’s yellow circular background, two eyes, and an arc-shaped mouth are rendered inside a React SVG container, with each facial component defined as its own React component. D3’s `arc` API generates the mouth’s path geometry, while the background and eyes use plain SVG circle elements. The face’s dimensions, positions, and stroke widths are controlled by props passed to a central `Face` component.

Jun 14, 2021

Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part III

This example shows a smiley face built with a yellow circle, two black eyes, and a curved mouth arc, all rendered as SVG elements. The face is centered in a 960 by 500 viewport using React to declaratively manage the SVG structure. D3 v7 provides the `arc` generator to create the mouth path, while hardcoded coordinate variables control eye placement and stroke thickness. The code uses React’s `ReactDOM.render` to mount the component, and the final output is a static visualization without interaction or animation.

Jun 13, 2021

Loading thumbnail…

Fork of Fork of Let's Make a Face Part III

This example shows a simple cartoon smiley face built with SVG shapes, including a yellow circle for the head, two black circles for eyes, and a curved arc for the mouth. The face is centered using a D3.js arc generator with specified inner and outer radii and angular start and end points. The visualization is rendered in React, with each element positioned via SVG attributes and a group transform. It demonstrates combining React components with D3’s arc API to produce static, geometric graphics.

Jun 13, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face on a black-outlined circle, rendered as an SVG, is shown at the center of a 960 by 500 pixel viewport. Two empty eye circles are positioned symmetrically on either side of the face’s vertical axis. The visualization uses React to render the SVG elements, with dimensions and offsets defined as constants in JavaScript. The code demonstrates basic component-based SVG drawing with static, hard-coded coordinates and styling.

Jun 13, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static yellow smiley face made from one large circle and two smaller eye circles, all rendered as SVG elements within a 960x500 viewport. The face uses hardcoded coordinates and stroke widths to position the features, with a yellow fill and black outline for the head. Built with React 16.9, it renders directly through hardcoded JSX inside the index.html file rather than using JavaScript logic to compute positions. The video embedded in the README suggests it is part of a tutorial series on building faces with React and SVG.

Jun 12, 2021

Loading thumbnail…

Fork of Hello HTML

A single large yellow circle with a black outline sits centered in an SVG canvas, flanked by two smaller unfilled circles. The example demonstrates basic SVG shape rendering within an HTML page, using raw SVG elements like `circle` directly in the markup. The code sets a fixed canvas size of 960 by 500 pixels and applies CSS to remove default page margins. No JavaScript libraries or data sources are involved; the visualization is purely static vector graphics defined inline in the HTML.

Jun 11, 2021