<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="moz-cite-prefix"><font face="Tomson Talks">William Park
via kwlug-disc wrote on 2026-04-27 09:50:<br>
</font></div>
<blockquote type="cite"
cite="mid:601f1d0e-6b0d-4905-b319-2a5c256dcdd2@yahoo.ca"><font
face="Tomson Talks">Suppose you have text data, which could be
static or changing.<br>
How would you present the data in GUI way? Like some kind of
"dashboard".<br>
</font> <font face="Tomson Talks"><br>
From top of my head, my answer would be <b>HTML</b> and <b>browser</b>. </font></blockquote>
<p><br>
</p>
<p><font face="Tomson Talks">d3.js (Data Driven Documents) is a bit
tricky, but is a great choice:</font></p>
<aside xmlns="http://www.w3.org/1999/xhtml"
class="moz-card url-replaced"
style="width:600px; display:flex; align-items:center; justify-content:center; flex-direction:row; flex-wrap:wrap; border-radius:10px; border:1px solid silver;"
id="card-1777312218818">
<div class="card-content"
style="display:flex; flex-direction:column; flex-basis:100%; flex:3;">
<div style="margin:0 1em;">
<p><small class="site" style="font-weight:lighter;">d3js.org</small></p>
<p> <a href="#"
style="font-weight:600; text-decoration:none;"><big
class="title">D3 by Observable | The JavaScript library
for bespoke data visualization</big></a> </p>
<p class="description">The JavaScript library for bespoke data
visualization</p>
<p> <a href="https://d3js.org/" class="url"
style="display:inline-block; text-decoration:none; text-indent:-2ch; margin-inline:2ch;"
title="d3js.org">\U0001f517 https://d3js.org/</a> </p>
</div>
</div>
</aside>
<p> </p>
<p>They have some stunning examples:</p>
<aside xmlns="http://www.w3.org/1999/xhtml"
class="moz-card url-replaced"
style="width:600px; display:flex; align-items:center; justify-content:center; flex-direction:row; flex-wrap:wrap; border-radius:10px; border:1px solid silver;"
id="card-1777312327269">
<div class="card-pic"
style="display:flex; flex-direction:column; flex-basis:100%; flex:1;">
<div style="margin:0 5px;"> <img
src="https://static.observableusercontent.com/thumbnail/1ef827a19d556921d616d53f79fdd6f9eb4d030acb243d70559be3993e4a7292.jpg"
style="width: 600px;" alt=""> </div>
</div>
<div class="card-content"
style="display:flex; flex-direction:column; flex-basis:100%; flex:3;">
<div style="margin:0 1em;">
<p><small class="site" style="font-weight:lighter;">observablehq.com</small></p>
<p> <a href="#"
style="font-weight:600; text-decoration:none;"><big
class="title">D3 gallery</big></a> </p>
<p class="description">Looking for a good D3 example? Here\u2019s a
few (okay, \u2026) to peruse. Animation D3\u2019s data join,
interpolators, and easings enable flexible animated
transitions between views while preserving object constancy.
Interaction D3\u2019s low-level approach allows for performant
incremental updates during interaction. And D3 supports
popular interaction methods including dragging, brushing,
and zooming. Analysis D3 is for more than visualization; it
includes tools for quantitative analysis, such as data
transformation, rand</p>
<p> <a href="https://observablehq.com/@d3/gallery"
class="url"
style="display:inline-block; text-decoration:none; text-indent:-2ch; margin-inline:2ch;"
title="observablehq.com">\U0001f517
https://observablehq.com/@d3/gallery</a> </p>
</div>
</div>
</aside>
<p> </p>
<p></p>
</body>
</html>