Skip to main content
Log in
H

HalcyonWjr

@HalcyonWjr·14 public vizzes

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates a static web page that displays a single numerical value, specifically the total session count for the "nodelink" category, which is 193. The page uses embedded JavaScript to define a data object containing session counts for various visualization types and then updates an HTML span element's text content with that value. The code relies on the native `document.getElementById` method and the `textContent` property to manipulate the DOM, without any external charting or data-processing libraries.

Aug 20, 2022
Loading thumbnail…

Fork of test-0601-2

This example displays the total number of user sessions as a plain numeric value on a webpage. It fetches a JSON file from a GitHub-hosted dataset using `$.getJSON` and the Fetch API. The retrieved `perDay` value from the `usersOnline` object is written directly into an HTML `<span>` element. The visualization is minimal, consisting solely of this headline number without charts or graphs.

Jul 2, 2022
Loading thumbnail…

0702

This example displays a large static message reading “Hello HTML!” centered on the page, styled with a 13em font size. It fetches JSON data from a GitHub repository using the Fetch API, but the retrieved records—showing first and last names—are appended as plain text divs into a container, with no visual mapping or charting. The visualization relies solely on JavaScript’s `fetch` and DOM manipulation via `document.createElement`, with basic CSS for layout. No charting library or data-binding framework is used despite the React label in the metadata.

Jul 2, 2022
Loading thumbnail…

Fork of test-0601-3

This example displays the total number of user sessions from a remote JSON dataset, rendering a horizontal bar chart that compares session counts across different user types. The visualization uses Vega-Lite and the Vega-Lite API to define a bar mark, with the x-axis encoding quantitative user numbers (scaled to a 0–300 domain) and the y-axis encoding categorical user types. The total session count is also injected into the page’s heading via `document.getElementById`. Data is fetched asynchronously from a GitHub gist using the Fetch API, and the chart is appended to a DOM container.

Jun 1, 2022
Loading thumbnail…

test-0601-1

This example displays the total number of user sessions and a bar chart of session counts by user type. It fetches JSON data from a GitHub gist using the Fetch API, then uses vega-lite-api with vega and vega-lite to render the bar chart. The total session count is extracted from the data and inserted into the page’s heading via `getElementById`. The chart encodes user type on the x-axis and session numbers on the y-axis.

Jun 1, 2022
Loading thumbnail…

Vega-lite test1

This visualization displays the relationship between engine displacement (mpg), horsepower, weight, and country of origin for various automobile models. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset. It is rendered using the Vega-Lite API, with vega-lite-api wrapping vega-lite and vega for chart generation, while d3 fetches the JSON data. The chart uses an interactive scatter plot with tooltips, circle size representing vehicle weight, and color indicating origin, with a total user session count displayed in the header.

Jun 1, 2022
Loading thumbnail…

Vega-Lite API test

This example demonstrates a Vega-Lite API test using visitor session data from a JSON file, showing user counts by type, online durations, monthly user trends, and session time distributions. The visualization relies on the Vega-Lite API, vega-tooltip, and D3.js (d3.json) to load and process the data, though the page currently only logs the data to the console without rendering any charts. The code references vega.min.js, vega-lite.min.js, and vega-lite-api.min.js libraries, with a React starter project also mentioned in the README as an alternative approach. The HTML structure includes custom styling for tooltip elements, though no visual output is currently generated.

Jun 1, 2022
Loading thumbnail…

Vega-Lite API test

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and origin using the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot displays each car as a circle, with position encoding mpg and horsepower, color indicating origin, and size mapping to weight. Hovering reveals the car name via tooltip. Built with the Vega-Lite API, the code registers vega and vega-lite, configures SVG rendering, and customizes axis and label styling through a configuration object. Data is loaded asynchronously via d3.csv from a Gist, with the visualization sized to fit the viewport.

Jun 1, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays trade data as a bar chart, showing trade values by reporting country and mode of transport, with tooltips revealing partner countries. The visualization is built using Vega-Lite API, which compiles to Vega and renders as SVG, with D3.js handling data loading from a CSV file sourced from the UCI Machine Learning Repository. The chart is configured with custom axis styling and dark label colors for readability, and it resizes to fit the browser window.

Apr 30, 2022
Loading thumbnail…

Fork of Colorful Faces

A grid of colorful stylized faces is rendered using React, where each face is composed of SVG shapes defined by reusable components for the background circle, eyes, and mouth. The faces are generated by mapping over a range of 20 values, and each iteration uses random parameters for eye offset, eye radius, mouth radius, and mouth width, while selecting a color from a list of five. The mouth is drawn using a D3 arc generator (`d3.arc`), and all elements are positioned within an SVG container that translates to a central point. The visualization shows the power of combining React components with D3 for declarative, data-driven SVG generation.

Apr 5, 2022
Loading thumbnail…

x-cept all

The visualization displays a simplified webpage mockup titled “X-cept all,” featuring a yellow heading and a rounded rectangle containing placeholder text about website data storage. It uses raw SVG elements—`<text>`, `<rect>`, and `<tspan>`—drawn directly in the HTML without any JavaScript libraries. The text includes repeated lines like “First line” and “Second line,” while the rectangle’s fill and corner radius are set via inline styles. An embedded YouTube video appears in the README, though the rendered SVG itself remains static and non-interactive.

Mar 30, 2022
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3 v7 and the Fetch API. It fetches a text file containing named CSS colors, parses it with `d3.csvParse`, and displays the approximate file size in kilobytes as a plain text message. The visualization is minimal, focusing on the data-loading workflow rather than graphical rendering, and highlights the asynchronous `fetchText` function alongside D3’s CSV parsing capabilities.

Mar 6, 2022
Loading thumbnail…

useCallback - Mouse follower

A React application renders an SVG circle that follows the mouse cursor across a 960x500 canvas. The component uses the `useState` hook to track mouse position and `useCallback` to memoize the mouse-move event handler, preventing unnecessary re-renders. The `onMouseMove` event on the SVG element updates the circle's `cx` and `cy` attributes via D3-style coordinate mapping. The demo showcases React 16.9 hooks for state management and D3 v5 for SVG rendering, with the circle's position initialized at the canvas center before responding to user interaction.

Mar 6, 2022
Loading thumbnail…

Colorful Faces

A grid of twenty colorful faces fills the page, each face randomly assigned a background color from a set of five. Each face is built from modular React components: a background circle, two eyes, and a mouth arc. The code uses React and D3.js, with the mouth shape generated by D3's `arc` function to create an arc path. Eye position, size, and mouth dimensions are randomized, producing a playful variety of expressions across the grid.

Mar 2, 2022