Skip to main content
Log in
V

VeronicaM

@VeronicaM·69 public vizzes

Loading thumbnail…

Gist 1827ee428d05fce22f7cf2989016e07d

This example presents an interactive force-directed network visualization, showing how nodes and links are arranged and respond to simulated physical forces. The code uses D3.js’s `d3.forceSimulation` to compute node positions and link tensions, while `d3.drag` enables user interaction to move nodes. It renders the graph on an SVG canvas, with node colors and sizes likely derived from data attributes, and links drawn as simple lines. The configuration file shows Babel transpilation settings, but the visualization itself is built from a gist source by VeronicaM.

May 7, 2019
Loading thumbnail…

Identified spoken words

This example shows identified spoken words as they are captured through a browser’s speech recognition API, displaying the transcript in a form input. The code uses the `SpeechRecognitionService` to activate listening, with callbacks for no-match and unrecognized results that log or alert the user. It relies on the native Web Speech API, invoked via `startRecognition()`, and handles errors by catching exceptions and displaying an alert. The visualization itself is minimal, focusing on the interaction between voice input and the text field, without any charting or rendering libraries.

May 4, 2019
Loading thumbnail…

Google Vision Terms data structure

A force-directed network visualizes Google Vision terms from an external data file, mapping each term to an entity node. The visualization shows how vocabulary items relate to course and interface language fields, with each node storing translation, image, and strength metadata. Using `d3.forceSimulation`, the code iterates over `googleVisionTerms.data` to populate a `vocabularyResults.entities` array, assigning properties like `saved`, `entityId`, and a unique Unsplash image URL per entity. The implementation relies on D3.js for simulation and data binding, while the data source is a gist by VeronicaM containing the term structure.

Apr 16, 2019
Loading thumbnail…

Utter word in course language with Web Speech API

This example demonstrates how to pronounce a course word aloud in the user’s current language using the Web Speech API. It retrieves the user’s course language code and selects a matching voice from `SpeechSynthesisService.getVoices()`, then calls `SpeechSynthesisService.speak()` with the word, setting rate, pitch, and volume. The code relies on the browser’s speech synthesis capabilities to deliver audio feedback directly from the interface.

Apr 15, 2019
Loading thumbnail…

Word schema

This example visualizes a word schema from a Mongoose model, showing how a single text field maps to a document with an auto-generated virtual id property. The code defines the schema using mongoose.Schema, declares a text string field, and exposes a virtual getter for the document’s _id. It exports the model as “Word” via module.exports, relying on the Mongoose API for data modeling and MongoDB integration. The visualization is a plain code listing that highlights the schema structure and its associated virtual property, with no rendering or interaction logic present.

Apr 15, 2019
Loading thumbnail…

send image to google vision endpoint

This example shows a client-side web application that sends a canvas-rendered image to a Google Vision endpoint and displays the recognized labels in the page. It first captures the canvas content as a PNG dataURL using `toDataURL('image/png')`, then posts that data along with a selected course language value via `fetch` to the server. The response is an array of words, which the code maps into HTML list items showing each recognized term and its associated language. The rendering uses plain DOM manipulation with `innerHTML`, and the request/response cycle relies on standard JavaScript Promises.

Apr 15, 2019
Loading thumbnail…

fresh block

A single SVG canvas displays the text “Hello Front End Masters!” in monospace. The example uses D3 v4 to select the body element and append an SVG with fixed dimensions. It positions the text at specific x and y coordinates and sets its font size and family. The code demonstrates basic D3 selection and attribute manipulation without any data binding or interactive behavior.

Sep 16, 2017
Loading thumbnail…

Gist 4d07e78f03b3d6235c95c3435fd4b326

This visualization plots the density and distribution of Slack error messages containing “Uncaught TypeError” from the file rollup-secondary_a_required.js, using a force-directed simulation. It shows clusters of error occurrences across different validator functions and input elements, revealing patterns in where these runtime failures arise. The code uses d3.forceSimulation to position nodes representing individual error instances, with links connecting related errors. The rendering relies on SVG elements and d3’s data-binding methods, while the underlying data comes from parsed error stack traces. The visualization highlights concentrated error hotspots near specific validator mappings and HTML input handlers.

Apr 2, 2017
Loading thumbnail…

Gist fc88f1df47cdf606c9380f88c710c097

This visualization presents a step-by-step guide to a GitHub workflow, rendered as a vertical sequence of command blocks. It shows the process from checking out the master branch through creating a feature branch, committing changes, pushing, and merging via pull request. The code uses D3.js to bind the workflow steps to SVG elements, with `d3.forceSimulation` likely managing the layout of connected command nodes and arrows. Text is styled with D3 selections, and the data source is a hardcoded array of workflow instructions.

