BraMKJ

@BraMKJ·10 public vizzes

fresh block

This example demonstrates a minimal D3.js v4 visualization that renders a static text message on an SVG canvas. The code selects the body element, appends an SVG container sized at 960 by 500 pixels, and places a single text element reading "Edit the code below to change me!" using a monospace font. The visualization serves as a starting template, showing how to structure an SVG scene with D3’s selection and attribute methods. It uses only core D3 utilities like `d3.select` and `.append`, with no data binding or interactive features, and relies on the inline script from the HTML file.

May 11, 2018

Loading thumbnail…

fresh block

This example shows a simple bar chart built from an array of five numeric values, rendered as blue rectangles with white strokes on an SVG canvas. The code uses D3 v4’s selection and data binding to map each data point to a rectangle, with the x-position determined by an index-based offset and the y-position calculated as the height minus the data value, so bars rise from the bottom. The chart’s fixed width per bar is set via a constant, while the height directly encodes each number. The data is hardcoded in the script, and the rendering relies on SVG’s native shape elements.

Mar 30, 2018

Loading thumbnail…

SCSS only context aware item

This example demonstrates a context-aware list layout where each item’s size and spacing adjust dynamically based on the total number of items. It shows how list items can be styled to occupy equal width when there are four or fewer items, but grow and shrink to fill available space when more items are present. Using SCSS and the `:nth-last-child` selectors, the code applies conditional flexbox properties (`flex-grow`, `flex-shrink`, `flex-basis`) to create responsive behavior. The unordered list and list items are styled with flexbox in the provided `_style.scss`, while the HTML contains ten list items with simple "Item" labels.

Dec 14, 2016

Loading thumbnail…

html: load latest tweet

This example fetches and displays the user’s most recent tweet, showing the tweet text and associated metadata in a simple card layout. It uses the Fetch API to load data from a local or remote JSON endpoint, then renders the content into an unordered list with blockquotes and figure elements. The code relies on standard DOM manipulation methods to insert the tweet’s text and any embedded media or author details, though no external visualization libraries are employed. The layout is styled with minimal CSS, and the data source is assumed to be a JSON response containing the latest tweet object. The figure element is left empty, suggesting it may hold an image or avatar in a fuller implementation.

Mar 27, 2013

Loading thumbnail…

js: load latest tweet

This example displays the most recent tweet from a specified Twitter account as a styled HTML blockquote, complete with the tweet’s text, a relative timestamp, and a user avatar with a caption. It fetches the data via jQuery’s `$.getJSON` from the Twitter REST API endpoint `statuses/user_timeline`, parsing URL links in the tweet text with a custom `parseURL` method and formatting the creation date using the `parseTwitterDate` function. The code then conditionally injects either an image-based figure or a text-only caption into the `.tweets li` element, relying on jQuery for DOM manipulation. No other visualization libraries are used; the rendering approach is plain HTML and CSS.

Mar 27, 2013

Loading thumbnail…

html: article

This example demonstrates a semantic HTML5 article layout with a header containing a two-level heading hierarchy and an inner content division. The code constructs a static document structure using `<article>`, `<header>`, `<hgroup>`, and `<div>` elements, with no interactive or data-driven features. It shows how to organize a standalone content block with a nested heading group, while the empty `.inner` div suggests a placeholder for future content or styling. The rendering relies purely on native browser default styles for HTML elements, with no external libraries, JavaScript, or data sources involved.

Mar 22, 2013

Loading thumbnail…

html: form radiobutton

This example demonstrates a minimal HTML form control for a radio button, showing a single selectable option with an associated label. The code uses native HTML markup with the `input` element set to `type="radio"` and a `name` attribute of `"set-radio"`, paired with a `label` element using the `for` attribute to link it to the input’s `id`. The rendering relies entirely on the browser’s default styling for form elements, with no external libraries or custom JavaScript. The interaction is limited to toggling the radio button’s checked state, as defined by the HTML specification. No data source or advanced visualization API is involved; the example focuses solely on the structural and semantic foundation of a radio-button input.

Mar 22, 2013

Loading thumbnail…

css: clearfix

This example demonstrates a CSS technique for containing floated child elements within a parent container, using a clearfix pattern. It shows a `:after` pseudo-element on the `.group` class that generates empty content, sets the element to `display: table`, and applies `clear: both` to force the parent to expand and include its floated children. The code relies on the CSS `content` property and the `display` and `clear` properties, with no external libraries or JavaScript. This approach is applied directly to a class selector, ensuring the parent wraps around its content without needing extra markup.

Mar 22, 2013

Loading thumbnail…

html: form select

This example demonstrates a basic HTML form control: a `<select>` dropdown menu populated with the numeric options 0 through 3, where the first option is preselected. The code uses native HTML `<select>` and `<option>` elements, requiring no external libraries or JavaScript. It shows how a simple, static dropdown is structured in a form, with the selected value defaulting to "0" on page load. The rendering relies entirely on the browser’s built-in form styling and interaction handling, making it a minimal, self-contained illustration of a standard user-input widget.

Mar 22, 2013

Loading thumbnail…

css: button with bevel (green)

This example demonstrates a purely visual, CSS-based button component, showing how a static green beveled button is styled without any interactive behavior. The code relies on standard CSS properties, including `background-clip`, `background-image` with a linear gradient, `border-radius`, `border-color`, and an inset `box-shadow` to create the beveled, three-dimensional appearance. It also uses `text-shadow` for subtle depth on the white text. The styling defines the button’s dimensions, padding, and typography, with no JavaScript or external libraries involved. The rendering approach is entirely dependent on the browser’s CSS engine, and no data source is used.

Mar 22, 2013