> Markdown version of [/videos/84-web-based-information-visualization?t=196](https://www.wearedevelopers.com/videos/84-web-based-information-visualization?t=196). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Web-based Information Visualization

Are your SVG web charts bottlenecking browser performance or leaking sensitive raw data? Master visual aggregation and secure data decoupling to build presentation-ready JavaScript visualizations.

- **Speakers:** Johanna Schmidt
- **Event:** WeAreDevelopers LIVE
- **Published:** December 1, 2020
- **Duration:** 43:52
- **URL:** https://www.wearedevelopers.com/videos/84-web-based-information-visualization

## Summary

Information visualization transforms complex, numeric data into intuitive visual formats, serving as a critical tool for modern data analysis. By plotting data, we uncover patterns hidden in plain statistics—perfectly illustrated by Anscombe's quartet, which proves that algorithmic processes alone can be misleading. As one researcher noted, visualization is such a "powerful amplifier of human abilities" that relying solely on statistical analysis borders on the unethical. Central to this discipline is data mapping, the deliberate choice of assigning data attributes to visual features like position, color, and size to maximize human perception. When bringing these data narratives to the web, developers must choose between standalone software and code-based web tools. In the realm of web-based information visualization, SVG is currently the dominant foundational technology over HTML canvas. SVG's native support for DOM manipulation allows developers to get interaction capabilities natively, making it ideal for click-driven, standard chart types. Libraries like d3.js spearhead this space, offering immense flexibility and innovative chart creation, albeit with a steeper learning curve. A crucial insight for developers is that web-based JavaScript charting tools actively skew towards the presentation side of data, communicating final insights rather than facilitating raw exploration. Building visualizations for the browser introduces distinct engineering challenges around data size and security. Rendering thousands of SVG nodes can quickly bottleneck browser performance, necessitating techniques like alpha blending, data sampling, or visual aggregation such as hexbinning to manage clutter. Furthermore, because web visualizations operate in a client-server paradigm, any data processed by a frontend library lives completely in the browser. Developers must intentionally decouple their exploratory datasets from their final presentations, transmitting only strictly necessary data subsets to the frontend to prevent unintended data exposure.

**Keywords:** web-based information visualization, visual data mapping techniques, javascript charting libraries, d3.js framework flexibility, svg vs html canvas, browser rendering performance, client-side data security, visual aggregation strategies, anscombe's quartet statistical variance, data visualization literacy, exploratory vs confirmatory analysis, chart presentation constraints, data sampling and filtering, interactive dom manipulation, frontend data exposure prevention

## Chapters

1. **Bridging university concepts and industry needs via visual analytics** (00:00) — Applied research in visual analytics bridges theoretical university concepts with industry needs for temporal data.
1. **The importance of visual representation in data analysis** (03:16) — Plotted visual information reveals distinct data characteristics that identical statistical parameters completely obscure.
1. **Mapping abstract data attributes into geometric visual configurations** (10:10) — Creating intuitive visualizations requires carefully mapping raw data values to appropriate geometric attributes and colors.
1. **Comparing standalone visualization applications with programmatic charting libraries** (14:08) — The landscape of standalone business intelligence applications contrasts sharply with programmatic charting libraries for the web.
1. **Integrating visual elements using SVG and HTML canvas** (17:23) — Standard vector graphics naturally support interaction events while HTML canvas elements enable advanced rendering performance.
1. **Building interactive data visualizations using the D3.js library** (23:40) — Developers can connect data points directly to intricate user interfaces using specialized JavaScript layout libraries.
1. **Evaluating charting libraries for exploratory analysis and presentation** (27:41) — Selecting an appropriate component library depends on evaluating its flexibility against exploratory or presentation-focused goals.
1. **Handling large datasets and security risks in web clients** (37:27) — Aggregation techniques mitigate browser rendering limits while cautious payload design prevents unintended client-side data exposure.

## Related Moments

- [Exploring the performance frontier of web charting libraries](https://www.wearedevelopers.com/videos/1747-uncharted-territories-of-web-performance-andrew-burnett-thompson-and-david-burleigh) (from "Uncharted Territories of Web Performance - Andrew Burnett-Thompson and David Burleigh")
- [Rendering visual data with web components and Chart.js](https://www.wearedevelopers.com/videos/2054-why-is-software-documentation-still-static-and-why-modern-browsers-deserve-better) (from "Why Is Software Documentation Still Static – And Why Modern Browsers Deserve Better")
- [Selecting backend web frameworks and internal visualization tooling](https://www.wearedevelopers.com/videos/901-multilingual-nlp-pipeline-up-and-running-from-scratch) (from "Multilingual NLP pipeline up and running from scratch")
- [Rendering high-performance data visualizations in web browsers](https://www.wearedevelopers.com/videos/1794-wearedevelopers-live-from-javascript-to-webassembly-high-performance-charting-and-more) (from "WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More")
- [Managing complexity in multi-chart dashboard interactions](https://www.wearedevelopers.com/videos/1747-uncharted-territories-of-web-performance-andrew-burnett-thompson-and-david-burleigh) (from "Uncharted Territories of Web Performance - Andrew Burnett-Thompson and David Burleigh")
- [Scaling data visualization for extreme industrial constraints](https://www.wearedevelopers.com/videos/1747-uncharted-territories-of-web-performance-andrew-burnett-thompson-and-david-burleigh) (from "Uncharted Territories of Web Performance - Andrew Burnett-Thompson and David Burleigh")

## Related Articles

- [Top 7 JavaScript Charting Libraries](https://www.wearedevelopers.com/magazine/247-top-7-javascript-charting-libraries)
- [The Fastest JavaScript Charts - Built for React and Beyond](https://www.wearedevelopers.com/magazine/636-the-fastest-javascript-charts-built-for-react-and-beyond)
- [The Overflow: 5 Tools for Working with SVGs](https://www.wearedevelopers.com/magazine/707-the-overflow-5-tools-for-working-with-svgs)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)

## Related Jobs

- [Sr Data Analyst](https://www.wearedevelopers.com/jobs/48434-sr-data-analyst) at **Dynatrace**
- [Senior Software Engineer, Angular](https://www.wearedevelopers.com/jobs/ext/2796428-senior-software-engineer-angular) at **Bitpanda**
- [(Senior) Data Engineer](https://www.wearedevelopers.com/jobs/48549-senior-data-engineer) at **Sportradar Media Services GmbH**
- [Senior Design Engineer](https://www.wearedevelopers.com/jobs/ext/2644934-senior-design-engineer) at **GitHub**
- [Senior AI Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2552851-senior-ai-frontend-engineer) at **TeamViewer Germany GmbH,**
- [GIS Web AI Developer, Senior Associate](https://www.wearedevelopers.com/jobs/ext/2586498-gis-web-ai-developer-senior-associate) at **PwC**