Mar 24, 2017
Loading thumbnail…

Daily CSS Images Portfolio

This portfolio template presents the user’s Daily CSS Images challenge entries as a weekly visual gallery. Each week is a section with a heading, a short personal reflection, and a row of thumbnail images, each linking to the corresponding CodePen project. The page uses a clean, responsive Bootstrap grid layout, with a header featuring the author’s name and an animated subtitle. The styling is driven by SCSS variables for consistent colors and fonts, with a soft green gradient background, triangular accent shapes, and Bootstrap's thumbnail component for image previews.

Feb 20, 2017
Loading thumbnail…

webpack2-config

This example shows a webpack 2 configuration file that sets up separate entry points for app and admin bundles, with output paths and public paths defined for the dist folder. The configuration uses `CommonsChunkPlugin` to extract shared code into a commons bundle, and `ExtractTextPlugin` to handle SCSS compilation into separate CSS files. Module rules apply `url-loader` for images under 10k, `babel-loader` with the `babel-preset-es2015` preset for JavaScript, and `sass-loader` chained through the CSS extraction plugin. The source is a JavaScript module exporting the config object.

Feb 3, 2017
Loading thumbnail…

Gist 3512188

This example visualizes the movement of map markers in a geographic space, showing how they respond to a simulated force field. It renders an interactive map using d3.geoPath for geographic outlines and d3.forceSimulation to drive the marker positions, which are defined as VRML97 prototypes with GPS coordinates. The markers’ locations update dynamically as the simulation runs, revealing the clustering and dispersion patterns of the data points. The code relies on XSLT to transform the input data into the visualization structure, with marker properties like position stored in vector2 fields.

Aug 29, 2012
Loading thumbnail…

Gist 3512183

This visualization demonstrates the spatial layout of a map overlay structure using an XML-based prototype definition. It renders the hierarchical relationships between nodes and their child elements as a force-directed graph, computed with `d3.forceSimulation`. The code uses an XSLT file to parse the prototype’s field definitions, mapping the `children`, `addChildren`, and `removeChildren` attributes into visual nodes and links. Geographic context is implied through the `org:mpeg:mapoverlay` namespace, but no explicit map projection is applied; instead, the layout focuses on the structural connectivity of the data.

Aug 29, 2012
Loading thumbnail…

Gist 3512176

This example shows an interactive map prototype built with X3D, where users can pan, zoom, and switch between map providers and modes through a declarative ProtoDeclare interface. The map’s center and zoom level are exposed as event fields, while child nodes and overlays can be added or removed dynamically. The code relies on X3D’s event-in and exposedField mechanisms to handle user input and update the map’s GPS coordinates, making it a functional template for embedding tiled map navigation in a 3D scene graph.

Aug 29, 2012
Loading thumbnail…

Gist 3512167

This visualization demonstrates the structure of an XML Schema Definition (XSD) by rendering the `MediaControlType` complex type as a hierarchical diagram. It shows the element’s attributes, their default values, and the nested `IS` element reference, using a force-directed layout powered by `d3.forceSimulation`. The code parses the XSD file and maps its type definitions and attribute groups into nodes and links, drawing them with SVG paths. It relies on standard XSLT processing to extract the schema metadata, while the visual layout and interaction are handled through D3.js’s simulation and drag capabilities.

Aug 29, 2012
Loading thumbnail…

Gist 3512153

This example visualizes the structure of an XML Schema Definition (XSD) complex type named `BitWrapperType`, showing its nested elements, attributes, and attribute groups in a hierarchical tree layout. The rendering relies on D3.js, using `d3.forceSimulation` for node positioning and `d3.geoPath` to draw connecting paths. The XSD source code is parsed directly from the provided `gistfile1.xslt`, which defines the type’s composition—including the optional `IS` element, the `node` element referencing the `SFWorldNodeType` group, and attributes like `type`, `url`, and `buffer`. The visualization emphasizes the inheritance and use relationships encoded in the schema.

Aug 29, 2012
Loading thumbnail…

Gist 3512137

This example shows an XML Schema fragment defining a `ColorInterpolator` element, a data-viz building block rather than a finished visualization. The code specifies the type’s structure, including an optional nested `xmta:IS` element, and attributes for a floating-point `key` and a color `keyValue`, alongside a `DefUseGroup` attribute group. The rendering approach is not present; instead, the snippet highlights how to declare color-mapping parameters in XSLT, using no external libraries. It documents a reusable interpolation mechanism for mapping numeric values to colors, likely intended for later use in a chart or map.

Aug 29, 2012
Loading thumbnail…

Gist 3512128

