Rolf Niggemann

@Rolf-N·5 public vizzes

Fork of Vega-Lite API Template

This visualization displays the relationship between automobile fuel efficiency (mpg) and horsepower, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API and rendered as an interactive SVG, it loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV file. The code uses vl.markCircle and vl.encode for the scatter plot, with a tooltip handler from vega-tooltip to show car model names on hover.

Mar 11, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates the relationship between engine displacement and horsepower across various car models, with tooltips revealing the vehicle name for each point. Built with the Vega-Lite API, the visualization defines a scatter plot using `vl.markPoint` and `vl.encode`, applies custom axis styling through the `config` object, and renders via Vega’s SVG view. Data is loaded asynchronously from a CSV file using D3’s `csv` function, while the Vega tooltip handler enables interactive inspection of individual data points.

Mar 11, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates loading a CSV dataset of CSS named colors asynchronously with `d3.csv`, then displaying a summary of the loaded file—its size in kilobytes, row count, and column count—using React state. The `useEffect` hook triggers the data fetch, and the `useState` hook stores the parsed data, which is rendered as text in a `<pre>` element. The code relies on React hooks and the D3 `csvFormat` utility to compute the data’s size, showing a concise integration of React’s component lifecycle with D3’s data-loading API.

Mar 11, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data by displaying file size, row count, and column count for a dataset of CSS named colors. The visualization uses D3 v5’s `d3.csv` method to fetch the remote CSV file asynchronously, returning a promise that resolves with parsed data. The code then computes and renders these statistics as plain text using `d3.csvFormat` to measure data length. The example also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, alongside a "pyramid of doom" pattern for comparison.

Mar 9, 2021

Loading thumbnail…

Hello World

A yellow circle with a black outline is centered on a blank page. The example demonstrates a minimal SVG rendering setup, using a fixed 960 by 500 viewport. The HTML page directly embeds an SVG element with a single `<circle>` tag, defining its center position, radius, fill color, and stroke properties. No external libraries are used; the visualization relies entirely on native SVG markup within the HTML document.

Mar 6, 2021