我喜欢这种微交互 ❤️

没有多余按钮，没有杂乱界面，隐藏故事的风险几乎为零。 但它能激发探索欲，让数据鲜活起来。

既然AI已消除技术壁垒，这难道不该成为常态吗？

图表由J. King制作，来源：https://t.co/25xAYT9jBU https://t.co/Zu1oyGKqpY

D3 ❤️ React | 学习d3.js的最佳途径

课程来源：https://www.react-graph-gallery.com/react-d3-dataviz-course 🚀 10月5日开课，9月6日前享早鸟价

终于掌握数据可视化：学习D3.js

D3.js是数据可视化领域的终极工具，但学习曲线陡峭。本课程将其与React和AI结合，助你构建想象中的任何可视化效果。

既强大又痛苦

D3.js（https://d3js.org/）是网页数据可视化的黄金标准。与ggplot2、Matplotlib甚至JavaScript图表库不同，D3让你完全掌控每个像素。

但坦白说：学习D3是痛苦的。

API庞大复杂。文档默认你已掌握基础。教程零散、过时或充满反模式。你最终只能复制粘贴不理解的代码，拼凑出脆弱的图表，一尝试定制就崩溃。

最重要的是，网络上大多数示例未使用React——这个构建现代UI的标准库能消除99%的开发摩擦。

终于让知识融会贯通

如今AI可自动生成80%代码，入门门槛空前降低。既然能掌握真正强大的工具，为何还要满足于功能有限的图表库？

本课程提供零散教程无法给予的：清晰的心智模型，理解交互图表的运作原理。你将从基础开始学习D3与React的现代结合方式。

你不仅将构建散点图或柱状图，更要理解底层原理——从而能够创建任何想象中的可视化。

课程结束时，AI将成为你的副驾驶，而你已掌握驾驭它的技能。唯一的限制将是你的想象力。

欢迎来到网页数据可视化的最佳学习途径，它叫做：

D3

心形符号

React

React引领UI开发，D3引领数据可视化。 学习二者如何协同工作。

是时候进入新世界了

这里几乎所有人都曾被工具所困：Shiny、Tableau、Power BI，或毫无编程基础。看看他们现在能构建什么。

Mandy曾是没有技术背景的静态信息图设计师。现在她的作品会动了。

“对于非程序员来说，这是变革性的突破。”

⚡️ 循序渐掌握D3.js

你将从前端开发基础开始，逐步学习D3.js和React，一次一个概念，直至能够构建任何东西。

你将打造惊艳图表

课程结束时，你将具备构建几乎任何可视化的能力。每个模块都以实战项目结尾，你可以在\#share-your-vizDiscord频道分享作品。

使用React和D3制作的散点图实际案例真实应用场景 复现展示各国二氧化碳数据的Data Wrapper图表

https://www.react-graph-gallery.com/scatter-plot#real%20lifeGIF展示箱线图与小提琴图之间的镜像过渡箱线图转小提琴图 展示箱线图与小提琴图差异的交互式示例

https://www.react-graph-gallery.com/violin-plotGIF展示自定义蜂群图的交互效果交互式蜂群图 带悬停效果、注释和搜索栏的交互式蜂群图

https://www.react-graph-gallery.com/example/beeswarm-interactive-searchGIF展示用D3和React制作的自定义人口金字塔人口金字塔 高度定制的人口金字塔可视化

https://www.react-graph-gallery.com/example/population-pyramidGIF展示用D3和React制作的自定义人口金字塔人口金字塔 高度定制的人口金字塔可视化

https://www.react-graph-gallery.com/example/population-pyramidGIF展示通过滑块即时控制箱宽的直方图箱宽调节滑块 通过此交互式示例观察箱宽对直方图的影响

https://www.react-graph-gallery.com/example/histogram-slider-bin-sizeGIF展示在数据集间动态转换的雷达图、折线图和棒棒糖图动态转换的雷达图、折线图与棒棒糖图 连接同一按钮的三个图表，点击按钮时实现平滑同步动画

https://www.react-graph-gallery.com/example/radar-chart-animation简单的树状图图片悬停效果 通过悬停效果高亮显示特定组的树状图

https://www.react-graph-gallery.com/treemap#hover%20effectGIF展示具有多种交互功能的河流图河流图应用 可通过滑块缩放时间戳并带交互式图例的河流图