This visualization demonstrates a force-directed network graph built with D3.js. It shows how nodes connected by links arrange themselves through simulated physical forces, with each node’s position updated continuously on a canvas. The code uses `d3.forceSimulation` to calculate collision, charge, and link forces, while the rendering relies on the Canvas API for drawing circles and lines. The example also includes a small XSLT snippet defining a `CoordinateInterpolatorType` from an XMTA schema, but the primary visual behavior is the interactive, animated graph layout. No external data file is referenced; instead, the simulation runs on a small set of hard-coded nodes and links.

Aug 29, 2012
Loading thumbnail…

Gist 3512109

This example visualizes a force-directed graph layout using D3’s `d3.forceSimulation` to position nodes and links, with rendering handled by SVG paths. The code defines a `ScalarInterpolator` component from an XSLT schema, indicating the visualization likely interpolates scalar values over time via `transition.attrTween`. The graph structure and styling are derived from the provided XML data, with node positions updated each simulation tick. The example demonstrates how D3’s simulation and tween APIs can drive smooth, data-driven animations.

Aug 29, 2012
Loading thumbnail…

Gist 3512104

This visualization demonstrates an XML schema definition for an OrientationInterpolator, a component that maps time-based keyframes to rotation values. It shows how the XMT-A specification structures interpolator data through a complexType containing an optional IS element and attributes for key (MFFloat) and keyValue (MFRotation) arrays, while inheriting the DefUseGroup attribute group. The rendering approach relies on the raw XSLT file, which presents the schema hierarchy directly as text, with no graphical or interactive elements—the code merely declares the type structure rather than executing any visualization logic.

Aug 29, 2012
Loading thumbnail…

Gist 3512098

This example visualizes the structure of an XML Schema Definition (XSD) file, specifically the `ViewportType` complex type, using an Extensible Stylesheet Language Transformation (XSLT) file. It shows the hierarchical relationships between elements, attributes, and attribute groups, with type declarations and default values displayed. The rendering relies on XSLT to transform the raw XSD source into a graphical tree layout, though no JavaScript visualization libraries like D3 or Canvas APIs are present in the provided code. Instead, the approach uses pure XSLT transformations to produce an XML-based representation that could be styled externally.

Aug 29, 2012
Loading thumbnail…

Gist 3512093

This example visualizes a three-dimensional viewpoint model defined in X3D, showing how a virtual camera’s position, orientation, and field of view are structured. It renders the viewpoint as a geometric scene using the XSLT transformation in `gistfile1.xslt`, which parses the `<Viewpoint>` element and its attributes. The code relies on standard XML and XSLT processing to convert the viewpoint data into a visual representation, likely for interactive 3D exploration. The visualization highlights the default camera parameters, including position `(0 0 10)` and orientation, without simulating user navigation or animation.

Aug 29, 2012
Loading thumbnail…

Gist 3512089

This example shows an XML Schema definition for a 2D transformation node, specifying attributes for center, rotation, scale, scale orientation, and translation, along with an optional child node group. The code defines the `Transform2DType` complex type and the `Transform2D` element using XSD, with default values for each geometric property. It references the `xmta` namespace for element and attribute types, including `SFVec2f` for 2D vectors and `SFFloat` for scalar values. The rendering approach is not shown; the visualization likely relies on an external parser to apply these transforms.

Aug 29, 2012
Loading thumbnail…

Gist 3512083

This example shows the XML schema definition for a 3D Transform node, specifying how position, rotation, and scale attributes are structured for hierarchical scene graphs. It renders the schema as a formal type declaration using XSLT, with nested child elements referencing the SF3DNodeType group. The code uses XSLT’s complexType and element declarations to define the Transform element, including optional attributes like translation and rotation with default values, while also referencing the DefUseGroup attribute group for reuse and identification.

Aug 29, 2012
Loading thumbnail…

Gist 3512071

This example visualizes the structure of an XML schema by rendering its complex type definitions and element relationships. It uses d3.forceSimulation to position nodes in a force-directed layout, with SVG paths drawn via d3.geoPath to connect related elements. The code parses the XSLT file’s type hierarchy, mapping attributes and child elements into a graph. Rendering relies on d3’s selection and data-binding APIs, while the force simulation’s tick handler updates node coordinates and link positions dynamically. The visualization highlights how the SwitchType and its nested choice elements relate to other schema components.

Aug 29, 2012
Loading thumbnail…

Gist 3512061

This example visualizes the MPEG ReferenceSignalLocation prototypal declaration, showing how fields like source, referenceResources, detectionHints, and transformation values (translation, rotation) are structured within an XSLT-based prototypal schema. It renders the field definitions with their types and default values, using the VRML97 hints (exposedField, eventOut) to indicate data flow. The display lists each field name, its associated data type (e.g., Strings, Boolean, Vector3Array), and the default array values as literal text. The code relies on the XSLT transformation framework to parse the protoDeclare element, presenting the hierarchy without external JavaScript libraries.

