Web Charts

[AdamSobieski]

Introduction

Web Charts is a proposal for Web-based data visualizations.

In the Web Charts model, a data visualization, or chart, references a number of candidate input data sources, which should be different formats for the same data, and also references a script with which to process the data from the selected input data source into styleable interactive content in the Shadow DOM. Input data could be static and file-based, perhaps including temporal cues, or (real-time) streaming data, or "data videos".

While Web Components and Custom Elements technologies are expected to be of use for both prototyping and demonstrating Web Charts, a <web-chart> custom element, a goal of this proposal is the eventual inclusion of Web Charts in the HTML Living Standard, a <chart> element.

This proposal hopes to gather participants for discussion, to form a team for rapid prototyping, and to build consensus from editors and interest from implementors, towards, during, and after incubation of this proposal with the Web Incubator Community Group.

Examples

In the following examples, a <chart> element can have <source>, <script>, or <style> elements as children, a <source> element can refer to either inline, static, or streaming data, the data: URL scheme is utilized for providing inline data, and existing video formats are utilized as placeholders for potential data streaming formats.

Example 1: This example shows that a chart could process inline data using an indicated script into content in the Shadow DOM.

<chart>
  <source type="text/csv" src="data:text/csv;charset=UTF-8,..." />
  <script src="https://cdn.webcache.org/chart.js" />
</chart>

Example 2: This example shows that, instead of only inheriting its style from its containing document, a chart could provide a custom style.

<chart>
  <source type="text/csv" src="data:text/csv;charset=UTF-8,..." />
  <script src="https://cdn.webcache.org/chart.js" />
  <style  src="custom.css" />
</chart>

Example 3: This example shows that, instead of inline data, a data source could be provided.

<chart>
  <source type="text/csv" src="data.csv" />
  <script src="https://cdn.webcache.org/chart.js" />
  <style  src="custom.css" />
</chart>

Example 4: This example shows that multiple data source options could be provided in a manner resembling <picture>, <audio>, and <video> elements.

<chart>
  <source type="text/csv" src="data.csv" />
  <source type="text/tsv" src="data.tsv" />
  <script src="https://cdn.webcache.org/chart.js" />
  <style  src="custom.css" />
</chart>

Example 5: This example shows that charts could process streaming data, or "data videos", to generate animated data visualizations.

<chart>
  <source type="video/mp4" src="data-video.mp4" />
  <source type="video/webm" src="data-video.webm" />
  <script src="https://cdn.webcache.org/chart.js" />
  <style  src="custom.css" />
</chart>

Example 6: This example shows that charts could process and provide visualizations for real-time streaming data.

<chart>
  <source type="application/x-mpegurl" src="data-video.m3u8" />
  <script src="https://cdn.webcache.org/chart.js" />
  <style  src="custom.css" />
</chart>

Accessibility

Accessibility is a priority for this proposal. Adding some complexity to accessibility-related solutions for Web Charts, however, is that charts' Shadow DOM content could utilize multiple technologies, e.g., HTML, SVG, Canvas, WebGL, WebGPU, WebXR.

Templates, e.g., utilizing a Handlebars syntax or JavaScript template literals, could enable charts to provide responsive natural-language descriptions. Changes to a chart's data, metadata, structure, or style would result in updates to its available natural-language description.

Parts of charts (e.g., points, slices, bars) could each have templated natural-language descriptions. Charts could combine and aggregate these contents together into long-form descriptions of charts and their contents.

Internationalization

Web Charts could provide templates for multiple languages and/or could make use of AI systems to translate descriptive natural-language contents.

Web Charts could support internationalization in terms of the natural-language labels provided to and subsequently displayed in interactive data visualizations.

Interoperability

Web Charts, as standard, would enable interoperability scenarios including the portability of data visualizations between software applications, e.g., via clipboarding or drag-and-drop operations.

Interestingly, responsive templated natural-language descriptions for accessibility could also be of use for interoperation with AI systems. AI systems could process both the input data and the natural-language descriptions of charts to answer questions, engage in dialogue, and perform data analysis about charts.

Configurability

What might the nature of configuration be with respect to scripting logic? Will there exist configuration options beyond style-related properties? How might developers utilize custom style variables or properties, --*? How might developers utilize data-* attributes on <chart> or <script> elements? How might developers utilize secondary <script> elements with either inline script or JSON content?

Data Object Model

Charts could provide access to their data through a data object model, or DataOM. With a DataOM, Web developers would be able to interact with visualizations' data, at runtime, and any updates there would be subsequently reflected in the visualizations.

Temporal Cues

Temporal data can be utilized to control visualizations, e.g., to cue animation events. Temporal data could, for instance, annotate data tables in multi-table models, one means of enabling "slideshows" comprised of multiple visualizations to be displayed using single elements.

Data Streaming Formats

Solutions for (real-time) data streaming could utilize the text- and data-related tracks of existing video formats or utilize entirely new formats.

