references/source-index/official-implementation-docs.md

# Official Implementation Docs

## What Problem This Solves

This index centralizes the official implementation references used throughout the plugin.

## When to Use It

Use this when a skill needs an official API or product reference rather than a secondary explanation.

## Key Takeaways

- Prefer official docs first for library behavior, API shape, and current feature support.
- Use grammar-first tools when they can express the chart cleanly; route to lower-level APIs only when needed.
- Keep implementation guidance current by linking to primary docs instead of restating APIs in full.
- For scroll-driven stories, prefer official platform and library docs for IntersectionObserver, CSS scroll-driven animations, scroll controllers, motion preferences, and media loading behavior.
- For mobile visualizations, prefer official docs for Pointer Events, media queries, VisualViewport, Network Information, online/offline events, WebXR, camera, motion, vibration, notifications, permissions, and WCAG 2.2 touch-target guidance.

## Common Mistakes

- Basing implementation decisions on blog posts when official APIs differ.
- Mixing outdated examples from different major versions.

## Adjacent Skills

- `../../skills/grammar-of-graphics-and-declarative-visualization/SKILL.md`
- `../../skills/d3-data-visualization/SKILL.md`
- `../../skills/reports-pdfs-and-slide-automation/SKILL.md`
- `../../skills/node-link-and-diagram-layout/SKILL.md`
- `../../skills/uml-and-software-architecture-visualization/SKILL.md`

## Source Links