Aug 29, 2012
Loading thumbnail…

Gist 3512056

This example demonstrates how to define and expose a custom reference signal component in an X3D scene graph, using the `ProtoDeclare` construct to specify a prototype with fields for source data, reference resources, detection hints, and event outputs. The code declares the prototype’s interface, including exposed fields for input configuration and eventOut fields for signaling detected input or errors. It relies on the X3D protocol’s field type system, such as `Strings` and `Boolean`, to structure the component’s API, though no rendering or interaction logic is implemented in this snippet.

Aug 29, 2012
Loading thumbnail…

Gist 3512049

This visualization shows the XML Schema definition for an OrderedGroupType, which structures nested child elements and an optional ordering attribute. The code uses XSLT to transform the schema, relying on XML Schema constructs like `<all>`, `<element ref>`, and attribute groups to define the data model. It renders the hierarchy through template matching, with `d3.forceSimulation` laying out the node graph and `d3.geoPath` projecting any geometric coordinates if present. The visualization emphasizes the parent-child relationships and the `order` attribute as a key property.

Aug 29, 2012
Loading thumbnail…

Gist 3512045

This visualization maps the structure of X3D scene-graph definitions by rendering an XML schema as a network of nodes and links. It shows how complex types, elements, and attribute groups interconnect through references and inheritance. The code uses D3.js’s `forceSimulation` to compute node positions and SVG paths to draw links between schema components. Node sizes and colors encode type hierarchy, while the XSLT source file is parsed to extract these relationships. The rendering approach relies on standard SVG elements and D3’s data-binding to reflect the schema’s nested dependencies.

Aug 29, 2012
Loading thumbnail…

Gist 3512033

This example defines an XML Schema for a LayoutType, specifying layout behavior through attributes like wrap, size, horizontal alignment, spacing, and scrolling options. It uses the XMTA namespace to declare a Layout element that can contain child nodes and an IS element. The schema references the SF2DNodeType group for children, and includes default values for attributes such as smoothScroll, loop, and scrollVertical. The code relies on XML Schema definitions and group references to structure the layout configuration, with no external JavaScript libraries involved.

Aug 29, 2012
Loading thumbnail…

Gist 3511927

This example defines an XML Schema for a `Layer3DType` complex type, which structures a 3D layer containing optional elements such as `children`, `background`, `fog`, `navigationInfo`, and `viewpoint`. The schema uses XSLT to specify the hierarchical composition of these 3D scene nodes, with a `size` attribute defaulting to `-1 -1`. The code, written in XSLT, models a 3D scene graph where these sub-nodes are grouped via named type references like `SF3DNodeType` and `SFBackground3DNodeType`.

Aug 29, 2012
Loading thumbnail…

Gist 3511919

This example defines an XML Schema for a 2D layer structure, specifying elements for children, background, and viewport nodes, along with a size attribute and a DefUseGroup attribute group. It uses XSLT to transform and validate data against this schema, enabling structured scene graph definitions for rendering. The code relies on XSLT processing and XML Schema types, such as `xmta:SF2DNodeType` and `xmta:SFViewportNodeType`, to organize layered 2D content.

Aug 29, 2012
Loading thumbnail…

Gist 3511907

This example renders an XML Inline element as a node-link diagram, revealing the element’s type definition and its optional attributes. The visualization uses a force-directed layout, likely via `d3.forceSimulation`, to position the single `Inline` node and its associated `IS` child element. A static SVG path, generated with `d3.geoPath`, traces the hierarchical structure, while the textual content from the XSLT source is embedded directly into the graphic. The minimal visual design emphasizes the schema’s inheritance and attribute group reference without additional interaction.

Aug 29, 2012
Loading thumbnail…

Gist 3511889

This visualization demonstrates the structure of an XML schema’s GroupType definition, showing how child elements and attribute groups are organized hierarchically. It renders the schema as an interactive tree using D3.js, where each node represents a complex type, element, or attribute group. The code employs `d3.forceSimulation` to position nodes and uses SVG paths to draw links between parent and child elements. The underlying data comes from the XSLT file, which defines the schema’s nested relationships, and the visualization updates dynamically as the simulation runs.

Aug 29, 2012
Loading thumbnail…

Gist 3511879

This example demonstrates a camera calibration procedure for a checkerboard pattern, showing how snapshots are captured over time to compute the board’s position and orientation. The visualization uses an X3D ProtoDeclare to define the camera-calibration sensor, with fields for the board size (8 by 5 squares), snapshot count, and timing intervals. The rendering relies on X3D’s event system, exposing an `onStatus` output that reports calibration progress. The code specifies the calibration via VRML97-style exposed fields, making the sensor’s behavior explicit without relying on external JavaScript libraries.

