DITA outputs can indeed support interactive media, including interactive graphs.

Interactive media within DITA outputs adds a dynamic and engaging dimension to technical documentation, allowing users to explore content interactively.

Interactive media, such as graphs, can be integrated into DITA outputs by using HTML5 and JavaScript, graph libraries, data integration, user interaction, and responsiveness.

• HTML5 and JavaScript: DITA outputs are often generated as HTML5 documents, and JavaScript is used to create interactive features.
• Graph Libraries: Libraries like D3.js, Chart.js, or Plotly are used to build interactive graphs, offering pre-built graph types and customization options.
• Data Integration: Graphs are powered by data, and structured data from DITA content can be used to dynamically generate graphs.
• User Interaction: Users can interact with the graphs through features like hovering over data points, clicking for details, zooming, panning, or toggling data series.
• Responsiveness: Interactive graphs should be responsive to different screen sizes and orientations, ensuring usability on both desktop and mobile devices.

Example:

In a DITA-generated user manual for a data analytics software, an interactive line chart is embedded to illustrate how stock prices change over time. Users can interact with the graph by clicking and dragging to focus on specific time intervals, making it easier to analyze data patterns. This interactive graph adds a dynamic and engaging element to the manual, enhancing the user’s understanding of the software’s capabilities.

HTML5 and JavaScript: The DITA output format is set to HTML5. JavaScript code is integrated into the document to create the interactive graph.

Graph Library: The report uses Plotly, a JavaScript graphing library. It offers interactive features like zooming into a specific date range and displaying detailed stock prices on hover.

Data Integration: Structured data, such as historical stock prices, is included in the DITA content. This data is used as the source for the interactive graph.

User Interaction: Users can hover over data points to see stock prices, click and drag to zoom into specific periods, and toggle different stock symbols on the graph for comparison.

Responsiveness: The graph is designed to adapt to various screen sizes. On smaller screens, it allows for touch-based interactions, such as pinch-to-zoom.