Nicholas Francis O'Brien

@nicholasob7·9 public vizzes

4th Vega-Lite API Template

This example visualizes the top five religions by population per country, with bars sized and colored to reflect religious demographics. Built using the Vega-Lite API, it registers vega and vegaLite, and employs a bar mark with positional and size encodings. The visualization loads CSV data from a remote gist URL, renders as an SVG, and incorporates custom axis styling and tooltips via vega-tooltip's Handler.

Oct 6, 2022

Loading thumbnail…

Fork of 3rd Vega-Lite API Template

This bar chart displays the population of each country in 2015, sorted in descending order to highlight the most populous nations. The visualization is built using the Vega-Lite API within a D3.js framework, leveraging `vl.markBar()` and encoding country names and population values as x and y axes. Data is fetched asynchronously via D3’s `csv` loader from a GitHub-hosted CSV file. The chart renders at full window size with a custom dark theme, using Vega-Lite’s configuration to remove axis domains and adjust label styling for readability.

Oct 6, 2022

Loading thumbnail…

2nd Fork of Vega-Lite API Template

This example visualizes temperature readings over time using an area chart, with the x-axis mapping timestamps and the y-axis mapping temperature values. Tooltips display the temperature for each data point. Built with Vega-Lite and the Vega-Lite API, it uses D3’s `csv` loader to fetch data from a GitHub gist containing San Francisco week temperature records. The chart renders in SVG via Vega, applying custom axis and label styling from a configuration object, and resizes to fit the window.

Oct 6, 2022

Loading thumbnail…

Niko's Fork of Vega-Lite API Template

This example renders an interactive scatter plot of the classic auto-mpg dataset, sourced from a CSV via D3’s `csv` function. Each point represents a car, with engine origin on the x-axis, horsepower on the y-axis, weight mapped to color, mpg to symbol size, and a tooltip showing the model name. Built with the Vega-Lite API wrapper, it registers Vega and Vega-Lite, configures an SVG view with a custom dark theme, and uses a D3-based handler for tooltip interaction. The visualization auto-fits to the window dimensions.

Oct 6, 2022

Loading thumbnail…

Loading Data with React & d3

This example displays a text summary of a loaded dataset, showing the file size in kilobytes, row count, and column count. It demonstrates how React state manages asynchronous data loading, using the `useState` and `useEffect` hooks to fetch and store the data. The code uses d3's `csv` function to parse a remote CSV file containing CSS named colors, and ReactDOM renders the resulting message. Before the data arrives, the interface shows a "data is loading..." message.

Oct 6, 2022

Loading thumbnail…

Fork of Parsing CSV Data with d3

This example demonstrates how to load and parse CSV data using D3 version 5. It fetches a dataset of CSS named colors and displays a summary of the file size, row count, and column count in a large text element. The primary method uses `d3.csv` with a promise, while commented-out alternatives show the same task with `fetch` and `async`/`await`, plus a nested promise approach sometimes called the “pyramid of doom.” The text output is rendered using standard DOM manipulation via `textContent`.

Oct 5, 2022

Loading thumbnail…

Niko's Fork of Loading and Parsing CSV Data

This example demonstrates the loading and parsing of CSS Named Colors CSV data, displaying a summary of the dataset’s size in kilobytes, row count, and column count. The visualization uses D3 v5’s `d3.csv` for asynchronous data fetching and `d3.csvFormat` to measure the formatted data length. The code also includes commented alternatives using `fetch` with `async`/`await` and a "Pyramid of Doom" pattern, though only the primary `d3.csv` method is active. The output is rendered as large text within an HTML `<pre>` element.

Oct 5, 2022

Loading thumbnail…

Mouse Follower

A React component tracks the mouse position within an SVG canvas using the `useState` and `useCallback` hooks, rendering a circle that follows the cursor. The `onMouseMove` event handler updates the circle's center coordinates via `setMousePosition`. The SVG circle updates its `cx` and `cy` attributes in real time, demonstrating reactive rendering with React 16.9 and ReactDOM.

Oct 5, 2022

Loading thumbnail…

Smiley Face Part 1 Niko

A grid of 18 randomly generated smiley faces demonstrates reusable React components for data-driven SVG drawing. Each face combines a yellow background circle, two eyes, and an arc-based mouth, with randomized properties for stroke width, eye offset, eye radius, mouth width, and mouth radius. The visualization uses React 18 to render SVG elements through custom components like `BackgroundCircle`, `Eyes`, and `Mouth`, while D3 v7's `arc` API generates the mouth path geometry. Faces are positioned using a shared `FaceContainer` that translates SVG groups, and randomness comes from `Math.random()` called during component rendering.

Sep 27, 2022