{{sindex}}/{{bigImglist.length}}
{{memberInfo.real_name}}
{{commentname}}

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)!

{{newsData.publisher_name}} {{newsData.update_time}} 浏览:{{newsData.view_count}}
来源 | {{newsData.source}}   作者 | {{newsData.author}}

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


2022年6月1日,Narrative Chart(中文名 “纳图” ) 正式开源!这是一款由同济大学智能大数据可视化实验室耗时一年半,设计开发的一款专门用于支持「叙事性可视化」创作的数据可视化图表库。与已有的图表库相比,Narrative Chart 将可视化设计的创作过程分解成独立的设计行为,并实现了数据筛选、标注、动效、装饰等一系列与可视化设计创作息息相关的核心操作。用户可以通过排列组合这些操作,实现可视化叙事过程中的各种设计需求。利用 Narrative Chart ,开发者、设计师、分析师,甚至是有作图需求的大众用户,可以通过直观易懂的语法,创作出丰富多彩的叙事性可视化图表。欢迎访问官网查阅更多信息:https://narchart.github.io/手机端可点击 “阅读原文” 或扫描以下二维码访问进行浏览。


我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


简单易懂的可视化创作语法

使用 NarrativeChart,用户可以通过一系列直观的设计 “行为”(action)完成对图表的设计与配置。以下图所示的 ScatterPlot 为例,用户可以通过规划设计行为序列,实现对散点图的创建,并为之添加标题及说明文字(向右滑动图片可查看相关代码)。
我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客
我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客

在上述基础上,用户可以进一步使用 "add encoding"、“modify encoding” 和 “remove encoding” 行为,添加、修改或删除数据映射,完成对于图表的配置与修改。
我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客
我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


多样化的图表类型


Narrative Chart 支持柱状图、折线图、散点图、饼图、单元可视化等多种常见图表类型,用户可以通过区区数行代码完成图表的绘制。

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


单元可视化为例。通过 “add chart” 行为,选择单元(unit)的数据标记后,再将数据用 “add encoding” 行为映射到数据轴上,即可轻松完成图表的创作。
我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客
我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客
 


丰富的信息呈现效果


Narrative Chart 旨在帮助用户进行直观有效的可视化叙事,即 帮助用户讲好一个 “数据故事”。其内部支持对色彩、字体、图形等多种设计元素的自定义,并允许用户在图表上添加注释、配饰,及动画。Narrative Chart 更是内置了明、暗两种基本色彩模式,并通过控制配色,实现了8种情感表达模式,极大地丰富了用户的叙事体验。

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客

 
在 Narrative Chart中,用户可以添加 13种常见的图表注释,用于强调、对比、凸显数据中的重要信息。

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


用户还可以调整图表的外观样式及装饰效果,用以根据需求创作风格迥异的信息图:

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


灵活多变的可视化动效


Narrative Chart 中,无论是图表、注释,还是装饰、标题,都可以添加动画效果。只需在对应的“行为”中配置 “animation” 属性,并设置动画时长,画布上的元素就会自动按顺序以动画的形式进行播放,让创作动效变得易如反掌。

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


丰富的在线资源



Narrative Chart 官方网站提供了详细的在线文档供初学者学习参考。

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客

 
“Gallery”页面展现了丰富多彩的开源设计案例。点击案例图片,即可打开语法编辑器查看相应的代码,并对设计作品进行在线编辑。

我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客

 

反馈及贡献


欢迎为 Narrative Chart 点赞加星欢迎通过  idvx.lab (at) gmail.com 反馈相关问题,并加入 Narrative Chart 生态系统及开源社区。




来源 / 同济大学智能大数据可视化实验室


我院iDVX实验室发布叙事可视化图表库 Narrative Chart(纳图)! 崇真艺客


{{flexible[0].text}}
{{newsData.good_count}}
{{newsData.transfer_count}}
Find Your Art
{{pingfen1}}.{{pingfen2}}
吧唧吧唧
  • 加载更多

    已展示全部

    {{layerTitle}}
    使用微信扫一扫进入手机版留言分享朋友圈或朋友
    长按识别二维码分享朋友圈或朋友
    {{item}}
    编辑
    {{btntext}}
    艺客分享
    {{mydata.real_name}} 成功分享了 文章
    您还可以分享到
    加载下一篇
    继续上滑切换下一篇文章
    提示
    是否置顶评论
    取消
    确定
    提示
    是否取消置顶
    取消
    确定
    提示
    是否删除评论
    取消
    确定
    登录提示
    还未登录崇真艺客
    更多功能等你开启...
    立即登录
    跳过
    注册
    微信客服
    使用微信扫一扫联系客服
    点击右上角分享
    按下开始,松开结束(录音不超过60秒)