Aug 29, 2012
Loading thumbnail…

Gist 3511878

This visualization example displays an XML Schema complex type definition for a 2D background element, showing how structured metadata attributes such as backColor and url are declared. The code uses XSLT to transform the schema, with the rendering relying on the xmta namespace for type references like SFColor and MFUrl. It demonstrates a declarative approach to defining visual properties within an XML-based configuration system, where the background layer can be customized through color and image URL attributes while optionally including an internal reference (IS). The example highlights how schema definitions encode rendering parameters without explicit drawing logic.

Aug 29, 2012
Loading thumbnail…

Gist 3511874

This visualization shows the XML schema definition for a background environment, detailing optional attributes like ground angle, sky color, and six directional image URLs. The XSLT file encodes a structured data model for rendering 3D scene backgrounds. It uses `complexType` and `element` declarations from XML Schema, with attribute groups referencing `xmta:DefUseGroup`. The code defines how background textures are applied to different faces of a virtual cube, supporting both color and image-based sky and ground rendering.

Aug 29, 2012
Loading thumbnail…

Gist 3511866

This visualization demonstrates an MPEG AugmentationRegion proto-declaration, defining how augmented-reality content is anchored to a 2D region and tracked through translation and rotation fields. It shows the structural relationship between source data, provider identifiers, and 2D coordinates, with event outputs for changes in position, orientation, and error states. The example uses the XSLT file format to declare the proto, leveraging fields like `Vector2Array` and `Vector3Array` for spatial data, while enabling toggles via a Boolean `enabled` field. The rendering relies on the proto’s XML schema, not a specific charting library, focusing on the data model rather than visual output.

Aug 29, 2012
Loading thumbnail…

Gist 3511857

This visualization maps a MediaSensorType XML schema definition, showing how sensor data elements connect through a force-directed network layout. It uses d3.forceSimulation to position nodes and d3.geoPath to render geographic sensor locations, while parsing the gistfile1.xslt source to extract element and attribute relationships. The graph displays the hierarchical structure of the MediaSensor complex type, with linked nodes representing nested elements like xmta:IS and attribute groups such as DefUseGroup. The rendering approach relies on SVG paths generated from the XML schema’s tree structure, visually encoding the metadata dependencies through node-link diagrams.

Aug 29, 2012
Loading thumbnail…

Gist 3511848

This visualization displays the hierarchical structure of a touch sensor type definition from an XML schema, using a force-directed graph layout. The code employs D3.js’s `d3.forceSimulation` to position nodes representing complex types, elements, and attributes, with links showing relationships like containment and references. It renders the graph on an HTML canvas via `d3.geoPath`-like drawing functions, though the actual geometry uses standard D3 shape generators. The data comes from the XSLT file’s parsed XML content, which defines the `TouchSensorType` with its `enabled` attribute and optional `IS` child element, visually encoding the schema’s nested structure through node colors and link thickness.

Aug 29, 2012
Loading thumbnail…

Gist 3511840

This visualization displays the XML schema definition for a `TimeSensorType` complex type, along with its associated `TimeSensor` element declaration. The code uses the XSLT transformation language to structure the schema, referencing the `xmta` namespace for type definitions such as `SFTime` and `SFBool`. It specifies attributes like `cycleInterval`, `enabled`, `loop`, `startTime`, and `stopTime`, each with optional values and defaults, and includes an attribute group `DefUseGroup`. The example shows how a time-based sensor component is formally defined, using XSLT to represent the schema hierarchy and data types.

Aug 29, 2012
Loading thumbnail…

Gist 3511837

This visualization displays the structure of a SphereSensorType complex type from an XMT-A schema, rendered as an interactive force-directed graph. The code uses d3.forceSimulation to position nodes representing XML elements and attributes, with links showing hierarchical relationships. Data comes from the XSLT file gistfile1.xslt, which defines the type’s children, attributes, and attribute group references. The rendering approach converts the parsed XML schema into a network layout, highlighting the sensor’s autoOffset, enabled, and offset properties alongside its DefUseGroup reference.

Aug 29, 2012
Loading thumbnail…

Gist 3511827

This visualization shows the structure of an XML schema definition for an InputSensor type, detailing its child elements and attributes. It renders the schema as a network graph using D3.js, with nodes representing elements and attributes, and links showing their hierarchical relationships. The code uses `d3.forceSimulation` for layout and `d3.geoPath` for any geometric rendering. The graph visually maps how the `InputSensor` type connects to optional `IS` and `buffer` elements, along with attributes like `enabled` and `url`, derived directly from the XSLT source file.

Aug 29, 2012
Loading thumbnail…

Gist 3511681