https://www.react-graph-gallery.com/streamchart#application

适合人群

任何数据可视化爱好者都会喜欢这课程。但如果你符合以下情况，会尤其受益：

你需要惊艳的定制化视觉效果

D3是唯一能构建任何东西的工具。没有限制，没有妥协——只有完全的创作自由。

你尝试过D3但遇到了瓶颈

你复制粘贴了不理解的代码，一尝试定制图表就崩溃。

你已超越基础图表库

Shiny、Streamlit、Recharts、Chart.js或Plotly让你入门……但你想要更上一层楼。

你想提升React技能

你熟悉React，但掌握D3将让你脱颖而出，开启专业领域的职业道路。

没有HTML或JavaScript经验？没问题。前两个模块将教授基础知识。

👋 你好！我是Yan Holtz。

热爱❤️教育内容的高级软件工程师。

Yan Holtz照片

过去五年，我在Datadog全职构建交互式生产级图表——深谙现实世界的最佳实践。

我还通过其他课程教导了超过2,000名学生编程和数据可视化，分享让复杂主题变得平易近人的模式和思维模型。

你可能通过我R语言（https://www.r-graph-gallery.com/）、Python（https://www.python-graph-gallery.com/）、D3.js（https://www.d3-graph-gallery.com/）和React（https://www.react-graph-gallery.com/）的图表库认识我，或通过我的获奖平台Data-to-Viz.com（https://www.data-to-viz.com/）和Dataviz-Inspiration.com（https://www.dataviz-inspiration.com/）。

本课程是我循序渐进掌握D3.js和React交互式生产级可视化的方法，融合现实世界模式、思维模型和实践项目。

加入我，短短几小时内，你将获得构建复杂动态图表的技能和信心🔥。

学员评价

首批学员超过300人，他们都构建了定制化交互图表。许多学员慷慨留下了评价：

Yan在我们MIT研究中心进行了一场关于数据可视化的精彩演讲，我们从他的专业知识中获益良多！

他的工具、研讨会和培训资源对任何想要提升数据可视化技能的人来说都极其宝贵，我们强烈推荐探索它们。

我参加了Yan的其他两门课程，productivity-r-workflow和matplotlib-journey，它们都非常出色。

清晰、结构严谨、极具洞察力。我强烈推荐它们，并迫不及待地想学习这门新课程！

Yan出色地创建了一门高效课程，帮助你理解如何用D3.js创建自定义可视化，同时保持趣味性😄

这门课程是我学过的最实用的D3与React学习资源之一。

即使有时需要参考解决方案，这个过程也让我学到了很多。理论与实践的平衡恰到好处，我特别欣赏练习如何培养直觉而非死记硬背。

我参加了Yan为期两天的D3和React培训。

得益于他的细心，他建议的方法非常适合我的技能水平和业务需求。通过理论结合（大量！）实践，他以极高的清晰度讲解复杂主题。

我现已有坚实基础继续学习，并收获了许多让未来工作更轻松的技巧和方向。

React图表库（https://www.react-graph-gallery.com/）在我学习交互式网页数据可视化的过程中是宝贵资源。

课程清晰、简洁、直击要点。图表模板简洁优雅、视觉美观，对快速入门特定可视化极其有用。

我强烈推荐给任何想要提升数据可视化技能的人！

学员评价照片

Yan确实是我遇到的最好的数据可视化教师之一。React + D3课程结构非常合理，短小精悍的课程环环相扣。

我已学完一半，就能展示实际项目了。社区部分让学习体验更佳。强烈推荐！

我到现在都超爱这门课程😭😭😭所有内容都讲解得如此清晰，曾经难以理解的部分现在都豁然开朗。我感到被引导并获得了学习的力量🥹

在这个AI时代，文字也写得如此出色、如此人性化！感谢这一点，也许我的兴奋有点早，但这门课程现在感觉像是一颗真正的宝石。

学员评价照片

我很兴奋能参加这门D3与React课程，直接向Yan这样优秀的DataViz设计师学习。课程完全符合我的期望：内容精彩、结构清晰、沙盒课程全面、练习项目引人入胜，让我真正在机器上从零开始创建并发布到GitHub——这是许多课程缺乏的真实世界学习体验。

如果在学习过程中有任何问题，Yan非常活跃，随时提供支持。

