catalingdiaconu

@catalingdiaconu·7 public vizzes

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars with no axes, using React hooks to manage state and load data. The visualization fetches a CSV file from a GitHub gist and renders SVG rectangles scaled by age values, which stand in for population. It implements scales with d3.scaleBand for the y-axis positioning and d3.scaleLinear for the x-axis widths. The chart updates asynchronously, showing a loading message before the bars appear once the data arrives via d3.csv.

May 9, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatterplot uses the Vega-Lite API to visualize the relationship between engine displacement and horsepower in the auto-mpg dataset, with tooltips revealing vehicle names. The code configures a filled line mark with low opacity to create a density-like overlay effect, styled with custom axis and label formatting for readability. It loads data via d3.csv, registers Vega, Vega-Lite, and Vega-Tooltip, and renders an SVG chart that fits the full viewport.

May 6, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSS Named Colors dataset by displaying its file size, row count, and column count in a large text block. The visualization uses D3 v5’s `d3.csv` method to load and parse the remote CSV file asynchronously, leveraging Promises to handle the data once fetched. The code also includes commented-out alternatives using the Fetch API with `async/await` and `d3.csvParse`, as well as a nested Promise callback pattern, illustrating different approaches to loading tabular data. The page itself is rendered with plain HTML and JavaScript within a React-based project.

May 4, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial steps of fetching and parsing a CSV file from a remote URL using the Fetch API. The page loads a data file containing named CSS colors and sets up a promise chain to handle the asynchronous response. The code begins by calling `fetch(url)` on the Gist-hosted CSV, then attaches a `.then()` method to process the response. The visualization itself is not yet rendered, as the focus is on establishing the data loading workflow that will subsequently parse and display the color information.

May 3, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered responsively to fill the browser window, with its facial features positioned relative to the viewport center. The face is drawn using React components that generate SVG elements, including circles for the head and eyes and a d3.arc() path for the mouth. The code uses React 16.9 for component structure, ReactDOM for mounting, and d3.v7’s arc generator to create the curved smile with specified inner and outer radii and angle ranges.

May 3, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A single yellow circle with a black outline floats at the center of a 960×500 SVG canvas, representing the first step in constructing a smiley face. The React application renders the shape using the `react` and `react-dom` libraries, computing the circle's center and radius from the canvas dimensions and a fixed stroke width. This minimal example focuses on foundational geometry for a larger facial assembly.

May 3, 2022

Loading thumbnail…

bare minimum face

A bright yellow circle with a black outline forms a minimalist face against a white background. Two smaller black circles serve as eyes, positioned symmetrically within the larger shape. The visualization uses only basic SVG primitives—circle elements with fill and stroke attributes—to create the simplest possible depiction of a human face. No axes, labels, or annotations are present, making the geometric construction the sole focus of the piece. All elements are defined directly in the SVG markup within the HTML page.

May 3, 2022