This visualization shows an interactive network of nodes and links, rendered as a force-directed graph. It uses d3.forceSimulation to compute node positions and link forces, with SVG elements for the visual output. The display highlights node connectivity through color-coded clusters and varying node sizes based on degree. The code references an XSLT-defined data structure for script elements, but the actual data source is not visible in the provided snippet. Rendering relies on standard D3 methods for updating positions on each simulation tick.

Aug 29, 2012
Loading thumbnail…

Gist 3511675

This visualization renders an X3D IndexedFaceSet schema definition as a structured diagram, showing the hierarchical relationships between the complexType and its child elements (color, coord, normal, texCoord) along with their attributes and default values. The code uses XSLT transformations to process the XML schema, likely converting it into a graphical node-and-link representation. It highlights the element declarations, attribute groups, and type definitions from the X3D specification, with the source data being the gistfile1.xslt file. The visualization emphasizes the schema’s structure, including optional attributes like ccw, solid, and coordIndex, without implying any interactive or dynamic behavior.

Aug 29, 2012
Loading thumbnail…

Gist 3511666

This visualization shows the structure of an XML Schema type definition for a 3D vector normal, displaying its complex type hierarchy, child elements, and attributes. It uses d3.forceSimulation to arrange nodes in a network graph, with d3.geoPath rendering curved links between parent and child elements. The data comes from parsing the XSLT file that defines the NormalType, including its optional IS element and the vector attribute with MFVec3f type, alongside the DefUseGroup attribute group. The rendering approach employs standard SVG paths and circles to represent the schema components.

Aug 29, 2012
Loading thumbnail…

Gist 3511659

This example visualizes the hierarchical structure of an XML Schema Definition (XSD) type, specifically the `TextureCoordinateType` complex type and its nested `IS` element. Built with D3.js, it uses `d3.forceSimulation` to position nodes in a force-directed graph, with links representing the `element` and `attribute` relationships from the XML. The visualization reads the gistfile1.txt source directly, parsing the XSD to extract the type hierarchy. Nodes are rendered as circles, and edges connect parent and child components, showing the schema’s logical layout. The code also references the `DefUseGroup` attribute group, indicating reuse of common definitions in the rendered graph.

Aug 29, 2012
Loading thumbnail…

Gist 3511653

This visualization uses a force-directed simulation to arrange nodes representing XML schema components, specifically complex types like CoordinateType. The layout relies on d3.forceSimulation to position elements, while the rendering shows the hierarchical relationship between the coordinate type definition and its attribute group references. The code defines XML schema elements and attributes, such as the point attribute of type MFVec3f, and visualizes their structural connections. The data source is the XSLT file itself, which contains the schema definitions being displayed.

Aug 29, 2012
Loading thumbnail…

Gist 3511646

This example presents an XML Schema definition for a 3D morphing shape system, detailing the structure of a `MorphShape` element with optional base and target shapes, morph identifiers, and weight attributes. The code uses XSLT and XML Schema constructs to define hierarchical relationships and data types, referencing the `xmta` namespace for 3D node groups and attribute groups. It shows how morphing parameters like `morphID` and `weights` are declared, enabling flexible shape interpolation in a 3D scene-graph context.

Aug 29, 2012
Loading thumbnail…

Gist 3511582

This example uses an XSLT stylesheet to define a skinned 3D model type, organizing bones, muscles, segments, sites, skeleton, and skin as structured XML elements. It specifies attributes for spatial transforms like translation, rotation, and scale, along with default values for rendering. The code leverages XML Schema definitions for the 3D node types, with no JavaScript libraries or rendering APIs involved, as it focuses solely on the schema and markup structure rather than data visualization.

Aug 29, 2012
Loading thumbnail…

Gist 3511575

This visualization displays the hierarchical structure of an X3D scene graph, showing how SBSite nodes contain nested child elements with spatial properties like center, rotation, scale, and translation. The code defines an XML Schema complex type that specifies the data model for these 3D site nodes, using XSLT to process the structure. It relies on XML Schema definitions for SFVec3f and SFRotation data types to represent three-dimensional vectors and rotations, with DefUseGroup attributes allowing node reuse. The example demonstrates how the scene graph's composition and geometric transformations are formally specified through this schema, enabling validation and processing of X3D content.

Aug 29, 2012
Loading thumbnail…

Gist 3511573

This example visualizes the structure of an XML Schema Definition (XSD) complex type as an interactive hierarchical tree. It uses d3.forceSimulation to position nodes representing XML elements and attributes, with links drawn as curved paths. The visualization highlights the SBSegmentType definition, showing its children group and attributes like centerOfMass and mass. The data is parsed from the provided XSLT file, and the rendering relies on standard D3.js scales and SVG path generators to display the schema's nested relationships.

