Abi360

@Abi360·7 public vizzes

Fork of Loading Data with React & D3

Loading data with React and D3 displays a grid of colored squares, each representing a CSS named color from a remote CSV file. The React component uses the `useState` and `useEffect` hooks to fetch the data via `d3.csv`, updating the component once the dataset arrives. While loading, the page shows a large "Loading..." message. After the data loads, it renders each row as a `div` whose background color is set to the color's `RGB hex value` from the CSV. The code imports React, ReactDOM, and the `csv` function from D3 v7.

Aug 9, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data in a React component using D3 utilities and display a text summary of the dataset. The application fetches a CSV file containing CSS named colors via `d3.csv`, stores the parsed result in React state with the `useState` and `useEffect` hooks, and shows a message with the file size in kilobytes, number of rows, and number of columns using a custom `message` function that relies on `d3.csvFormat`. The data is rendered as large text in an SVG-compatible HTML page.

Aug 9, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates an interactive scatter plot exploring global religious demographics, with circle size encoding population and axes mapping country and religion. The visualization is built using the Vega-Lite API, which composes specifications through JavaScript method chaining, then renders via Vega’s SVG output with tooltips from vega-tooltip. Data loads asynchronously from a CSV (Auto MPG dataset, though the active code references religion and population) using d3.csv, while the vega-lite-api library registers with Vega and Vega-Lite to handle encoding, scaling, and configuration. Custom axis styling and font settings come from a separate config object.

Aug 9, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying a summary of the dataset's size in kilobytes, row count, and column count. It uses the D3.js v7 library, specifically the `d3.csv` method for fetching and parsing the data, along with `d3.csvFormat` to calculate the formatted size. The parsed data comes from a GitHub Gist containing tabular data. The results are rendered as large text within an HTML `<pre>` element, with the page’s styling controlled through CSS.

Aug 3, 2021

Loading thumbnail…

Mouse Follower

A circle rendered as an SVG element follows the mouse cursor across a 960 by 500 canvas. The React application tracks pointer movement through an `onMouseMove` event handler, updating state with the cursor’s client coordinates. The circle’s center position is then bound to this state, and ReactDOM re-renders the SVG circle with each change. This example uses React’s `useState` and `useCallback` hooks to manage the dynamic positioning.

Aug 2, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” centered on a white page, with the body’s font size set to a very large 13em. It serves as a minimal demonstration of basic HTML and CSS styling, alongside a JavaScript `console.log` statement that outputs “Hello JavaScript!” to the browser’s developer console. The page uses plain HTML elements, a `<style>` block for CSS, and an inline `<script>` for JavaScript. It does not incorporate any data visualization or external libraries, serving purely as a starting point for static web content.

Jul 31, 2021

Loading thumbnail…

Smiley Face with React

This example shows a simple smiley face made from three SVG circles: one large yellow circle for the head and two smaller black circles for the eyes. The React component defines the layout using constants for dimensions, center coordinates, eye offsets, and radius, then renders the SVG elements declaratively. The code uses React 17 and ReactDOM to mount the component into the DOM, leveraging JSX within the `App` function to structure the SVG. The rendering relies on standard SVG circle elements with stroke and fill properties.

Jul 24, 2021