Skip to content
← 返回 hands-on-data-visualization
← 返回 hands-on-data-visualization

ch-0011 Chapter 10: Edit and Host Code with GitHub

  • 原书章节: Chapter 10 Edit and Host Code with GitHub（pp. 265–294）
  • 输入来源: 本地 pdf（HandsOnDataViz.pdf）

摘要

本书上半场依赖 Google/Tableau 等第三方平台，缺点是定制受限、且受平台条款与服务存续 制约。本章带领读者"大跳一步"：学会在 GitHub 上复制（fork）、编辑并托管开源代码 模板，把图表/地图发布到自己控制的网站（GitHub Pages）。作者用"菜谱"比喻：模板 就是公开菜谱，fork 就是抄一份再按自己口味改（如加核桃），还能回馈社区。

GitHub 基础：repo（代码仓库）像公开菜谱集；开源许可证决定能否商用（MIT License 宽松、可商用）；平台有网页界面与桌面工具（GitHub Desktop）+ 编辑器（Atom）。

实战流程（以 leaflet-map-simple 模板为例）：用 GitHub 的 template 功能创建自己的 repo → 在网页里找到 EDIT here 注释修改代码（如改成自己的地名/坐标）→ 用 GitHub Pages 发布成公开网页 → 再把网页链接接回 repo，形成一个"编辑 ⇄ 预览"双标签页工作流。 教程最后演示把 GitHub Pages 链接转成 iframe 嵌到自己的网站（衔接 ch-0010），以及 GitHub Desktop 批量上传文件与 Atom 高效编辑。

要点归纳

  • 代码模板（code template）= 预写好的软件指令，改数据即可发布，无需编程经验
  • fork（复制）他人 repo → 修改 → 重新公开分享，是开源协作的基本动作
  • GitHub Pages 把 repo 变成免费公开网站，是代码模板的默认宿主
  • 许可证决定使用权：MIT 可商用（Chart.js 用它），有些库仅限非商业（Highcharts， 详见 ch-0012）
  • 用 EDIT here 注释定位可改行，是最友好的"代码-好奇者"入口

术语 / 概念

  • GitHub — 全球最大的代码托管平台（微软旗下）
  • repository（repo，仓库） — 存放代码与文件的目录单位
  • fork（派生） — 复制他人 repo 到自己的账号下再修改
  • GitHub Pages — 用 repo 免费托管静态网站的功能
  • code template（代码模板） — 可直接套用的预写代码骨架
  • open-source license（开源许可证） — 规定代码使用/分发/商用权限（MIT 等）
  • README — repo 的说明文件（通常用 Markdown 写）

原句摘录

Code templates are similar to cookbook recipes... Recipes are templates, meaning that you can follow them precisely, or modify them to suit your tastes.

...you can never be sure that third-party apps will remain free, or at least have a free tier, forever, whereas open-source tools are here to stay, free of charge, as long as someone maintains the code.

疑问 / 待查

  • 本书模板放在 HandsOnDataViz 组织的 GitHub 账号下，可直接 fork 实操
  • GitHub 2020 年把默认分支从 master 改为 main（书中提及），实操时注意分支名
Backlinks (1) 
flowchart LR
  n0["ch-0001 Introduction（为什么做数据可视化）"]
  n1["ch-0002 选工具讲你的数据故事（Ch 1）"]
  n2["ch-0003 强化电子表格技能（Ch 2）"]
  n3["ch-0004 找到并质询你的数据（Ch 3）"]
  n4["ch-0005 清洗脏数据（Ch 4）"]
  n5["ch-0006 做有意义的比较（Ch 5）"]
  n6["ch-0007 图表化你的数据（Ch 6）"]
  n7["ch-0008 地图化你的数据（Ch 7）"]
  n8["ch-0009 表格化你的数据（Ch 8）"]
  n9["ch-0010 嵌入网页（Ch 9）"]
  n10["ch-0011 用 GitHub 编辑与托管代码（Ch 10）"]
  n11["ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"]
  n12["ch-0013 Leaflet 地图模板（Ch 12）"]
  n13["ch-0014 转换你的地图数据（Ch 13）"]
  n14["ch-0015 识别谎言、减少偏差（Ch 14）"]
  n15["ch-0016 讲述并展示你的数据故事（Ch 15）"]
  n16["ch-0017 附录 A 排查常见问题"]
  n17["Hands-On Data Visualization（整理完成）"]
  n18["Hands-On Data Visualization 笔记"]
  n19["Reading"]
  n17 --> n0
  n17 --> n1
  n17 --> n2
  n17 --> n3
  n17 --> n4
  n17 --> n5
  n17 --> n6
  n17 --> n7
  n17 --> n8
  n17 --> n9
  n17 --> n10
  n17 --> n11
  n17 --> n12
  n17 --> n13
  n17 --> n14
  n17 --> n15
  n17 --> n16
  n17 --> n18
  n19 --> n17
  click n0 "../ch-0001/" "ch-0001 Introduction（为什么做数据可视化）"
  click n1 "../ch-0002/" "ch-0002 选工具讲你的数据故事（Ch 1）"
  click n2 "../ch-0003/" "ch-0003 强化电子表格技能（Ch 2）"
  click n3 "../ch-0004/" "ch-0004 找到并质询你的数据（Ch 3）"
  click n4 "../ch-0005/" "ch-0005 清洗脏数据（Ch 4）"
  click n5 "../ch-0006/" "ch-0006 做有意义的比较（Ch 5）"
  click n6 "../ch-0007/" "ch-0007 图表化你的数据（Ch 6）"
  click n7 "../ch-0008/" "ch-0008 地图化你的数据（Ch 7）"
  click n8 "../ch-0009/" "ch-0009 表格化你的数据（Ch 8）"
  click n9 "../ch-0010/" "ch-0010 嵌入网页（Ch 9）"
  click n10 "./" "ch-0011 用 GitHub 编辑与托管代码（Ch 10）"
  click n11 "../ch-0012/" "ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"
  click n12 "../ch-0013/" "ch-0013 Leaflet 地图模板（Ch 12）"
  click n13 "../ch-0014/" "ch-0014 转换你的地图数据（Ch 13）"
  click n14 "../ch-0015/" "ch-0015 识别谎言、减少偏差（Ch 14）"
  click n15 "../ch-0016/" "ch-0016 讲述并展示你的数据故事（Ch 15）"
  click n16 "../ch-0017/" "ch-0017 附录 A 排查常见问题"
  click n17 "../" "Hands-On Data Visualization（整理完成）"
  click n18 "../notes/" "Hands-On Data Visualization 笔记"
  click n19 "../../" "Reading"