aljusa

@aljusa·4 public vizzes

Fork of D3 Starter

This example demonstrates a scatter plot of vehicle data, encoding hydrophobic interaction values along both the x- and y-axes. The visualization leverages the Vega-Lite API to construct a point mark, with data loaded from a CSV file via D3's `csv` function. The chart is rendered as an SVG, configured with custom axis and style settings, and uses the Vega tooltip handler for interactive data inspection.

Apr 3, 2021

Loading thumbnail…

Fork of Testing viz

This example shows a simple web page that loads a CSV file from a GitHub gist and displays summary statistics about it, including the file size in kilobytes, the number of rows, and the number of columns. The React app fetches the data using `d3.csv` and formats the output with `d3.csvFormat` in the message function. The SVG face components, built with React and D3’s `arc` API, are defined but not rendered in the final output, which instead presents the text summary in a `<pre>` element.

Mar 30, 2021

Loading thumbnail…

New Viz

This example displays a simple text summary of a CSV file’s size, row count, and column count in a large `<pre>` element. It loads the `Colors.csv` dataset via `d3.csv` and uses `d3.csvFormat` to calculate the byte size of the formatted data. The visualization is built with React 17 and D3 v6, rendering the message directly into the DOM via `document.getElementById` and `textContent`. The data source is a remote GitHub gist URL.

Mar 30, 2021

Loading thumbnail…

Testing viz

A grid of smiling cartoon faces animates with randomly sized eyes. Each face renders as an SVG composed of a yellow circle with a black stroke, two eyes, and an arc-shaped mouth. The example demonstrates how to use React components alongside D3’s arc generator (d3.arc) to build a composite, interactive visualization. The 30 faces are generated with d3.range, while each eye’s radius is determined by a random function, producing a lively, varied display.

Mar 29, 2021