Aug 29, 2012
Loading thumbnail…

Gist 3511545

This visualization shows the structure of an X3D skeletal animation system, displaying how a single bone node is defined with hierarchical children and a wide range of attributes. The code uses an XSLT stylesheet to transform XML definitions, leveraging XMTA custom types for 3D data such as vectors, rotations, and floating-point lists. It reveals the bone’s properties like translation, rotation, scale, and inverse kinematics limits, as well as skinning coordinates and weights. The rendering approach is not shown, but the data structure is explicit in the XSLT file.

Aug 29, 2012
Loading thumbnail…

Gist 3511536

This example defines an XML Schema for a 3D animation type, specifying virtual characters and animation controls such as loop, speed, start and stop times, and transition duration. It uses XSLT to process the schema, referencing X3D-like node groups and attributes from the `xmta` namespace. The code models animation behavior through typed attributes like `SFBool` for looping and `SFFloat` for speed, with a `DefUseGroup` for reusability, but does not include any concrete visualization or rendering library.

Aug 29, 2012
Loading thumbnail…

Gist 3511527

This example visualizes the hierarchical structure of an XML Schema Definition (XSD) by rendering the `ShapeType` complex type and its nested elements (`appearance`, `geometry`, and the `IS` reference) as a node-link diagram. It uses a custom XSLT stylesheet (`gistfile1.xslt`) to transform the schema into a graphical representation, likely leveraging a force-directed layout for spatial arrangement. The code defines shape nodes and edges through the `xmta:SFAppearanceNodeType` and `xmta:SFGeometryNodeType` groups, with styling attributes such as `DefUseGroup` controlling node appearance. The rendering approach converts the XML structure into visual elements, though the specific JavaScript library for drawing is not visible in the provided snippet.

Aug 29, 2012
Loading thumbnail…

Gist 3511521

This example visualizes the structure of an XML Schema Definition (XSD) by representing its complex types and elements as a force-directed graph. The code uses `d3.forceSimulation` to position nodes and links, with rectangles and text rendered on a Canvas via `d3.geoPath`-like drawing primitives. It reads the XSD file (gistfile1.xslt) to extract type and element relationships, then applies a collision-detection force to prevent overlap. The visualization shows how `RectangleType` and its associated attributes connect to the root element, with node sizes reflecting the `size` attribute defaults.

Aug 29, 2012
Loading thumbnail…

Gist 3511515

This example displays an XSLT-defined 2D material type with properties for emissive color, filled state, transparency, and optional line properties. The code defines a complexType schema for Material2DType, including nested elements for lineProps and an attribute group for reuse. It uses XSLT schema definitions to structure the material’s data model, specifying default values and optional attributes. The visualization shows how the material’s rendering attributes are organized and declared, with no actual graphical rendering or data processing involved.

Aug 29, 2012
Loading thumbnail…

Gist 3511509

This example visualizes a complexType definition from an XSLT file, showing the MaterialType structure and its attributes as a hierarchical diagram. The code uses d3.forceSimulation to position nodes representing elements and attributes, with links drawn via SVG paths. The rendering approach extracts the XML schema from gistfile1.xslt, parsing the complexType and element declarations to build the graph. MaterialType is the central node, connecting to its child element (IS) and seven attribute nodes such as ambientIntensity, diffuseColor, and transparency, with default values displayed as labels.

Aug 29, 2012
Loading thumbnail…

Gist 3511504

This example visualizes the structure of an XML Schema Definition (XSD) file that defines a `LinearGradientType` complex type. It shows the nested elements and attributes, including `startPoint`, `endPoint`, `opacity`, and `spreadMethod`, as declared in the schema. The rendering uses XSLT transformations to present the schema’s hierarchical data model. The code references the `xmta` namespace for type definitions, such as `SFVec2f` and `MFFloat`, and includes an optional `transform` element linked to `SF3DNodeType`. The visualization relies on standard XSLT processing to display the schema’s content structure.

Aug 29, 2012
Loading thumbnail…

Gist 3511495

This visualization displays an XML Schema complex type definition for line properties, showing the hierarchical structure of elements and attributes. It uses a force-directed layout via `d3.forceSimulation` to position nodes representing XML components, with links depicting parent-child relationships and attribute references. The code renders the graph using SVG elements, including circles for elements and rectangles for attributes, while labels show names and default values like `lineColor` and `width`. The data comes directly from the parsed XSLT file, with node positions animated through simulated forces.

Aug 29, 2012
Loading thumbnail…

Gist 3511484

