dashboard-report-by-html-story.html (110 KB)
ERX Vietnam
VSCN Workshop #29 · Vietnam Supply Chain Network
Dashboard Report by HTML
A modern way to tell your story
Năm 2026, cả 4/4 nền tảng AI phổ biến (Claude, Microsoft Copilot, ChatGPT, Gemini) đều tạo được trang HTML tương tác từ dữ liệu của bạn. Công cụ không còn là rào cản; thứ tạo khác biệt là câu chuyện bạn chọn kể.In 2026 all 4 of 4 mainstream AI platforms (Claude, Microsoft Copilot, ChatGPT, Gemini) build interactive HTML pages from your data. The tool is no longer the barrier; the difference is the story you choose to tell.
Nguyễn Minh Ngọc · CEO ERX VietnamChủ nhật 08/11/2026 · 20:00–22:00 (giờ VN)Sunday 8 Nov 2026 · 20:00–22:00 (Vietnam time)
Mẹo trình chiếu: phím →/← nhảy chương, F11 toàn màn hình.Presenter tip: →/← jump chapters, F11 for full screen.
00
120 phút: một nửa cho nguyên lý, một nửa cho 4 ví dụ thật và câu hỏi120 minutes: half on principles, half on 4 real examples and your questions
01
Một file HTML mở được ở mọi nơi, tương tác được, và AI viết được trong vài phútOne HTML file opens anywhere, is interactive, and AI can write it in minutes
Excel và PowerPoint kể chuyện bằng ảnh tĩnh; Power BI cần giấy phép và người xem cần tài khoản. HTML nằm giữa: người nhận chỉ cần trình duyệt, còn bạn giữ quyền tác giả của câu chuyện.Excel and PowerPoint tell stories with static pictures; Power BI needs licences and viewer accounts. HTML sits in between: the reader needs only a browser, and you keep authorship of the story.
Đánh giá định tính của ERX Vietnam, không phải số đo.Qualitative assessment by ERX Vietnam, not a measurement.
02
Trong 18 tháng, cả bốn nền tảng AI đều chuyển từ "trả lời bằng chữ" sang "trả lời bằng một trang web"Within 18 months all four AI platforms moved from answering in text to answering with a web page
Cuộn xuống: mỗi thẻ làm sáng các mốc của một nền tảng trên dòng thời gian.Scroll down: each card highlights one platform's milestones on the timeline.
Mốc ra mắt hoặc phát hành chính thức theo nguồn công bố; chi tiết và nguồn ở từng thẻ.Launch or general-availability dates as published; details and sources on each card.
03
Bên trong mỗi dashboard HTML chỉ có bốn lớp, và dữ liệu nằm ngay trong fileEvery HTML dashboard has just four layers, and the data lives inside the file
AI đọc dữ liệu và yêu cầu của bạn, viết ra một file; trình duyệt mở file, tải thư viện từ CDN rồi vẽ. Không máy chủ, không cơ sở dữ liệu.AI reads your data and brief and writes one file; the browser opens it, fetches libraries from a CDN and draws. No server, no database.
Một file = bốn lớp + thư việnOne file = four layers + libraries
HTMLKhung: tiêu đề, đoạn văn, vị trí biểu đồSkeleton: headings, text, chart slots
CSSGiao diện: màu thương hiệu, phông, bố cục điện thoạiLook: brand colours, fonts, mobile layout
JSTương tác: lọc, thanh trượt, cuộn kể chuyệnBehaviour: filters, sliders, scrollytelling
DATAMột mảng dữ liệu duy nhất; biểu đồ và con số cùng đọc từ đóOne data array; charts and printed numbers read from it
CDNThư viện tải lúc mở trang: biểu đồ, bảng, bản đồ, bộ máy tính toánLibraries fetched on open: charts, tables, maps, compute engines
CDN là gì?What is a CDN?
Mạng máy chủ phát tệp tĩnh miễn phí như cdn.jsdelivr.net. Một dòng <script src> là có ngay ECharts, Leaflet hay DuckDB, không cần cài đặt.A network that serves static files for free, such as cdn.jsdelivr.net. One <script src> line gives you ECharts, Leaflet or DuckDB with no installation.
<script src="https://cdn.jsdelivr.net/npm/
echarts@6.1.0/dist/echarts.min.js"></script>Luôn ghim số phiên bản (@6.1.0) để trang không đổi khi thư viện ra bản mới.Always pin the version (@6.1.0) so the page does not change when the library ships a new release.
Dung lượng tải (nén gzip) của tệp chính, đo trên gói npm của chính các phiên bản dùng trong 5 dashboard và Lab tuần này. Thang logarit.Download size (gzip) of each library's main file, measured on the npm packages of the versions used in this week's five dashboards and Lab. Log scale.
Ưu điểmPros
Hạn chế cần biếtLimits to know
04
Cùng một dữ liệu, chỉ đổi cách kể: người xem thấy ngay workshop nào thắng trong 3 giây thay vì 30Same data, different telling: the reader sees the winning workshop in 3 seconds instead of 30
Phong cách mà Claude áp dụng cho trang dài: cuộn dọc, mỗi đoạn một phát hiện, biểu đồ đứng cạnh và đổi theo đúng đoạn đang đọc. Bấm "Trước" và "Sau" để so sánh.The style Claude applies to long pages: vertical scroll, one finding per block, the chart beside the text changing with the block being read. Toggle "Before" and "After".
Số người đăng ký 8 workshop trên community.erx.vn, lấy qua MCP lúc 17:14 ngày 08/11/2026 (xem chương 10).Registrations for 8 workshops on community.erx.vn, pulled via MCP at 17:14 on 8 Nov 2026 (see chapter 10).
7 nguyên lý (phần "Sau" áp dụng các mục tô đậm)7 principles ("After" applies the filled ones)
05
Bốn cuốn Storytelling with Data, 1.543 trang, gói lại thành một skill AI đọc khi cầnFour Storytelling with Data books, 1,543 pages, packed into one skill the AI reads on demand
Cole Nussbaumer Knaflic (cùng Alex Velez ở cuốn thứ tư) là bộ sách nền tảng về trình bày dữ liệu cho người làm kinh doanh. Skill knaflic-data-storytelling có 43 chương tóm tắt và khoảng 1.100 hình minh hoạ, để AI kiểm bài của bạn theo đúng khung trong sách.Cole Nussbaumer Knaflic (with Alex Velez on the fourth book) wrote the standard series on presenting data for business. The knaflic-data-storytelling skill holds 43 chapter summaries and about 1,100 figures, so the AI checks your work against the books' frameworks.
Sáu bài học cốt lõi (cuốn 2015)The six core lessons (2015 book)
Big Idea
Một câu nêu quan điểm của bạn và điều người nghe được hay mất. Viết được câu này thì mới mở công cụ.One sentence stating your point of view and what the audience gains or risks. Write it before opening any tool.
Câu chuyện 3 phútThe 3-minute story
Kể được toàn bộ câu chuyện trong 3 phút, không cần slide. Nếu không kể được, câu chuyện chưa rõ.Tell the whole story in 3 minutes without slides. If you cannot, the story is not clear yet.
Mạch kịch tínhNarrative arc
Bối cảnh → căng thẳng tăng → cao trào → kết và lời kêu gọi hành động, thay cho trình tự "tôi đã làm gì".Setting → rising tension → climax → resolution and call to action, instead of a "what I did" sequence.
Gọi skill trong Claude, Copilot CLI, Codex…Calling the skill in Claude, Copilot CLI, Codex…
/knaflic-data-storytelling big idea worksheet
/knaflic-data-storytelling kiểm biểu đồ này theo 6 bài học, chỉ ra chỗ rốireview this chart against the 6 lessons, point out clutter
/knaflic-data-storytelling dashboard to storyTrang này tự diễn giải các khung bằng lời; không chép hình hay đoạn văn từ sách. Mua sách tại storytellingwithdata.com để đọc bản đầy đủ.This page paraphrases the frameworks; no figures or passages are copied from the books. Buy them at storytellingwithdata.com for the full text.
06
book-to-skill biến một cuốn sách 500 trang thành skill với chi phí khoảng 1 USDbook-to-skill turns a 500-page book into a skill for about 1 US dollar
Mã nguồn mở (MIT, phiên bản 1.4.0). Thay vì dán cả cuốn sách vào cuộc hội thoại, nó tách sách thành khung tư duy, quy tắc và từng chương; AI chỉ đọc đúng chương cần cho câu hỏi.Open source (MIT, version 1.4.0). Instead of pasting a whole book into the chat, it splits the book into frameworks, rules and per-chapter files; the AI reads only the chapter a question needs.
Chi phí một lượt chuyển đổi trên Claude Sonnet 4.5 (3 USD/15 USD mỗi triệu token), số liệu do tác giả book-to-skill công bố trong docs/how-it-works.md.Cost of one conversion pass on Claude Sonnet 4.5 ($3/$15 per million tokens), as published by the book-to-skill author in docs/how-it-works.md.
Dùng thế nàoHow to use it
/book-to-skill ./storytelling-with-data.pdf
/storytelling-with-data bài học số 3lesson 3Nhận PDF, EPUB, DOCX, Markdown, HTML, RTF, MOBI; một tệp, một thư mục hoặc nhiều nguồn gộp lại.Takes PDF, EPUB, DOCX, Markdown, HTML, RTF, MOBI; one file, a folder or several sources merged.
Chạy trong Claude Code, GitHub Copilot CLI, Codex, Amp, OpenCode, OpenClaw, Hermes Agent.Runs in Claude Code, GitHub Copilot CLI, Codex, Amp, OpenCode, OpenClaw, Hermes Agent.
Tác giả đo: trả lời một câu hỏi tốn ít token hơn 24–51 lần so với dán cả sách.Author's measurement: answering one question uses 24–51× fewer tokens than pasting the whole book.
Bản quyền: chỉ chuyển sách bạn sở hữu, dùng skill cho cá nhân hoặc nội bộ; không chia sẻ skill chứa nội dung sách ra ngoài.Copyright: convert only books you own, keep the skill for personal or internal use, do not share a skill carrying book content publicly.
07 · Case study 1
Một PDF 117 trang thành sách HTML 117 trang: đọc kiểu cuộn hoặc lật trang, mở thẳng trên máy, không cần CDNA 117-page PDF becomes a 117-page HTML book: scroll or page-flip reading, opens straight from disk, no CDN
Repo Html book chuyển thể AI Agents: The Illustrated Guidebook (Avi Chawla, Akshay Pachaar) thành bản Việt hoá: mỗi trang PDF dựng lại thành một trang HTML cùng khổ, sơ đồ vẽ lại bằng SVG, mã nguồn tô màu, kèm trình đọc riêng.The Html book repo adapts AI Agents: The Illustrated Guidebook (Avi Chawla, Akshay Pachaar) into a Vietnamese edition: every PDF page rebuilt as an HTML page of the same size, diagrams redrawn in SVG, code syntax-highlighted, with its own reader.
Số trang theo phần, đếm từ thuộc tính data-mod của 117 trang HTML trong repo.Pages per part, counted from the data-mod attribute of the 117 HTML pages in the repo.
6 nguyên lý của sách HTML6 principles of an HTML book
Bản quyền: dịch hoặc chuyển thể trọn một cuốn sách thương mại là tác phẩm phái sinh, cần phép của tác giả hoặc nhà xuất bản trước khi chia sẻ; dùng bản PDF mua hợp pháp. Phần này chỉ trình bày phương pháp, không phát hành nội dung sách.Copyright: translating or adapting a whole commercial book is a derivative work that needs the author's or publisher's permission before sharing; use a legally bought PDF. This chapter shows the method only and does not publish the book's content.
08 · Case study 2
Một sheet Excel 15 kỹ năng × 3 cấp độ trở thành công cụ tự đánh giá cho cả nhóm mua hàngAn Excel sheet of 15 skills × 3 levels becomes a self-assessment tool for a procurement team
Khung năng lực của nhóm Procurement Analytics (WWW): 6 giá trị → 12 năng lực → 15 kỹ năng, mỗi kỹ năng mô tả 3 cấp Beginner, Intermediate, Advanced. Bấm tên kỹ năng để đọc định nghĩa, chọn B/I/A để tự chấm.The Procurement Analytics (WWW) competency framework: 6 values → 12 competencies → 15 skills, each described at Beginner, Intermediate and Advanced. Click a skill to read it, pick B/I/A to rate yourself.
Yêu cầu theo vai tròRole requirement→Tự đánh giáSelf-assessment→Hiệu chỉnhCalibration→IDP quy trình 4 bước trong sheet Team Matrix (file gốc chưa có điểm, nên trang không hiện điểm của ai)the 4-step flow in the Team Matrix sheet (the source file has no scores yet, so the page shows nobody's scores)
09 · Case study 3
Năm dashboard chuỗi cung ứng, mỗi cái khoe một năng lực mà Excel không làm đượcFive supply chain dashboards, each showing a capability Excel cannot
Cùng bộ dữ liệu mô phỏng, năm thư viện CDN: SQL trên 200.000 dòng, Python trong trình duyệt, mô hình học máy, bản đồ WebGL và control tower. Để 5 file cùng thư mục với trang này để bấm mở trực tiếp.Simulated data, five CDN libraries: SQL on 200,000 rows, Python in the browser, a machine learning model, a WebGL map and a control tower. Keep the 5 files in the same folder as this page to open them directly.
10 · Case study 4
Kết nối MCP tới community.erx.vn: dashboard đọc thẳng dữ liệu sống, không xuất Excel lần nàoMCP connection to community.erx.vn: the dashboard reads live data with no Excel export at all
MCP (Model Context Protocol) là chuẩn mở để AI gọi công cụ của một hệ thống. Website community.erx.vn có máy chủ MCP riêng với 3 công cụ chỉ đọc; Claude gọi chúng và dựng dashboard từ kết quả.MCP (Model Context Protocol) is an open standard for AI to call a system's tools. community.erx.vn runs its own MCP server with 3 read-only tools; Claude calls them and builds the dashboard from the results.
Người đăng ký theo ngày diễn ra workshop. Nguồn: công cụ MCP search_workshops, lấy lúc 17:14 ngày 08/11/2026.Registrations by workshop date. Source: MCP tool search_workshops, pulled at 17:14 on 8 Nov 2026.
Lời gọi MCP đứng sau con sốThe MCP call behind the numbers
insights_dashboard(days=30)
→ forum.totals.members 387
→ forum.response.asked 14
→ forum.response.answered 2
→ workshops.attendees 576Phát hiện để hành động: chỉ 2/14 câu hỏi trong 30 ngày có trả lời, thời gian chờ trung vị 160 phút. Dashboard sống giúp nhóm điều hành thấy ngay việc cần làm.Finding to act on: only 2 of 14 questions in 30 days got an answer, with a 160-minute median wait. A live dashboard shows moderators the work at once.
Từ ảnh chụp sang trang sống: từ 07/2026, trang Claude publish có thể gọi MCP connector mỗi lần mở, qua kết nối của chính người xem và sau khi họ cho phép. Giới hạn: trang gọi connector không chia sẻ được bằng link công khai.From snapshot to live page: since 07/2026 a published Claude page can call MCP connectors on every view, through each viewer's own connection after they approve. Limit: a page that calls connectors cannot be shared by public link.
11
Hỏi đáp: sáu câu thường gặp, và phần còn lại là của bạnQ&A: six common questions, and the rest is yours
12
Mang về: bài thực hành tuần này bắt đầu bằng dữ liệu của chính bạnTake home: this week's practice starts with your own data
Chọn một file Excel bạn báo cáo hằng tháng, viết Big Idea một câu, rồi nhờ AI dựng trang HTML theo 7 nguyên lý ở chương 04. Đăng kết quả lên community.erx.vn để cả nhóm góp ý.Pick an Excel file you report monthly, write a one-sentence Big Idea, then ask AI to build an HTML page following the 7 principles in chapter 04. Post it on community.erx.vn for feedback.
VSCN Workshop #29
Cảm ơn anh chị!Thank you!
Nguyễn Minh Ngọc · CEO ERX Vietnam · community.erx.vn
Cho mình hỏi là tải các template mà anh Ngọc đã đề cập trong buổi WS ở đâu ạ?