Timeline Storyteller 是一种富有表现力的视觉叙事环境,用于在浏览器或 Microsoft Power BI 中呈现时间线。
使用它通过时间线表示、比例和布局的调色板以及用于过滤、突出显示和注释的控件来呈现时间线数据的不同方面。要了解有关该项目的研究的更多信息,请参阅时间线revisited.github.io ,其中包括对时间线工具的调查和 200 多个定制时间线。
查看这些使用 Timeline Storyteller 制作的时间线和时间线故事的示例。
马修·布雷默
李奉信
娜塔莉·亨利·里奇
达伦·埃奇
克里斯托弗·怀特
凯特·利特维涅茨
大卫·蒂茨沃斯
克隆此存储库的主分支: git clone https://github.com/Microsoft/timelinestoryteller.git
确保安装了nodejs、npm 和yarn。
在存储库的根目录打开终端并安装节点模块: yarn
或npm_install
。
构建 public/app/timelinestoryteller.js: npm test
启动节点服务器: npm start
打开本地主机:8000
应用程序源代码可以在 src/ 目录中找到。
该存储库包含作为独立 Web 应用程序的 Timeline Storyteller 的源代码。要为 Power BI 生成 Timeline Storyteller 自定义视觉对象,请参阅 github.com/Microsoft/PowerBI-visuals-TimelineStoryteller。
Timeline Storyteller 目前支持 CSV、JSON 或 Google 电子表格格式的事件数据集。
每个事件由以下属性指定:
必需: start_date
,日期:YYYY、YYYY-MM-DD 或 YYYY-MM-DD HH:MMZ (ISO 8601) 格式受支持(Z 是指定 UTC 所必需的,否则 HH:MM 将取决于时区)。允许 BC 日期,例如 -27、-13800000000
可选: end_date
,日期:使用与start_date
相同的格式
可选: category
,与事件类别相对应的字符串(Timeline Storyteller 将其编码为颜色)
可选: facet
,对应于事件的另一个类别的字符串(Timeline Storyteller 使用它来创建分面时间线布局;如果需要, category
和facet
可以相同)
可选: content_text
,事件的字符串描述(Timeline Storyteller 将其公开为事件注释)
{ "start_date":"1775", "end_date":"1783", "content_text":"American Revolutionary War: an armed struggle for secession from the British Empire by the Thirteen Colonies that would subsequently become the United States.", "facet":"North America", "category":"North America" },
标题行:
start_date,end_date,content_text,facet,category
事件行示例:
1775,1783,American Revolutionary War: an armed struggle for secession from the British Empire by the Thirteen Colonies that would subsequently become the United States.,North America,North America
以下是 Google 表格中 Timeline Storyteller 演示中使用的 The Daily Routines of Famous Creative People 演示数据集。
确保电子表格已发布(打开 Google 电子表格“文件”菜单,选择“发布到网络”)。
确保start_date
和end_date
列的格式设置为文本而不是日期(例如'1926-06-29
)。
必需:电子表格 URL
可选:此数据集的工作表标题(即选项卡名称): dailyroutines
在 Timeline Storyteller 的加载对话框中输入电子表格 URL 和工作表标题。
请注意,更详细的使用说明可在timelinestoryteller.com 上找到。
加载时间线数据(演示数据集、JSON、CSV、Google 电子表格)或保存的时间线故事(扩展名为 .cdc 的 JSON Blob;请参阅步骤 6)
从屏幕顶部的菜单中选择表示、比例和布局的组合;仅部分组合有效;请参阅我们为您的故事选择适当组合的指南。将鼠标悬停在这些选项上可查看描述它们如何有用的工具提示。
编辑画布
单击事件以使用其content_text
标签进行注释;调整标签大小和重新定位; SHIFT + 单击可突出显示事件而不显示标签。
用标题和图像进行注释;调整标题和图像的大小和位置。
按类别、方面或细分过滤事件。通过突出显示强调匹配事件(不强调不匹配事件)进行过滤。
您还可以通过隐藏不匹配的事件来进行过滤。
将当前画布记录为场景,其中保留标签、标题和图像。进入播放模式,导航到上一个/下一个录制的场景。
将当前画布导出为 PNG、SVG。
将场景导出为动画 GIF 或 JSON Blob(.cdc 扩展名)。
时间线讲故事的人
版权所有 (c) 微软公司
版权所有。
麻省理工学院许可证
特此免费授予获得本软件和相关文档文件(以下简称“软件”)副本的任何人不受限制地使用本软件,包括但不限于使用、复制、修改、合并、发布的权利、分发、再许可和/或出售本软件的副本,并允许向其提供本软件的人员这样做,但须满足以下条件:
上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。
本软件按原样提供,不提供任何明示或暗示的保证,包括但不限于适销性、特定用途的适用性和不侵权的保证。在任何情况下,作者或版权持有者均不对因本软件或本软件的使用或其他交易而引起的或与之相关的任何索赔、损害或其他责任负责,无论是合同、侵权还是其他行为。软件。
如果您使用 Timeline Storyteller 为研究论文制定时间线,您可以通过两种方式引用我们。您可以引用该工具本身:
@misc{TimelineStoryteller, author = {Matthew Brehmer and Bongshin Lee and Nathalie Henry Riche and Darren Edge and Christopher White and Kate Lytvynets and David Tittsworth}, title = {Microsoft Timeline Storyteller}, year = {2017}, note = {url{https://timelinestoryteller.com}} }
或者您可以引用我们最近关于时间线设计空间的期刊论文:
@article{Brehmer2016, author = {Matthew Brehmer and Bongshin Lee and Benjamin Bach and Nathalie Henry Riche and Tamara Munzner}, title = {Timelines Revisited: A Design Space and Considerations for Expressive Storytelling}, journal = {IEEE Transactions on Visualization and Computer Graphics (TVCG)}, year = {2017}, volume = {23}, issue = {9}, pages = {2151--2164}, doi = {10.1109/TVCG.2016.2614803}, ISSN = {1077-2626} }
普里斯特利的传记表
公元前 8 世纪以来的伟大哲学家
历史上最大的帝国
东亚王朝
14世纪以来的流行病
加拿大总理
法国总统
德国总理
意大利总统
日本首相
英国首相
美国总统
C4-5 飓风:1960-2010
著名创意人士的日常生活 - Accurat 的“可视化画家的生活”
Accurat 的“从首次出版到杰作”
库兹韦尔的《奇点倒计时》
Mayra.artes 为 Wait But Why 创作的“时间视角”
蒂姆·厄本为《Wait But Why》创作的《典型美国人的生活》
所有图标 CC BY 3.0,按名称和作者:
复选标记(亚瑟·施莱恩)
日历(基里尔·托米洛夫)
时间线(亚历山大·比科夫)
gif 文件 (Pranav Grover)
png 文件 (Pranav Grover)
svg 文件 (Pranav Grover)
json 文件 (Pranav Grover)
csv 文件 (Pranav Grover)
驾驶(丹尼斯·克柳奇尼科夫)
网格(Doejo)
文件夹 (iconoci)
过滤器(创意外壳)
图像(创意外壳)
引号 (Veronika Krpciarova)
销(亚历山大·切尔金斯基)
橡皮擦(泰伦斯·凯文·奥利里)
隐形(小A)
书(Setyo Ari Wibowo)