Skip to main content
100%

Microdatas by examples

✓ Published0🌍 Public
Aabernier
Last edited Jun 7, 2012
Created on Jun 7, 2012

This example demonstrates how HTML microdata structures map to JSON output, pairing each markup snippet with its corresponding parsed result. It shows the core concepts of `itemscope` and `itemprop`, including multi-value properties, multi-key attributes, and nested items, followed by `itemref` for referencing external elements. The code uses plain HTML and JSON snippets to illustrate the parsing rules, with TODO placeholders for `itemtype` and `itemid`. The visualization serves as a reference guide for microdata syntax and its data model.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist dd66e34b244896670059a1be529633da

This example renders a markdown table as a simple data visualization, showing the relationship between two columns of text content. The code uses D3.js to parse the table structure and display the cells in a grid layout. It relies on standard D3 selection and data-binding methods to map each row and column to positioned text elements. The visualization draws directly from the gist’s embedded markdown data, converting the header and body cells into a clean, readable chart without additional processing or external data sources.

Aabernier
60% match
Loading thumbnail…

Gist 2910053

This example demonstrates a small jQuery plugin that links rendered DOM elements back to their underlying data items. The plugin defines a `spine` method with two commands: `item`, which retrieves the data object associated with an element (using jQuery’s `.data()` or a template’s `tmplItem()`), and `forItem`, which filters a set of elements to find those matching a given data object via an `eql` comparison. The code uses jQuery templates and the `$.fn.spine` API, showing how to build reusable, chainable data-binding utilities for interactive visualizations.

Aabernier
59% match
Loading thumbnail…

Gist bc044ce87839a0fccbdad832e3585d07

This example demonstrates the common subset of Markdown and reStructuredText markup syntax, using both formats to show how text can be written portably across the two lightweight markup languages. The visualization is rendered as two nearly identical documents side-by-side, with font styling applied to display italics, bold, and monospaced text, along with paragraph and heading structure. It visually compares how the same source content appears in Markdown versus reStructuredText, highlighting the shared formatting conventions (like asterisk-based emphasis) and the differences in extensibility, such as tables and automatic table-of-contents generation. The layout makes it easy to see at a glance how each markup language handles identical input, emphasizing the "common denominator" subset approach for painless conversion between the two.

Aalvinthai
59% match
Loading thumbnail…

Gist 45db9d716671d0e53ccdd33370f72d69

This example displays a reference table for ANSI escape sequences, organizing text attributes, foreground colors, and background colors into three separate sections. The data originates from a Markdown file that lists each escape code alongside its corresponding visual effect, such as bold, underline, or specific color values like Light Cyan. The rendering relies on standard HTML tables, with no JavaScript libraries or visualization APIs involved, presenting the information as static, readable documentation rather than an interactive graphic.

Aamazingandyyy
58% match
Loading thumbnail…

highlight.js

This example demonstrates how to display a JavaScript object as formatted, syntax-highlighted code on a web page. It uses the highlight.js library to apply color-coded styling to a JSON string representation of a small dataset, while D3 v4 populates the `<code>` element with the data. The code first defines an array of objects with name and size properties, then uses `d3.select` and `json.stringify` to insert the formatted data into the page. The visible result is a clean, readable code block, though no interactive visualization is present.

EEfratVil
58% match
Loading thumbnail…

Markdown Cheatsheet

This example displays the raw content of a Markdown cheatsheet, which is a plain-text file listing markup syntax for headings, emphasis, links, tables, code blocks, lists, and more. The page also includes an inline HTML fragment and a JavaScript console log. The visualization is not driven by data or charting libraries; instead, it relies solely on the browser’s default rendering of the README file and the index.html body, with the latter styled via a simple CSS rule.

CCurran Kelleher
58% match
Loading thumbnail…

Gist 58ea1113852500390cf7cb5f0bd2d88c

This example demonstrates two JavaScript methods for converting between JavaScript objects and JSON format. It uses the native `JSON.parse()` function to transform a JSON string into an object, then accesses its properties to display "John, 30" via `document.getElementById().innerHTML`. A second example uses `JSON.stringify()` to convert a JavaScript array of names into a JSON string for output. The code relies on standard JavaScript APIs and renders results directly into HTML elements, illustrating basic data serialization without external libraries.

MMistyBlunch
58% match
Loading thumbnail…

Markdown Demo

This example showcases the rendering of Markdown content in VizHub, demonstrating a wide range of syntax including headings, emphasis, links, tables, code blocks, blockquotes, task lists, and embedded HTML. The README.md file serves as the Markdown source, while the visualization includes an index.html that displays a large "Hello HTML!" message styled with CSS. The example highlights how VizHub processes Markdown and HTML files, using standard Markdown parsing and HTML rendering to present the content in the gallery. It does not use any additional JavaScript libraries for data visualization.

CCurran Kelleher
57% match