Christian-SWS

@Christian-SWS·4 public vizzes

First_ResistanceData

This visualization displays a scatter plot of resistance-related data, with each point colored by a third quantitative variable. The data originates from the Auto MPG dataset via the UCI Machine Learning Repository. Built with the vega-lite-api library, it uses `vl.markCircle` with encodings for x, y, and color fields, and includes a tooltip. The visualization is rendered as a full-screen SVG, with axes configured using the `config` object and data loaded asynchronously via `d3.csv`.

Aug 23, 2023

Loading thumbnail…

Loading Data with React & d3

This example demonstrates how to load a CSV dataset from a GitHub gist and display a summary message using React state. It uses the `useState` hook to hold the fetched data and `useEffect` with an empty dependency array to call d3.csv once on component mount. The `message` function computes the number of rows, columns, and approximate file size using d3.csvFormat. The result updates a `<pre>` element, showing either loading text or the computed statistics, with React handling the rendering.

Aug 23, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using D3.js, displaying the resulting table's row count, column count, and file size in kilobytes. The page calls `d3.csv` to fetch and parse the data asynchronously, then uses `data.columns.length` and `d3.csvFormat` to calculate the metrics, rendering the output inside a large `<pre>` element. The included commented code shows alternative approaches using `fetch`, `async`/`await`, and `d3.csvParse`.

Aug 23, 2023

Loading thumbnail…

Servus my first HTML REACT

A grid of eighteen cartoon faces with tomato-colored circular heads, black outlines, eyes, and curved mouths. Each face varies randomly in stroke width, eye position and size, and mouth dimensions, creating a playful, irregular pattern. Built with React components composing SVG circles and paths, the code uses `d3.arc` for the mouth shape and `d3.range` to generate the array of faces. Rendering is handled by ReactDOM with D3 v7 for utility functions.

Aug 22, 2023