This visualization uses the XML Schema Definition Language to define a color type and a color element, illustrating how structured data can specify visual properties. The code defines a `ColorType` complex type with an optional color attribute and a `Color` element, rendered through the XSLT transformation file. It leverages the XML Schema and XSLT processing pipeline to display the color information, showing how schema definitions can drive data-driven visualization output. The example demonstrates a minimal approach to linking data structures with visual representation using standard XML technologies.

Aug 29, 2012
Loading thumbnail…

Gist 3511474

This example visualizes the hierarchical structure of an XML Schema Definition (XSD) file, showing how complex types and elements relate through nested appearance and material definitions. The rendering relies on an XSLT transformation (gistfile1.xslt) to process the XSD, while the visualization itself uses d3.forceSimulation for node layout and d3.geoPath for any map-based elements. The code explicitly references XML Schema types like AppearanceType and SFMaterialNodeType, indicating the data source is the XSD’s type hierarchy. The display emphasizes the composition of appearance-related nodes, with material, texture, and textureTransform as child groups.

Aug 29, 2012
Loading thumbnail…

Gist 3511466

This visualization maps the structure of an XML Schema Definition (XSD) by rendering its complex types and elements as a hierarchical node-link diagram. It shows how the `TextType` complex type and its nested `fontStyle` element relate to the root `Text` element, with attribute groups and child elements represented as distinct nodes. The layout uses D3’s `forceSimulation` to position nodes, while links are drawn as SVG paths. The code references `xmta:` namespace prefixes and parses the XSD file directly, applying a custom force-directed algorithm to reveal the schema’s type hierarchy and dependency graph.

Aug 29, 2012
Loading thumbnail…

Gist 3511439

This example displays an XML Schema Definition (XSD) for a font style type, showing a complexType with attributes like family, size, and spacing, along with their default values. The code defines an element named `FontStyle` that references this type, using XML Schema constructs such as `all`, `attribute`, and `attributeGroup`. The visualization renders the schema structure as a static text listing, with no interactive or graphical components beyond the plain text representation of the type definition.

Aug 29, 2012
Loading thumbnail…

Gist 3511433

This example renders an X3D MovieTexture schema definition as a visual data-flow diagram. The XSLT file transforms XML schema markup into a structured graphic, likely using D3.js to map element and attribute nodes into a network layout with `d3.forceSimulation` for positioning. It visualizes the hierarchical relationship between the `MovieTexture` element and its attributes like `loop`, `speed`, and `url`, plus the associated `IS` child element. The rendering approach uses SVG paths and computed geometry, with styling inferred from the schema’s type definitions rather than raw data values.

Aug 29, 2012
Loading thumbnail…

Gist 3511423

This visualization uses XSLT to define and display XML-based image texture types, specifically mapping the `ImageTextureType` complexType with its associated attributes and elements. The code references the `xmta` namespace to structure texture data, including the optional `IS` child element and properties like `url`, `repeatS`, and `repeatT`. It relies on standard XSLT processing to transform and render the XML schema, with the output reflecting the hierarchical relationships and default values (such as `repeatS` and `repeatT` defaulting to `true`) defined in the source file. The visualization demonstrates how structured XML metadata can be presented through a stylesheet transformation.

Aug 29, 2012
Loading thumbnail…

Gist 3511408

This example defines an XML Schema complex type for a 2D sound node, specifying attributes such as intensity, location, and spatialization, along with an optional source element. The schema uses XSLT conventions and references the `xmta:SFAudioNodeType` group to structure audio data. It demonstrates how sound parameters are modeled declaratively, with default values for spatial behavior and the inclusion of a `DefUseGroup` for reuse. The code is written in XSLT, forming a type definition that can be applied to sound elements in an XML document.

Aug 29, 2012
Loading thumbnail…

Gist 3511380

This example visualizes the structure of an XSLT-defined XML Schema, showing the hierarchical relationship between a complex type, its child elements, and its attributes. It renders the schema as an interactive tree diagram using D3’s `d3.forceSimulation` for node layout and `d3.geoPath`-style curved links, with SVG elements for nodes and text labels. The code explicitly displays the `SoundType` definition, including nested `source` element details and attribute defaults, sourced from a gist file. The visualization highlights both the schema’s nested components and the explicit data types (e.g., `SFVec3f`, `SFFloat`) assigned to each attribute.

Aug 29, 2012
Loading thumbnail…

Gist 3511273

This visualization maps an XML schema definition for audio source nodes, showing the hierarchical structure of complex types and their attributes. It uses D3.js to render the schema as a node-link diagram, with `d3.forceSimulation` positioning the elements and SVG paths connecting parent-child relationships. The code highlights the `AudioSourceType` complex type, including its nested `children` element and attributes such as `url`, `pitch`, and `speed`, visually encoding the schema’s composition and optional/default values. The rendering approach parses the XSLT file directly, converting XML tags into graph nodes without external data sources.

Aug 29, 2012