- [D3 API](https://d3js.org/api)
- [D3 axis API](https://d3js.org/d3-axis)
- [OMG UML 2.5.1](https://www.omg.org/spec/UML/2.5.1/About-UML)
- [OMG XML Metadata Interchange (XMI)](https://www.omg.org/spec/XMI)
- [OMG BPMN 2.0](https://www.omg.org/spec/BPMN/2.0/)
- [PlantUML](https://plantuml.com/)
- [PlantUML Language Reference Guide](https://pdf.plantuml.net/PlantUML_Language_Reference_Guide_en.pdf)
- [Mermaid syntax reference](https://mermaid.js.org/intro/syntax-reference)
- [Graphviz DOT language](https://graphviz.org/doc/info/lang.html)
- [Graphviz layout engines](https://graphviz.org/docs/layouts/)
- [Graphviz `dot`](https://graphviz.org/docs/layouts/dot/)
- [Graphviz `neato`](https://graphviz.org/docs/layouts/neato/)
- [Graphviz `fdp`](https://graphviz.org/docs/layouts/fdp/)
- [Graphviz `sfdp`](https://graphviz.org/docs/layouts/sfdp/)
- [Graphviz `twopi`](https://graphviz.org/docs/layouts/twopi/)
- [Graphviz overlap removal](https://graphviz.org/docs/attrs/overlap/)
- [D2 documentation](https://d2lang.com/)
- [Structurizr DSL](https://docs.structurizr.com/dsl)
- [C4 model](https://c4model.com/)
- [Kroki documentation](https://docs.kroki.io/kroki/)
- [DBML syntax](https://dbml.dbdiagram.io/docs/)
- [React Flow terms and definitions](https://reactflow.dev/learn/concepts/terms-and-definitions)
- [Cytoscape.js documentation](https://js.cytoscape.org/)
- [Eclipse ELK documentation](https://eclipse.dev/elk/documentation.html)
- [Eclipse ELK layout options](https://eclipse.dev/elk/reference/options.html)
- [ELK Layered](https://eclipse.dev/elk/reference/algorithms/org-eclipse-elk-layered.html)
- [ELK crossing minimization strategy](https://eclipse.dev/elk/reference/options/org-eclipse-elk-layered-crossingMinimization-strategy.html)
- [ELK port constraints](https://eclipse.dev/elk/reference/options/org-eclipse-elk-portConstraints.html)
- [ELK edge routing](https://eclipse.dev/elk/reference/options/org-eclipse-elk-edgeRouting.html)
- [ELK Libavoid routing](https://eclipse.dev/elk/blog/posts/2022/22-11-17-libavoid.html)
- [Sprotty documentation](https://sprotty.org/docs/introduction/)
- [JointJS documentation](https://docs.jointjs.com/)
- [GoJS](https://go.js.org/)
- [MDN: SVG shape-rendering](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering)
- [MDN: SVG vector-effect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect)
- [MDN: CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
- [MDN: CanvasRenderingContext2D.isPointInPath](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath)
- [MDN: CanvasRenderingContext2D.isPointInStroke](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInStroke)
- [MDN: CanvasRenderingContext2D.drawFocusIfNeeded](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded)
- [MDN: Path2D](https://developer.mozilla.org/en-US/docs/Web/API/Path2D)
- [MDN: HTMLCanvasElement.getContext](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext)
- [MDN: Optimizing canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)
- [MDN: Window.devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
- [MDN: VisualViewport.scale](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/scale)
- [MDN: VisualViewport](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport)
- [MDN: @media pointer](https://developer.mozilla.org/en-US/docs/Web/CSS/%40media/pointer)
- [MDN: @media any-pointer](https://developer.mozilla.org/en-US/docs/Web/CSS/%40media/any-pointer)
- [MDN: touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)
- [MDN: Navigator.onLine](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine)
- [MDN: NetworkInformation](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation)
- [MDN: Window online event](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event)
- [MDN: Window offline event](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event)
- [MDN: MediaDevices.getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
- [MDN: WebXR Device API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)
- [MDN: WebXR Augmented Reality Module](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown#starting_up_a_webxr_session)
- [MDN: DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent)
- [MDN: Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)
- [MDN: Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)
- [web.dev: Permissions best practices](https://web.dev/articles/permissions-best-practices)
- [MDN: Pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
- [MDN: Element.setPointerCapture](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
- [MDN: PointerEvent.getCoalescedEvents](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/getCoalescedEvents)
- [MDN: Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
- [MDN: CSS scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)
- [MDN: Scroll-driven animation timelines](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations/Timelines)
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/%40media/prefers-reduced-motion)
- [MDN: OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)
- [MDN: OffscreenCanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D)
- [MDN: WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)
- [MDN: WebGLRenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)
- [MDN: WebGL2RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext)
- [MDN: WebGL best practices](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices)
- [MDN: WEBGL_lose_context](https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context)
- [Three.js Docs](https://threejs.org/docs/)
- [Three.js BufferGeometry](https://threejs.org/docs/pages/BufferGeometry.html)
- [Three.js InstancedMesh](https://threejs.org/docs/pages/InstancedMesh.html)
- [Three.js Points](https://threejs.org/docs/pages/Points.html)
- [Three.js ShaderMaterial](https://threejs.org/docs/pages/ShaderMaterial.html)
- [luma.gl](https://luma.gl/docs)
- [regl](https://regl-project.github.io/regl/)
- [TWGL](https://twgljs.org/docs/)
- [PixiJS Renderers](https://pixijs.com/8.x/guides/components/renderers)
- [PixiJS ParticleContainer](https://pixijs.com/8.x/guides/components/scene-objects/particle-container)
- [sigma.js Renderers](https://www.sigmajs.org/docs/advanced/renderers/)
- [Scrollama](https://github.com/russellsamora/scrollama)
- [GSAP ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)
- [Motion useScroll](https://motion.dev/docs/react-use-scroll)
- [Observable Plot](https://observablehq.com/plot/what-is-plot)
- [Vega-Lite](https://vega.github.io/vega-lite/)
- [deck.gl](https://deck.gl/docs)
- [deck.gl Layers](https://deck.gl/docs/api-reference/layers)
- [deck.gl Aggregation Layers](https://deck.gl/docs/api-reference/aggregation-layers/overview)
- [deck.gl TripsLayer](https://deck.gl/docs/api-reference/geo-layers/trips-layer)
- [deck.gl ArcLayer](https://deck.gl/docs/api-reference/layers/arc-layer)
- [deck.gl PathLayer](https://deck.gl/docs/api-reference/layers/path-layer)
- [deck.gl Animations and Transitions](https://deck.gl/docs/developer-guide/animations-and-transitions)
- [deck.gl with MapLibre](https://deck.gl/docs/developer-guide/base-maps/using-with-maplibre)
- [deck.gl with Google Maps](https://deck.gl/docs/developer-guide/base-maps/using-with-google-maps)
- [Leaflet Documentation](https://leafletjs.com/reference.html)
- [Leaflet GeoJSON Tutorial](https://leafletjs.com/examples/geojson/)
- [Leaflet Layers Control Tutorial](https://leafletjs.com/examples/layers-control/)
- [MapLibre GL JS](https://maplibre.org/projects/gl-js/)
- [MapLibre GL JS Examples](https://maplibre.org/maplibre-gl-js/docs/examples/)
- [MapLibre Style Spec: Sources](https://maplibre.org/maplibre-style-spec/sources/)
- [MapLibre Style Spec: Layers](https://maplibre.org/maplibre-style-spec/layers/)
- [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/)
- [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript)
- [Google Maps JavaScript API: Layers](https://developers.google.com/maps/documentation/javascript/layers)
- [Google Maps JavaScript API: Data Layer](https://developers.google.com/maps/documentation/javascript/datalayer)
- [Google Maps JavaScript API: deck.gl Overlay View](https://developers.google.com/maps/documentation/javascript/deckgl-overlay-view)
- [OpenLayers](https://openlayers.org/)
- [OpenLayers Examples](https://openlayers.org/en/latest/examples/)
- [ArcGIS Maps SDK for JavaScript](https://developers.arcgis.com/javascript/)
- [ArcGIS Maps SDK for JavaScript: Layers](https://developers.arcgis.com/javascript/latest/layers/)
- [ArcGIS Maps SDK for JavaScript: Visualization](https://developers.arcgis.com/javascript/latest/visualization/)
- [Azure Maps Documentation](https://learn.microsoft.com/en-us/azure/azure-maps/)
- [Azure Maps Web SDK: Create a data source](https://learn.microsoft.com/en-us/azure/azure-maps/create-data-source-web-sdk)
- [HERE Maps API for JavaScript](https://docs.here.com/maps-api-for-js/docs/introduction-maps-api-for-javascript)
- [CesiumJS](https://cesium.com/platform/cesiumjs/)
- [CesiumJS Imagery Layers](https://cesium.com/learn/cesiumjs-learn/cesiumjs-imagery/)
- [Babylon.js Specifications](https://www.babylonjs.com/specifications/)
- [Plotly JavaScript](https://plotly.com/javascript/)
- [Plotly WebGL vs SVG](https://plotly.com/javascript/webgl-vs-svg/)
- [Apache ECharts Animation Transition](https://echarts.apache.org/handbook/en/how-to/animation/transition/)
- [ECharts GL](https://ecomfe.github.io/echarts-gl/)
- [DHTMLX Gantt docs](https://docs.dhtmlx.com/gantt/)
- [DHTMLX Gantt keyboard navigation](https://docs.dhtmlx.com/gantt/guides/keyboard-navigation/)
- [Bryntum Gantt features](https://bryntum.com/products/gantt/features/)
- [Bryntum Gantt accessibility guide](https://bryntum.com/products/gantt/docs-llm/guide/Gantt/advanced/a11y.md)
- [Highcharts Gantt docs](https://www.highcharts.com/docs/gantt/getting-started-gantt)
- [Highcharts accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module)
- [Frappe Gantt docs](https://frappe.io/gantt)
- [FullCalendar resource timeline](https://fullcalendar.io/docs/timeline-view)
- [Microsoft Project XML Data Interchange Schema](https://learn.microsoft.com/en-us/office-project/xml-data-interchange/project-xml-data-interchange-schema-reference)
- [Microsoft Project XML structure](https://learn.microsoft.com/en-us/office-project/xml-data-interchange/project-elements-and-xml-structure)
- [Microsoft Project supported file formats](https://support.microsoft.com/en-gb/office/file-formats-supported-by-project-desktop-face808f-77ab-4fce-9353-14144ba1b9ae)
- [Microsoft Graph Planner overview](https://learn.microsoft.com/en-us/graph/planner-concept-overview)
- [Jira issue search API](https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issue-search/)
- [Jira issue fields API](https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issue-fields/)
- [Jira issue links API](https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issue-links/)
- [Jira issue linking model](https://developer.atlassian.com/cloud/jira/platform/issue-linking-model/)
- [GitHub Projects data export](https://docs.github.com/en/issues/planning-and-tracking-with-projects/managing-your-project/exporting-your-projects-data)
- [GitHub GraphQL ProjectV2 objects](https://docs.github.com/en/graphql/reference/objects)
- [GitHub milestones API](https://docs.github.com/en/rest/issues/milestones)
- [Oracle P6 import/export formats](https://docs.oracle.com/cd/F25600_01/English/admin/p6_pro_importing_exporting/import_export_file_formats.htm)
- [Oracle Primavera Cloud activity relationship API](https://docs.oracle.com/en/industries/construction-engineering/primavera-cloud/rest-api/api-activity-relationship.html)
- [Smartsheet predecessor schema](https://developers.smartsheet.com/api/smartsheet/openapi/schemas/predecessor)
- [ClickUp task API](https://developer.clickup.com/docs/tasks)
- [ClickUp date formatting](https://developer.clickup.com/docs/general-time)
- [Azure DevOps iterations API](https://learn.microsoft.com/en-us/rest/api/azure/devops/work/iterations/get)
- [Azure DevOps Analytics data model](https://learn.microsoft.com/en-us/azure/devops/report/extend-analytics/data-model-analytics-service)
- [Chrome: Animate elements on scroll with scroll-driven animations](https://developer.chrome.com/articles/scroll-driven-animations)
- [Chrome: Scroll-driven animations performance case study](https://developer.chrome.com/blog/scroll-animation-performance-case-study/)
- [Chrome: Passive event listeners](https://developer.chrome.com/blog/passive-event-listeners)
- [web.dev: High-performance CSS animations](https://web.dev/articles/animations-guide)
- [web.dev: Avoid layout thrashing](https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing)
- [web.dev: prefers-reduced-motion](https://web.dev/articles/prefers-reduced-motion)
- [MDN: Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading)
- [W3C WAI: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color)
- [W3C WAI: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)
- [W3C WAI: Contrast Minimum](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum)
- [W3C WAI-ARIA Authoring Practices: Disclosure Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)
- [W3C WAI: What's New in WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/)
- [MDN: URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
- [MDN: History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
- [MDN: localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
- [MDN: IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
- [W3C WCAG: Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions)
- [Material Design: Icons](https://m1.material.io/style/icons.html)
- [kepler.gl Docs](https://docs.kepler.gl/)
- [regl-scatterplot](https://github.com/flekschas/regl-scatterplot)
- [Stardust Documentation](https://stardustjs.github.io/documentation/)
- [D3FC](https://d3fc.io/index.html)