Skip to main content
Log in
A

Andrew-Kiwa

@Andrew-Kiwa·14 public vizzes

Loading thumbnail…

Making a Bar Chart

This example demonstrates a bar chart that is not yet fully implemented; instead, it shows a loading animation built with CSS keyframes. The display features four rotating line segments in yellow against a dark blue background, which rotate and fade to create a looping square-drawing effect. The code uses HTML, CSS animations, and D3.js from a CDN to set up an SVG container, but the actual bar chart data and rendering logic are absent from the visible files. The animation relies on CSS transforms with custom origin points to simulate a drawing motion.

Nov 14, 2022
Loading thumbnail…

Casino Blackjack

This visualization tracks plant counts in agricultural fields using a simple counter interface. It shows two separate tallies: the number of rows in a field and the average number of plants per row, both controlled by INCREMENT and SAVE buttons. The code uses vanilla JavaScript DOM methods like `getElementById` and `textContent` to update displayed counts and log previous entries. D3 is loaded via CDN but is not actively used. Data comes from field staff conducting their second estimate, with values manually entered by users.

Oct 5, 2022
Loading thumbnail…

Plant Counts:

This interactive plant-counting tool records field data from staff second estimates. Two synchronized counter panels let users increment and save the number of rows per field and the average plants per row. Using plain JavaScript with event handlers and DOM updates, each save appends the current count to a running log. The layout uses basic HTML elements with CSS styling, while the D3 library is loaded but does not drive the visualization logic.

Oct 2, 2022
Loading thumbnail…

My_Portrait

This data-visualization example, titled *My_Portrait*, uses a 2018 United Nations population estimate for the top 10 most populous countries to construct a bar chart of national demographics. The bars are rendered within an SVG canvas, and the chart's visual design incorporates a background-clip technique that applies a semi-transparent text fill via the `portrait` class, allowing the graphic to double as a stylized portrait. The project relies on D3.js v5 (loaded as `d3.v5`) and uses its core API to bind the numeric data to the bars' heights. Styling is handled externally through `Style.css`, which sets the page margins and defines the text-fill effect.

Sep 28, 2022
Loading thumbnail…

Phone call

This visualization shows a network of nodes connected by lines, resembling a phone call graph, where each node likely represents a person or device. The layout is computed using D3 v5’s `d3.forceSimulation` with force-directed positioning. The SVG rendering is driven by React, with the graph drawn inside an SVG element. The page includes a clickable phone number link, and the data structure is defined in JavaScript, with styling provided by a separate CSS file.

Sep 28, 2022
Loading thumbnail…

Login-Box

This interactive login form demonstrates a form-validation and animation sequence. It presents a centered login box where users enter a username and password; blank fields receive a red error box-shadow. Upon successful submission, the dark background layer slides in, the form animates off-screen to the right, and a personalized greeting in the "Rock Salt" font fades in from the top. The implementation uses jQuery `.animate()` for the CSS-based motion, while the D3.js library (v5) is loaded but not directly used; the page structure and styling rely on HTML, CSS, and JavaScript.

Sep 27, 2022
Loading thumbnail…

Loader with dots

This example shows three circular dots arranged horizontally as a loading indicator, animating in a staggered scale sequence. The loader uses pure CSS transitions and keyframe animations (`@keyframes preloader`) to create the pulsing effect, with each dot’s animation delayed for a rhythmic loop. The markup consists of a `.loader` container with three `.loader__element` spans, styled via CSS custom properties (e.g., `--main-color`, `--point-color`) and rendered on an SVG page. No JavaScript libraries are used; D3 is loaded but unused in this static behavior.

Sep 27, 2022
Loading thumbnail…

Border Animation

This example demonstrates a dynamic, organic border using CSS animations. A white, irregularly-shaped blob continuously morphs through different border-radius configurations, including a perfect circle at the midpoint, before shifting to a yellow hue. The animation is driven by the `borderrr` keyframes within the stylesheet. The page uses a minimal HTML structure with an SVG element and a `bundle.js` script, though the primary visual effect is achieved through pure CSS, not JavaScript or D3. The code references D3 v5 via CDN but the actual animation relies on CSS `@keyframes` and the `border-radius` property.

Sep 27, 2022
Loading thumbnail…

Page ROller

This example shows a looping CSS animation of four rotating lines that form a rolling square shape. The animation uses custom keyframes named `desno`, `desno2`, and `desno3` to rotate each line sequentially around different origins, with staggered opacity changes creating the illusion of a continuous page-turning effect. The code relies on CSS transforms, animation properties, and positioning, with the lines styled as rounded rectangles in a yellow-green palette on a green background. While the HTML includes an SVG element and D3.js, the visual effect is driven entirely by CSS.

Sep 27, 2022
Loading thumbnail…

Making Bar Chart with SVG!

This example demonstrates a minimal HTML page that renders a static bar chart using SVG, displaying a simple "Hello HTML!" message as the chart title. The code relies on plain CSS for text styling and JavaScript for the initial setup, though no actual data or dynamic visualization logic is implemented yet. It serves as a starting point for building interactive charts with React and D3, referencing a separate React Starter template. The rendering approach uses basic HTML elements within a styled `<div>` rather than SVG tags, with the title styled at a large font size for emphasis.

Sep 22, 2022
Loading thumbnail…

Bar Chart

This bar chart displays categorical data from a CSV file, with steel-blue rectangles representing values across categories. The visualization uses D3.js to load and bind the data, then scales the rect elements’ heights and positions based on the dataset. Text labels accompany each bar, rendered via SVG. The styling, including margins and font sizes, is defined in a separate stylesheet, while the chart is generated dynamically in an HTML page that reads the data source.

Sep 19, 2022
Loading thumbnail…

Untitled

This example shows a simple bar chart where each rectangle is rendered in steelblue, with a single text label displayed beneath the visualization. The chart uses D3.js to bind data from a CSV file to SVG elements, mapping values to rectangle heights. The code relies on D3’s selection and data-join methods to append the `rect` and `text` elements, while the page layout is controlled by CSS, setting margins to zero and hiding overflow for a full-window display.

Sep 19, 2022
Loading thumbnail…

Fork of exa

This visualization displays a large, centered message reading “Hello HTML!” with bold, oversized typography. The example uses plain HTML, CSS, and JavaScript on a bare-bones page, with the `.message` class controlling font size and alignment. It demonstrates the simplest possible setup for a web-based visualization, relying solely on standard DOM elements and inline styling rather than any external libraries or data-processing APIs. The rendering approach is static, with no interactivity or dynamic behavior beyond the initial page load.

Sep 11, 2022
Loading thumbnail…

exa

This example demonstrates a minimal HTML page that displays the message "Hello HTML!" centered on the screen using CSS. The page uses a `<div>` element styled with a large font size and centered alignment. It relies solely on standard HTML and CSS, with no JavaScript or external libraries. The code also references a React Starter on VizHub, indicating it is a bare-bones starting point for building more complex web applications.

Sep 11, 2022