> Markdown version of [/videos/84-web-based-information-visualization?t=1043](https://www.wearedevelopers.com/videos/84-web-based-information-visualization?t=1043). 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

- [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")
- [Identifying scenarios where JavaScript remains an essential tool](https://www.wearedevelopers.com/videos/1806-nolojs-avoiding-javascript-cruft-with-html-and-css-aaron-t-grogg) (from "NoLoJS - Avoiding JavaScript Cruft with HTML and CSS - Aaron T. Grogg")
- [Exploring community-built data analysis tools and visualizations](https://www.wearedevelopers.com/videos/2138-wearedevelopers-live-node-and-package-security) (from "WeAreDevelopers LIVE - Node and Package Security")
- [Resolving overplotting and color saturation issues in dense visualizations](https://www.wearedevelopers.com/videos/113-python-data-visualization-deepnote-w-pyviz-overview) (from "Python Data Visualization @ Deepnote (w/ PyViz overview)")
- [Identifying performance bottlenecks in large data scatter charts](https://www.wearedevelopers.com/videos/100299-can-svg-be-fast-rendering-a-scatter-chart-with-over-10k-points) (from "Can SVG be fast? Rendering a scatter chart with over 10k points")

## 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

- [Senior Software Engineer, Data](https://www.wearedevelopers.com/jobs/48273-senior-software-engineer-data) at **Sportradar Media Services GmbH**
- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**