Resembling "data video" concepts, data visualizations for (real-time) streaming data could be played, paused, stopped, and resumed. Data streaming formats could support seeking while simultaneously being error-tolerable, e.g., with respect to packet loss. Data streaming formats could, in these regards, transmit both instantaneous snapshots of charts' data and sequences of DataOM operations.

Reactive technologies connected to a DataOM could enable notifications and live queries, with updates to datasets arriving asynchronously in "data video" streams. Data visualizations could enqueue or schedule animations as updates arrived so as to remain aligned with the underlying dynamic data.

Previous Works

• List of Charting Software
• List of Information Graphics Software

References

• HTML
  • The <script> Element
  • The <source> Element
  • The <style> Element
  • The <audio> Element
  • The <picture> Element
  • The <video> Element
• Web Components
  • Custom Elements
  • Shadow DOM
• SVG
• Canvas
• WebGL
• WebGPU
• WebXR
• WAI-ARIA
• Fullscreen API
• The data: URL Scheme
• Model for Tabular Data and Metadata on the Web
• Metadata Vocabulary for Tabular Data
• Generating JSON from Tabular Data on the Web
• Generating RDF from Tabular Data on the Web
• Tabular Data Package
• Indexed Database API
• Media Fragments URI
• HTTP Live Streaming

Conclusion

Thank you. I look forward to discussing these ideas with you.

[kurtcagle]

Hi, Adam,

This is good news, and I'd definitely like to stay abreast of it (participate as I can).

One other area that may be worth thinking about are charting microlanguages, most notably the GraphViz dot language and the MermaidJS diagram language, which I use fairly heavily for incorporating Network Diagrams and Flowcharts among others.

For instance, the following:

flowchart LR
    classDef influencer fill:#ff0,stroke:#333,stroke-width:1px;
    classDef production fill:#fC0,stroke:#333,stroke-width:1px;
    classDef productionType fill:#f00,stroke:#333,color:white,stroke-width:1px;
    classDef sponsor fill:#00f,stroke:#333,color:white,stroke-width:1px;
    classDef facilitator fill:#f0f,stroke:#333,color:white,stroke-width:1px;
    classDef event fill:#808,stroke:#333,color:white,stroke-width:1px;
    classDef organizer fill:#040,stroke:#333,color:white,stroke-width:1px;
    influencer:Kurt([<b>Influencer</b>\nKurt Cagle]):::influencer
    influencer:AshleighFaith([<b>Influencer</b>\nAshleigh Faith]):::influencer
    influencer:AmyHodler([<b>Influencer</b>\nAmy Hodler]):::influencer
    influencer:AlanMorrison([<b>Influencer</b>\nAlan Morrison]):::influencer
    prodType:Interview([<b>Production Type</b>\nInterview]):::productionType
    prodType:Blog([<b>Production Type</b>\nBlog]):::productionType
    prodType:Feature([<b>Production Type</b>\nFeature]):::productionType
    prodType:LinkedInFeed([<b>Production Type</b>\nLinked In Feed]):::productionType
    prod:TheCagleReport([<b>Production</b>\nThe Cagle Report]):::production
    prod:TheGraph([<b>Production</b>\nThe Graph]):::production
    prod:DataTherapist([<b>Production</b>\nThe DataTherapist]):::production
    prod:IsADataThing([<b>Production</b>\nIsA Data Thing]):::production
    prod:AlanLinkedInFeed([<b>Production</b>\nAlan Morrison LI Feed]):::production
    sponsor:nVidia([<b>Sponsor</b>\nnVidia]):::sponsor
    sponsor:MarkLogic([<b>Sponsor</b>\nMarkLogic]):::sponsor
    sponsor:Microsoft([<b>Sponsor</b>\nMicrosoft]):::sponsor
    sponsor:DGraph([<b>Sponsor</b>\nDGraph]):::sponsor
    sponsor:DoD([<b>Sponsor</b>\nDept. of Defense]):::sponsor
    sponsor:UHC([<b>Sponsor</b>\nUnited Health Care]):::sponsor
    event:AIDataForum([<b>Event</b>\nAI Data Forum]):::event
    event:DataFabricForum([<b>Event</b>\nData Fabric Forum]):::event
    event:DataVentsMesh([<b>Event</b>\nData Vents: Mesh]):::event
    organizer:DataForumInc([<b>Organizer</b>\nData Forum Inc]):::organizer
    organizer:DataVents([<b>Organizer</b>\nData Vents]):::organizer
    influencer:Kurt -- produces --> prod:TheCagleReport
    influencer:Kurt  -- produces --> prod:TheGraph
    influencer:Kurt -- produces --> prod:DataTherapist
    prod:TheCagleReport -- is type of --> prodType:Blog
    influencer:AmyHodler -- produces --> prod:TheGraph
    prod:TheGraph -- is type of --> prodType:Feature
    prod:TheGraph -- is sponsored by --> sponsor:nVidia
    influencer:AshleighFaith -- produces --> prod:IsADataThing
    prod:DataTherapist -- is type of --> prodType:Interview
    prod:IsADataThing -- is type of --> prodType:Interview
    prod:IsADataThing -- is sponsored by --> sponsor:nVidia
    prod:DataTherapist -- is sponsored by --> sponsor:MarkLogic
    prod:IsADataThing -- is sponsored by --> sponsor:Microsoft
    prod:DataTherapist -- is sponsored by --> sponsor:DGraph
    influencer:AlanMorrison -- contributes to --> prod:TheCagleReport
    influencer:AlanMorrison -- contributes to --> prod:IsADataThing
    influencer:AlanMorrison -- produces --> prod:AlanLinkedInFeed
    prod:AlanLinkedInFeed -- is type of --> prodType:LinkedInFeed
    sponsor:DoD -- buys from --> sponsor:nVidia
    sponsor:DoD -- buys from --> sponsor:Microsoft
    sponsor:UHC -- buys from --> sponsor:Microsoft    
    sponsor:DoD -- buys from --> sponsor:MarkLogic
    event:AIDataForum -- organized by --> organizer:DataForumInc
    event:AIDataForum -- sponsored by --> sponsor:nVidia
    event:AIDataForum -- sponsored by --> sponsor:Microsoft
    event:AIDataForum -- sponsored by --> sponsor:Microsoft
    event:DataFabricForum -- organized by --> organizer:DataForumInc
    event:DataFabricForum -- sponsored by --> sponsor:Microsoft
    event:AIDataForum -- organized by --> organizer:DataForumInc
    event:DataVentsMesh -- organized by --> organizer:DataVents
    event:DataVentsMesh -- sponsored by --> sponsor:Microsoft
    influencer:AshleighFaith -- speaks at --> event:AIDataForum
    influencer:Kurt -- speaks at --> event:DataVentsMesh
    influencer:AmyHodler -- speaks at --> event:DataVentsMesh

