PaperlayerView exact revision on arXiv

Source-linked AI summary

Beagle: Automated Extraction and Interpretation of Visualizations from the Web

Leilani Battle, Peitong Duan, Zachery Miranda, Dana Mukusheva, Remco Chang, Michael Stonebraker

arXiv:1711.05962v1cs.HC

TL;DR

How widely web visualizations are used, and which types predominate, remains unclear. Beagle extracts and classifies SVG visualizations from webpages; the analysis finds browser-based visualizations on only 0.05% of webpages, with four chart types dominating.

  • Problem

    How frequently web-based interactive visualizations are used remains unclear, including how pie charts compare with recommended alternatives such as bar charts.

    Source: INTRODUCTION · p. 1

  • Method

    Beagle extracts browser-rendered SVG visualizations from webpages, classifies them by type, and makes them available in a queryable data store.

    Source: INTRODUCTION · p. 1

  • Results

    Only 0.05% of webpages contain visualizations created with browser-based tools; bar, line, scatter, and geographic maps dominate, while pie charts are relatively rare.

    Source: INTRODUCTION · pp. 1–2, CONCLUSION · p. 5

  • Takeaways & Limitations

    Usage varies across tools, suggesting that some may be more accessible or appealing for particular visualization types.

    Source: INTRODUCTION · p. 1

    The analyses omit roughly one quarter of extracted visualizations because complex webpage features, such as animations, interfered with extraction.

    Source: Within-Group Evaluation · p. 3

Abstract

from arXiv · show

"How common is interactive visualization on the web?" "What is the most popular visualization design?" "How prevalent are pie charts really?" These questions intimate the role of interactive visualization in the real (online) world. In this paper, we present our approach (and findings) to answering these questions. First, we introduce Beagle, which mines the web for SVG-based visualizations and automatically classifies them by type (i.e., bar, pie, etc.). With Beagle, we extract over 41,000 visualizations across five different tools and repositories, and classify them with 86% accuracy, across 24 visualization types. Given this visualization collection, we study usage across tools. We find that most visualizations fall under four types: bar charts, line charts, scatter charts, and geographic maps. Though controversial, pie charts are relatively rare in practice. Our findings also indicate that users may prefer tools that emphasize a succinct set of visualization types, and provide diverse expert visualization examples.

INTRODUCTION

The paper asks how widely interactive visualizations are used online and introduces Beagle to extract and classify browser-rendered SVG visualizations. Its collected examples show that a few chart types dominate, while pie charts are relatively rare.

INTRODUCTION

  • Beagle combines a web crawler that extracts browser-rendered SVG visualizations with an annotator that classifies them by visualization type.The paper situates this work amid tools and publishers making interactive web visualization easier to create and share.Source: INTRODUCTION · p. 1
  • Beagle extracted over 41,000 visualizations and classified them with 86% accuracy across 24 visualization types.The collection came from five web-based visualization tools and repositories.Source: INTRODUCTION · p. 1
  • Bar charts, line charts, scatter charts, and geographic maps account for the vast majority of visualizations, while bar and line charts dominate the studied tools and repositories.The most popular visualization types varied across tools.Source: INTRODUCTION · p. 1
  • Except for D3, each studied tool had 14 or fewer observed visualization types, suggesting a possible barrier to transferring research types into general use.The paper also suggests that current tools may offer more types than real-world users need.Source: INTRODUCTION · pp. 1–2
  • Pie charts are relatively rare in the extracted web collections, making their controversy appear moot for web-driven visualizations.The paper contrasts web use with presentations and reports.Source: INTRODUCTION · p. 2
  • Cross-validation accuracy was 82%-99% within collections and 86% between collections.The contribution summary reports these results for the classification technique.Source: INTRODUCTION · p. 2

FINDING AND EXTRACTING VISUALIZATIONS

An unguided crawl found few visualization pages amid many redundant examples, so the authors targeted websites where users regularly share visualizations. Crawling these sources yielded over 42,000 SVG visualizations.

