RobFlob

@RobFlob·6 public vizzes

Fork of Vega-Lite API Template

This example presents a scatter plot showing the relationship between conspiracy mentality and belief in the “China Corona Conspiracy” (both on 1-7 scales) using data from the UCI Machine Learning Repository’s Auto MPG dataset, despite the filename referencing `conspiracyStudy.csv`. Each circle is rendered semi-transparent to reveal overlapping points. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite, and uses a custom configuration to style axes and labels. The chart is generated via D3’s `csv` loader and then rendered into an SVG, with tooltips enabled through Vega-Tooltip.

Jul 8, 2021

Loading thumbnail…

Loading and playing with Data

This example demonstrates how to load and display data from an external CSV file using React and D3.js. It fetches CSS named colors from a GitHub gist via D3’s `csv` function, then renders the raw array content on the page. The visualization uses React’s `useState` hook to manage the loaded data asynchronously, updating the display once the CSV promise resolves. The interaction is minimal, showing the data as text without filtering or visual encoding.

Jul 7, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by fetching the CSS Named Colors dataset from a GitHub gist. It uses the Fetch API with async/await to retrieve the raw text, then parses it with `d3.csvParse` from D3 v5. The visualization displays three key statistics in a large `<pre>` element: the row count, column count, and file size in kilobytes. It provides a simple demonstration of asynchronous data loading and CSV parsing in a React-less HTML environment.

Jul 7, 2021

Loading thumbnail…

Movable circle

A yellow circle follows the mouse as it moves across an SVG canvas in this interactive React visualization. The component tracks pointer coordinates through a `onMouseMove` event handler and stores them in state to reposition the circle in real time. Built with React 16.9 and D3 v5, it uses React's `useState` hook to manage the mouse position and renders the circle via SVG elements, demonstrating a simple yet effective integration of React's declarative rendering with D3's utility functions.

Jul 7, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A grid of sixteen randomly-styled smiley faces is rendered in React, using D3’s `arc` for mouth paths and `d3.range` to generate the array of faces. Each face’s eye offset, eye radius, mouth width and radius, and fill color are randomized via `Math.random`, producing unique hues and expressions. The SVG is built through reusable components—`FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`—with a fixed canvas size and central positioning. The code imports React, ReactDOM, and D3 v5, demonstrating a component-based approach to data-driven SVG generation.

Jul 6, 2021

Loading thumbnail…

Smiley face part one

This example renders a green smiley face in SVG using React components that draw circles for the head, eyes, and nose, plus a D3 arc for the mouth. The D3 v7 `arc()` generator defines the mouth’s inner and outer radii and angular range, while hardcoded constants position the facial features on a 960-by-500 canvas. All shapes use black strokes with a fixed width, and the React app mounts to a root div via `ReactDOM.render`. The code does not load external data, relying solely on static geometric definitions.

Jul 6, 2021