我昨晚熬夜到凌晨1点，因为调整和学习React的方方面面太有趣了！感谢Yan组织这门课程，我期待继续学习！

我喜欢它的实用性，并感谢你给予学生的所有支持。

我曾尝试学习D3但放弃了🙈。你的课程完全不同层次😉

我爱它！

不敢相信我已经学到了这么多，而且非常满足。就像终于有了一扇通往未知世界的大门。

格式完美，非常聪明，直击要点。再次感谢你组织这门课程！

强烈推荐。这门课程超越了学习体验。Yan为学习不仅基础概念还有高级概念提供了恰到好处的理论与实践。

从开始你就能将所学付诸实践，开始构建惊艳的作品，增加你对课程的投入度。这一切伴随着非常协作的框架，其他学生和Yan本人都非常乐于助人且响应迅速。

课程绝对精彩！！！我爱它！😻这是我上过的最好的课程之一！这正是我所期望的，有太多东西要学，设计可能性无穷无尽。🙂

我将所学应用于个人项目，太有趣了。昨天我在电脑前坐了一整天直到午夜😅时光飞逝！

感谢你构建这门课程并分享你的知识❤️。它为我打开了一个新世界！

我关注Yan的数据可视化帖子多年了。我知道他有使用R和Python的数据可视化课程，但在2026年初我注意到他创建了结合D3和React的数据可视化课程。在之前使用DC.js等库取得小成功后，我多年来一直尝试正确学习D3。但我从未真正觉得能用D3成功构建任何东西。然后我开始了Yan的课程…

课程从Web开发和React的基础技术概述开始。如果你从未接触过这些，学习曲线可能陡峭，但Yan创建了数十个小测验来巩固每部分的学习。

然后你将学习不同部分，每部分都以构建特定数据可视化的迷你作业结束。这是见证自己构建实物的绝佳方式。我过去挣扎于严重的拖延症，但发现这些较小的练习和作业让我更容易克服拖延，达到足够理解并构建东西的程度。

我还有很多要学，但这门课程的妙处在于，一旦注册，你将永久访问材料。

毫无疑问，这是我完成过的最好的D3课程，我强烈推荐给任何想学习D3的人。

Yan Holtz创建了一个令人惊叹的在线D3课程，我正在学习。除了超级易懂的课程外，还有一个Discord社区，让你不会感到孤单，而且Yan非常积极地回答问题，每周五主持两次直播答疑。

最近，我通过Yan Holtz的课程探索D3和React，我非常喜欢。它结构合理、精心设计，已经让我们对网页创建和构建方式有了扎实的高层次理解。

学员评价照片

D3 ♥️ React课程是我希望在线编程课程具备的：结构清晰、非常实用、有反馈和社区。

对我这样既是职场人士又是繁忙家长的学习者来说，能够灵活且终身访问课程是明显优势。让我选择它的另一点是提供完成证书。

我喜欢构建真实的东西，而Yan的知识和专长使这成为可能。

这门课程有罕见的品质：它让你充满好奇。它让我看到了可能性。

我开始时对D3.JS和React一无所知，虽然仍在学习中，但我已发现自己不再害怕，并更有信心将视觉效果提升到新水平。Yan出色地揭开了那些在我参加课程前看似遥不可及的视觉效果背后的魔法。

我尝试学习D3多年，收效甚微。浏览D3和Observable文档从未让我开窍，我总觉得很困惑，直到我发现了D3 ❤️ React课程。

这门课程带你从基础快速构建惊艳的网页数据可视化。你不仅能掌握D3，还能获得为现代时代构建的技术栈。我强烈推荐给任何对D3和现代Web应用开发感兴趣的人！

我对整个课程的数量和质量都非常满意。很明显Yan知道自己在说什么（而且他总是在那里帮忙）。物超所值！

这门课程是真正的投资。它让我从零知识，到理解构建我理想中交互式数据可视化所需的所有关键要素，并确信我知道自己（和AI）在做什么。

学员评价照片

João Santos 🇬🇧 (https://www.linkedin.com/in/jo%C3%A3o-garcez-aurelio-santos/)曼彻斯特大学研究助理与试验经理

课程结构极其清晰，节奏合适，Discord小组绝对是加分项。关键方面都解释得非常好，所创造的学习环境确实最大化了学习体验。我