Miyaton

@Miyaton·4 public vizzes

CSSセレクタのおさらい

This example presents a reference guide to CSS selectors, visually organizing a Gist document into an interactive chart. It displays the document's hierarchical structure, breaking down selector types into categories such as basic selectors, attribute selectors, and pseudo-elements/classes. The visualization shows the syntax, its format, and the elements to which each selector applies, using a tree-like layout to illustrate the relationships between the top-level categories and their individual entries. The data originates from the Markdown file, with the rendering approach using a force-directed graph to position the nodes.

Mar 7, 2017

Loading thumbnail…

Gist e9e662643752b1cd6f46767b03eab04d

This example demonstrates how to draw a line graph using the HTML5 Canvas API, adapted from a Japanese presentation on Canvas fundamentals. The code initializes a canvas element, retrieves its 2D rendering context, and then draws a framed plotting area with gridlines, data points as arcs, text labels, and connecting line segments. It uses core Canvas methods such as `strokeRect`, `arc`, `fillText`, and `moveTo`/`lineTo`, along with `save` and `restore` to manage drawing states. The visualization is rendered directly to canvas with no external charting library, though the slides reference Chart.js and D3.js as alternatives.

Apr 12, 2016

Loading thumbnail…

HTML5 WebStrage API

This example demonstrates how to use the HTML5 Web Storage API through an interactive LocalStorage test interface. The page provides a form to add key-value pairs and displays a live table of stored data with Edit and Remove actions. Users can also populate initial sample values or clear all stored entries. The implementation uses jQuery 2.1.3 for DOM manipulation and Bootstrap 2.0.4 for styling, while directly calling the native localStorage methods like `setItem`, `getItem`, and `removeItem`. The code checks localStorage availability and outputs all stored pairs into a table.

Jan 26, 2016

Loading thumbnail…

Gist 85f76a1d46b0309fd975

This example presents a slide deck on HTML5 adoption for an internal IT presentation. It covers HTML5 elements, form enhancements, and new attributes such as `autofocus`, `input type="date"`, `datalist`, and the `dialog` element. The content includes code snippets for JavaScript and HTML, and references live samples like a CodePen demo. It explains how HTML5 simplifies validation and input controls compared to older JavaScript-heavy approaches.

Jan 25, 2016