FINDING AND EXTRACTING VISUALIZATIONS

  • An unguided crawl of 20 million webpages found roughly 10,000 pages with visualizations, or 0.05%, largely redundant Stack Overflow and Stack Exchange profile charts.Many of those pages contained a single line chart showing user activity over time.Source: FINDING AND EXTRACTING VISUALIZATIONS · p. 2
  • After filtering out raster-based sites, the crawler mined bl.ocks.org, Plotly, Chartblocks, Fusion Charts, and Graphiq.The search also investigated Tableau Public, Many Eyes, and bl.ocks.org for D3 examples.Source: FINDING AND EXTRACTING VISUALIZATIONS · p. 2
  • For each URL from a visualization source, the crawler identifies SVG objects and extracts each object's raw SVG specification and a snapshot.URLs from the targeted sources were likely to produce SVG visualizations, enabling thousands to be collected per run.Source: FINDING AND EXTRACTING VISUALIZATIONS · p. 2
  • Over 42,000 SVG visualizations were collected across five targeted sources, with more than 22,000 from Chartblocks and more than 15,000 from Plotly.The other collections included over 2,000 from D3, over 500 from Fusion Charts, and over 2,500 from Graphiq.Source: FINDING AND EXTRACTING VISUALIZATIONS · p. 2

AUTOMATICALLY LABELING VISUALIZATIONS

Beagle's Annotator automatically assigns visualization types using SVG-based features. It computes statistics over SVG elements and supplies them to a decision-tree classifier.

AUTOMATICALLY LABELING VISUALIZATIONS

  • The Annotator classifies visualizations by type using SVG statistics as features for an off-the-shelf decision-tree classifier.The described implementation uses Scikit-Learn with default parameters.Source: AUTOMATICALLY LABELING VISUALIZATIONS · p. 2
  • Example features include average SVG-element position and width, and the count of unique colors.The features are intended to help distinguish visualization types.Source: AUTOMATICALLY LABELING VISUALIZATIONS · p. 2
  • The classifier uses 114 features grouped as general, style, and per-element features.These groups contain 6, 19, and 89 features, respectively; per-element features cover circles, rectangles, lines, paths, and text.Source: AUTOMATICALLY LABELING VISUALIZATIONS · p. 2

General features

Beagle's features summarize SVG element prevalence and styling to help distinguish visualization types.

General features

  • General features count SVG element types and horizontal or vertical axis lines, which can help distinguish charts such as bar charts from maps.Heavy use of circles may indicate a scatter or bubble chart.Source: General features · p. 2

Style features

  • Style features capture colors, borders, stroke widths, and font sizes, including inherited styles and embedded CSS.The system counts unique fill and border colors, tracks minimum and maximum stroke widths and font sizes, and measures unique font sizes and font-size variance.Source: Style features · pp. 2–3

Per-Element features

Beagle distinguishes visualization types using normalized SVG geometry and element-level statistics. Its features capture layout and shape patterns across positions, sizes, paths, and lines.

Per-Element features

  • Position statistics capture layout patterns: repeated y positions and periodic x positions can distinguish vertical bars from scatter charts’ many unique positions.The features include extrema, variance, unique positions, and counts of elements sharing positions.Source: Per-Element features · p. 3
  • Circle features use radius variation and repeated radii to distinguish equal-size circles from visualizations with varying circle sizes.The radius statistics include maximum, minimum, and variance.Source: Per-Element features · p. 3
  • Rectangle width and height statistics capture repeated dimensions and size patterns such as equal-width or equal-height bars.The features include extrema, variance, counts of identical widths, and unique widths, repeated for heights.Source: Per-Element features · p. 3
  • Path features measure path-string length and endpoint distance, while polygon and arc counts help identify polygon-heavy designs and circles encoded as paths.Longer path specifications can indicate detailed shapes such as geographic maps; endpoint distance helps distinguish short from long paths.Source: Per-Element features · p. 3
  • Line elements are represented by their maximum, minimum, and variance in length.Source: Per-Element features · p. 3

ACCURACY RESULTS FOR LABELING VISUALIZATIONS

Beagle’s classification accuracy is assessed both within individual visualization collections and across a mixture of collections.

ACCURACY RESULTS FOR LABELING VISUALIZATIONS

Within-Group Evaluation

The evaluation uses five web-tool collections, a common set of visualization labels, and stratified five-fold cross-validation. Beagle reaches at least 83.1% accuracy in every collection.

Within-Group Evaluation

  • The five crawler-mined collections range from 530 Fusion Charts visualizations to 23,270 Chartblocks visualizations, and analyses omit roughly one quarter when page complexity interferes.The collections range from four visualization types in Chartblocks to 22 in D3.Source: Within-Group Evaluation · p. 3

