Juanantonio1590

@Juanantonio1590·4 public vizzes

Making a Barchart

This example shows a horizontal bar chart of the populations of ten countries, sorted by size descending. Population values are encoded as bar widths on a linear scale, while country names are positioned on a categorical band scale. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements. Data is loaded from a CSV file and parsed with D3's `csv` function.

Jan 3, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the browser’s built-in Fetch API. The code fetches a text file containing CSS named colors, then logs the raw CSV content to the console using `response.text()`. It highlights the asynchronous pattern with `fetchText`, a helper that combines `fetch` and `text()`, and comments show an alternative promise-based approach. No visualization is rendered; the focus is solely on retrieving and inspecting the CSV data.

Dec 28, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn with React-managed SVG elements, using a yellow circle for the head, two black circles for eyes, and a D3 arc for the mouth. The React component renders the SVG, while the D3 `arc` generator creates the mouth path with specified inner and outer radii and angles. The code uses D3 v5 and React 16.9, with the smiley face centered on a 960 by 500 canvas.

Dec 27, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A static face rendered in SVG from a set of hard-coded circle coordinates. It shows a yellow circular head with a black outline, containing two smaller black circles positioned as eyes, set against a blank canvas. The implementation uses raw SVG elements within an HTML document, with an embedded YouTube video. The data source is the explicit coordinate and radius values written directly into the SVG markup.

Dec 27, 2021