David

@dagonib·11 public vizzes

Despeses Pressupost 2021

This example displays the top ten budget expenditures for the 2021 Catalan budget as a horizontal bar chart, using a quantitative axis for spending amounts and a categorical axis for budget items. The visualization loads CSV data from a GitHub gist and processes it with `d3.csv` and `d3.max` to set the linear scale. React manages the component state and rendering, while SVG elements are positioned using `d3.scaleBand` and `d3.scaleLinear`. The chart includes grid lines and tick labels generated from `xScale.ticks()`, with each bar’s height determined by the band scale’s bandwidth.

Apr 9, 2021

Loading thumbnail…

United Nations World Population Prospects 2019

This visualization displays the ten most populous countries for 2020, using horizontal bars ranked by population size from the United Nations World Population Prospects 2019 dataset. The chart loads CSV data via `d3.csv`, then renders SVG rectangles with React, scaling bar widths using `d3.scaleLinear` and positioning them vertically with `d3.scaleBand`. Axis ticks and labels are generated from the scales, with population values shown along the bottom. The code demonstrates a React state hook (`useState`, `useEffect`) to asynchronously fetch and slice the data, while D3 utilities handle the layout and formatting.

Apr 9, 2021

Loading thumbnail…

Rendering Data into React Program and D3 PieArc II

This example renders CSS named colors from a CSV file as a pie chart using React and D3. The `pie` layout and `arc` generator create a donut chart with an inner radius of 120, while React’s `useState` and `useEffect` load the data asynchronously via `d3.csv`. Each color’s hexadecimal value fills its corresponding SVG path. The visualization demonstrates combining React’s component model with D3’s data-joining utilities for declarative SVG rendering.

Mar 25, 2021

Loading thumbnail…

Rendering Data into React Program and D3 II

A donut chart displays every CSS named color as a single slice, with each slice's fill set to the hexadecimal RGB value it represents. The chart uses an SVG rendering approach, with React managing the component state and data loading via `d3.csv`, while `d3.arc` computes the geometric path for each slice based on the dataset's index. The visualization loads color data from a remote CSV file and renders it as a complete ring, with a large outer radius that extends beyond the viewport to create a full circular band.

Mar 25, 2021

Loading thumbnail…

Loading Data into React Program and D3

This example demonstrates how to load external CSV data into a React application using D3 utilities. It fetches a dataset of CSS named colors via `d3.csv` and stores the parsed result in React state with `useState` and `useEffect`. The view displays a concise summary of the loaded data—its size in kilobytes, row count, and column count—using `d3.csvFormat` and a custom `message` module. The page includes React 16.13.1 and D3 v6.6.0 from CDNs, and renders a loading message until the asynchronous data request completes.

Mar 24, 2021

Loading thumbnail…

Vega-Lite API

This visualization shows the relationship between miles per gallon and horsepower for cars from the UCI Auto MPG dataset, with points colored by origin and sized by horsepower. It uses the Vega-Lite API to construct a scatter plot with circle marks, encoding tooltips for car names. The code registers vega, vega-lite, and vega-lite-api with a tooltip handler, loads data via d3.csv, and renders an SVG chart that fits the window size. Custom axis and label styling are applied through a configuration object.

Mar 23, 2021

Loading thumbnail…

Otra formas

This example shows five distinct SVG shapes—a square, a rounded square, a line, a polyline, and a polygon—each rendered in its own small viewport using React components. The shapes are drawn with simple SVG elements like `rect`, `line`, and `polyline`, styled with fills and strokes. The code uses React 16 and D3 v6 for the overall structure, though no D3-specific visualization APIs are applied. All shapes are generated statically with fixed dimensions, displaying basic geometric forms without interaction or data binding.

Mar 22, 2021

Loading thumbnail…

Parsing CSV Data with d3

This example demonstrates how to load and parse a CSV file using D3, displaying the dataset’s size in kilobytes, row count, and column count in large text. It fetches a remote CSV of CSS named colors via `d3.csv`, then formats the parsed data with `d3.csvFormat` to compute its byte size. The page uses D3 v6 and also includes commented-out code showing an alternative approach with the Fetch API, `async/await`, and `d3.csvParse`.

Mar 21, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. Built with React, the app uses the `useState` hook to store the mouse coordinates and a `useCallback` handler triggered by the SVG's `onMouseMove` event. The circle is rendered as an SVG `<circle>` element with a fixed radius of 30 pixels. The viewport is set to 960 by 500 pixels, and the initial position is centered before any mouse movement occurs.

Mar 21, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of reading a remote CSV file, displaying the raw text content in the browser’s console. It fetches a dataset of CSS named colors from a GitHub gist using the `fetch` API, then uses the `response.text()` method to parse the response body as a string. The program relies on the JavaScript `fetchText` function and a promise chain to log the CSV data, without any additional parsing or visualization.

Mar 19, 2021

Loading thumbnail…

Face II

A grid of fifteen small, abstract faces, each with a yellow circular head, black outline, two eyes, and a smile-shaped mouth, demonstrates randomized facial feature placement within fixed SVG viewports. The React application renders each face using a composite of SVG primitives, with positional and dimensional parameters like eye offset, radius, and mouth curvature generated via `Math.random()`. The mouth shape is constructed using the D3 arc generator from the `d3` library, while the overall layout is produced with D3’s `range` function to map over a 5×3 array, yielding varied expressions across the collection.

Mar 18, 2021