Dataset Labels

  • The shared label set covers types observed across the collections; similar map and graph/tree types, and style variants such as stacked and grouped bars, were consolidated.Authors labeled D3, Fusion Charts, and Graphiq by hand, and Plotly and Chartblocks through code.Source: Dataset Labels · p. 3

Experimental Setup and Results

Between-Group Evaluation

In mixed-collection tests, Beagle achieved 86.5% classification accuracy, and reached 94.0% when distinguishing visualizations from nonvisual SVG objects. It improved on Revision1 in a direct comparison.

Between-Group Evaluation

  • 86.5% classification accuracy on 2,500 mixed visualizations; 94.0% on 3,500 mixed SVG objects that included 1,000 nonvisualizations.Source: Between-Group Evaluation · p. 4
  • Beagle’s performance is comparable to Revision (80-90% accuracy), FigureSeer (86%), and ChartSense (76.7-91.3%), while using limited training examples.Computer vision and deep learning techniques generally require large training sets, which may be unavailable when building a new collection from scratch.Source: Between-Group Evaluation · p. 4
  • Beagle improved classification accuracy by 5.8% over Revision1’s 80.7% on the mixed visualization collection.Source: Between-Group Evaluation · p. 4

DISCUSSION: VISUALIZATION USAGE ON THE WEB

Across the studied collections, a small set of visualization types dominates, although the most popular type varies by collection. Obscure types tend to depict complex relationships or have simpler, more popular alternatives; examples may matter more than simply adding types.

Supporting Fewer Visualization Types is Common

  • Less common types often depict complex relationships or have simpler, more popular equivalents, and users may avoid complex types when tools support them.The authors suggest that this may contribute to the low number of supported types.Source: Supporting Fewer Visualization Types… · p. 4

Line and Bar Charts Dominate the Collections

  • The four leading types account for 64.8% of D3, 72.6% of Fusion Charts, 88.6% of Plotly, and 90.5% of Graphiq visualizations.The most popular type varies by collection, with a steep drop to the second most popular; bar and line charts are always among the top three.Source: Line and Bar Charts Dominate the… · p. 4, Table 3 · p. 5
  • Adding more types may only slightly change choices, while easy-access, well-documented examples could matter; many user-made D3 visualizations resembled available examples.The authors observed this similarity during their bl.ocks.org crawl and analysis.Source: Line and Bar Charts Dominate the… · p. 5

Pie Charts are Not Popular

Pie charts were uncommon in most studied collections, while the related-work discussion distinguishes Beagle’s SVG classification approach from prior visualization mining and notes the limited study of web usage.

Pie Charts are Not Popular

  • Pie charts were below 5% in four of five studied collections; Chartblocks was the exception at 23.2%, with line and bar charts still more common.The authors say it is unclear whether people avoid pies because of visualization conventions or tool design and presentation.Source: Pie Charts are Not Popular · p. 5

RELATED WORK

  • Unlike many prior classifiers focused on raster images, Beagle uses basic SVG statistics that apply to any SVG image and classifies up to 24 visualization types.Earlier work also used vector images from PDFs, while other cited approaches extracted features or marks from raster images.Source: RELATED WORK · p. 5
  • Few prior projects studied visualization usage beyond extraction and classification; prior work examined Exhibit design choices and visualizations in scientific papers.Benson and Karger found authors’ design decisions were influenced by available examples; Lee et al. found visualizations comprised 35% of images in higher-impact papers.Source: RELATED WORK · p. 5

CONCLUSION

Beagle extracts and labels web visualizations, then supports a study of their usage across tools. The authors report that such visualizations are rare on webpages, that four types dominate, and that tools may better serve users with a focused selection and clear examples.

CONCLUSION

  • Beagle extracted over 41,000 web visualizations and achieved 86% accuracy in a 24-type multi-class classification test.Its Web Crawler extracts SVG-based visualizations from webpages, and its Annotator labels them.Source: CONCLUSION · p. 5
  • Only 0.05% of webpages contain visualizations created using browser-based tools.Source: CONCLUSION · p. 5
  • Bar charts, line charts, scatter charts, and geographic maps cover the vast majority of visualizations in the collection, while pie charts are somewhat rare.Source: CONCLUSION · p. 5
  • The findings suggest tools may better serve real-world users by focusing on a small set of visualization types and giving clear examples of their use.Source: CONCLUSION · p. 5
Loading 1711.05962v1…