Skip to main content
Log in
T

TimeBandit

@TimeBandit·13 public vizzes

Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This visualization shows a finite-state machine for a workstation’s connection and request lifecycle, modeled with XState’s `Machine` API. It begins in a `start` state, transitions through `connection` and `request`, and terminates in a `response` state where various success, cancellation, or error events lead to final states. The code assigns context values like `responseStatus`, `pedId`, and `approvalCode` using `assign` actions, and defines transitions for events such as `CONNECTING`, `PENDING`, `SUCCESS`, and `TIMED_OUT`. The machine is rendered by XState Viz, which visualizes states and transitions from the provided machine definition.

Jan 19, 2021
Loading thumbnail…

DL Faq Json

This visualization displays a set of frequently asked questions and their corresponding answers from a JSON data source, using a force-directed layout to arrange the items. The code parses the faqs.json file and renders each question as a node, with the answer text shown alongside it. It employs d3.forceSimulation to position the nodes in a dynamic, clustered arrangement, while d3.select and text elements display the content. The dataset, authored by TimeBandit on GitHub Gist, contains five entries, each with an id, question, and answer field, and the visualization focuses on presenting this textual information in an interactive, spatial format.

Aug 24, 2020
Loading thumbnail…

Gist c8e219eb38a3924df0bb130d2a56ae8a

This visualization maps Counties and Unitary Authorities in England and Wales using a TopoJSON topology. The author, TimeBandit, has encoded geographic boundaries as arcs and likely renders them with D3 or a similar library, allowing users to explore administrative regions and their spatial relationships. The data source is a GeoJSON file containing the April 2019 boundaries.

Mar 28, 2020
Loading thumbnail…

Gist d7df63e4392b1f23b97f17cdb90b477f

This visualization shows the outline of England as a geographic shape, rendered from a TopoJSON file. The map is drawn using D3.js, with the topology converted into SVG paths. The display emphasizes the coastal and county boundaries of England through thin, dark strokes against a light background, presenting a clean, minimal cartographic view of the region.

Mar 26, 2020
Loading thumbnail…

get cv19 tabular data

This visualization extracts COVID-19 infection counts from a UK government table and formats them into semicolon-delimited CSV data. It first captures the publication timestamp from a page element, converting it to ISO format, then iterates over table rows to collect authority names and case numbers into an array. The code uses standard DOM APIs such as `document.querySelectorAll` and `row.cells` to parse the HTML table, then joins the data with newlines for console output. No external libraries are used; the data source is the visible government statistics page.

Mar 11, 2020
Loading thumbnail…

truncating an array #js #patterns

This example demonstrates a simple pattern for capping the length of a dataset before rendering, ensuring the visualization does not process more entries than necessary. The code checks whether the `data` array exceeds a predefined `MAX_ENTRIES` limit and, if so, uses the native JavaScript `Array.prototype.slice()` method to create a truncated copy containing only the first `MAX_ENTRIES` items. This prevents performance degradation from an oversized array. The example relies solely on core JavaScript array operations, with no external libraries or rendering APIs involved.

Mar 19, 2019
Loading thumbnail…

clearfix hack for floats #css

A CSS code snippet demonstrates the clearfix hack, a technique that prevents a containing element from collapsing to zero height when its children are floated. The example uses the `.clearfix::after` pseudo-element with `content`, `clear`, and `display` properties in a SCSS file. This approach renders a hidden table element after the container, which clears the floats and restores the container’s height. The code shows the standard modern clearfix pattern, relying on CSS pseudo-elements and the `clear` property rather than JavaScript libraries or external rendering APIs.

Oct 29, 2018
Loading thumbnail…

good default fonts #css #style

This example demonstrates a clean, legible typographic foundation for web-based data visualizations, using a stacked font-family declaration that falls back from Helvetica Neue to Helvetica, Arial, and Lucida Grande before settling on a generic sans-serif. The CSS rule, applied to the `body` element, prioritizes system fonts for consistent rendering across platforms without requiring external font files. The code defines the font stack in a stylesheet, ensuring that any chart or graph inherits the same typeface, and it highlights how a single CSS declaration can establish a default aesthetic for an entire visualization project.

Oct 2, 2018
Loading thumbnail…

using string return values to signal errors #patterns #js

This example demonstrates a JavaScript pattern for signaling errors by returning string messages instead of throwing exceptions. The code defines a `handleAddOption` function that returns a descriptive error string when validation fails, such as an empty input or a duplicate option, and otherwise updates state via the React `setState` method. A separate caller checks whether the return value is a string to conditionally trigger error handling. The snippet relies on React’s state management and plain JavaScript control flow, with no external libraries or data sources involved.

Oct 2, 2018
Loading thumbnail…

create a slanted edge #css

This example demonstrates how to create a slanted edge on a hero section using only CSS. The hero element displays a purple gradient background, with a pseudo-element (`#hero:after`) that inherits the background and applies a `skewY(-1.5deg)` transform to slice the bottom edge diagonally. The code relies on the CSS `linear-gradient` property for the visual styling, `position: relative` and `z-index` for layering, and the `transform` and `transform-origin` properties to achieve the angled cut. The effect is purely presentational, requiring no JavaScript or external libraries.

Sep 29, 2018
Loading thumbnail…

auto starting dev server & babel parsing #dev #package #workflow

This example shows a development workflow where a React app automatically starts a live server and watches for JavaScript changes. The code runs the `dev` script, which uses `concurrently` to launch two processes side-by-side: `live-server` serves the `public` folder, while Babel watches `src/app.js` and compiles it with the `env` and `react` presets to `public/scripts/app.js`. The `package.json` defines the project as `indecision-app`, listing dependencies like `babel-preset-env`, `babel-preset-react`, and `save-dev` to enable ES2015+ and JSX transformation during development.

Sep 22, 2018
Loading thumbnail…

Responsive Images #css #style

This example demonstrates a pure CSS technique for making images responsive and retina-ready. It uses the `img` element with `max-width: 100%`, `display: block`, and `height: auto` to ensure images scale fluidly within their containers while maintaining aspect ratio. The comment notes that for retina displays, the width and height attributes should be set to half the original file dimensions. The CSS relies solely on standard style rules, with no JavaScript libraries or external APIs, and applies globally to all images in the document.

Sep 19, 2018
Loading thumbnail…

Focus selector #html #css #styling

This example demonstrates how CSS focus styling can transform a simple HTML element into an interactive visual indicator. The code uses a `div.container` with a nested `div.output` that has a `tabindex="0"` attribute, making it keyboard-navigable. When focused, the output element switches from a light background with dark monospace text to an inverted black background with whitesmoke text, while also applying a subtle box-shadow. The styling relies entirely on the `:focus` pseudo-class and basic CSS properties like `background-color`, `color`, and `padding`, with no JavaScript or external libraries involved.

Sep 19, 2018