Generates the following Network Graph as PNG or SVG:

Note sure how this fits into the overall strategy, but it would be immensely helpful to have some support for these.

[AdamSobieski]

@kurtcagle, thank you. Web Charts intends to be flexible to supporting charting microlanguages. The input data, in whichever formats, need to be understood by charts' scripts so that: (1) charts' data models could be populated from the input data, and (2) the data models could be connected to visualization models which might involve HTML, SVG, Canvas, WebGL, WebGPU, or WebXR in the Shadow DOM. With this approach, Web developers would be able to modify input data at runtime and data visualizations would update.

Something like the following should be possible:

<chart>
  <source type="text/x-mermaid" src="flowchart.mmd" />
  <script src="https://cdn.webcache.org/mermaid-chart.js" />
</chart>

The Mermaid documentation indicates that Mermaid SVG charts can inherit their styling from containing documents and can be provided with custom stylesheets.

<chart>
  <source type="text/x-mermaid" src="flowchart.mmd" />
  <script src="https://cdn.webcache.org/mermaid-chart.js" />
  <style  src="custom.css" />
</chart>

Similarly, the GraphViz documentation indicates that GraphViz SVG charts can inherit their styling from containing documents and can be provided with custom stylesheets.

<chart>
  <source type="text/x-dot" src="flowchart.dot" />
  <script src="https://cdn.webcache.org/graphviz-chart.js" />
  <style  src="custom.css" />
</chart>

[mgifford]

I do really wish that SVG had better i18n support and that Mermaid supported more semantic generation of SVG files. So much of the meaning is right there in text for generation, but not conveyed into the SVG file.

Accessible web charts are currently a real challenge. I think the current best practices are described by https://fizz.studio

[kurtcagle]

To that end it might be worth including a stream element that contains a URL that sends individual deltas rather than an entire dataset. For instance a stock exchange stream would contain just the most immediate updates.

Most chart packages incorporate some form of configuration json. A config attribute on the chart element would contain a URL to that config file.

Finally, a value attribute on chart would, if present, highlight that value in the chart. If the chart is a timeseries of years, value would be a specific year, if a flowchart the id of the resource in that flowchart. The specific mechanism for highlighting would be chart dependentl()

On Wed, May 31, 2023, 20:06 Adam Sobieski @.***> wrote:

@kurtcagle https://github.com/kurtcagle, thank you. Web Charts intends to be flexible to supporting charting microlanguages. The input data, in whichever formats, needs to be understood by charts' scripts so that: (1) charts' data models could be populated from the input data, and (2) the data models could be connected to visualization models which might involve HTML, SVG, Canvas, WebGL, WebGPU, or WebXR in the Shadow DOM. With this approach, Web developers would be able to modify the data at runtime and data visualizations would update.

Something like the following should be possible:

Githubissues.

Githubissues is a development platform for aggregating issues.