关闭

数据可视化QQ群

你会遇到一群最早的D3研究者、布道者和实践者。...
阅读(2325) 评论(1)

【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制

桑基图是流图(flow diagram)的一种,用来描述能量,人口,经济等的流动情况。 桑基图主要关注能量、物料或资本等在系统内部的流动和转移情况。起始流量和结束流量相同;在内部,不同的线条代表了不同的流量分流情况,它的宽度成比例地显示此分支占有的流量;节点不同的宽度代表了特定状态下的流量大小。...
阅读(9664) 评论(13)

【D3.js数据可视化实战】--(2)本地时间轴

背景需求 绘制效果 实现思路 关键技术 完整代码背景需求 使用D3绘制图表一般都会绘制一个坐标轴,但是用D3画过图的同学都知道默认情况下绘制的坐标轴刻度是英文的。但是我们要的刻度是中文的。怎么办呢?且看本文讲解如何绘制本地时间轴。 绘制效果实现效果如何,先来一睹为快! 默认格式化: d3.time.format("%b %Y") 本地格式化: zh.timeFormat("%Y年%b")实现思路...
阅读(5625) 评论(0)

【D3 API 中文手册】

D3 API 中文手册提交记录声明:本文仅供学习所用,未经作者允许严禁转载和演绎 《D3 API 中文手册》是D3官方API文档的中文翻译。始于2014-3-23日,基于VisualCrew小组的六次协作任务之上,目前已经大致翻译完毕,将陆续向官网提交D3 API 中文版。 本文主要内容有: 列举初版翻译/校对人员列表 记录中文翻译的官网提交情况 提供校对联系方式 提供D3...
阅读(10173) 评论(3)

【55种开源数据可视化工具简介】

大数据时代数据可视化成为理解和表达数据的有效甚至是唯一的手段。 工欲善其事必先利其器,本文对55个流行的数据可视化工具开源协议,主页,文档,案例等资源的简介,其中包括著名的D3.js,R,Gephi,Raphaël,Processing.js,Tableau Public,Google Chart Tools,Arbor.js等...
阅读(7355) 评论(0)

【D3.js数据可视化实战】--(1)绘制网格线

我们常常使用常规图表(直方图,折线图等)来表现数据。为了清楚的表示数据在数轴上的哪个数值区间,会直接在矩形和点上标注数值。除了这个办法外,还可以使用色调偏淡的网格作为背景参照。本文介绍了如何使用D3绘制网格线的小技巧: 绘制效果: 思路很简单:1 绘制SVG容器。2 给SVG分组,并设置分组的样式类。3 为分组分别添加横线和竖线。 关键技术介绍(1) 生成一个10元素的数组:(2) 定义x和y比例...
阅读(6043) 评论(0)

【D3相关资料整理】持续更新中......

D3的资料...
阅读(14262) 评论(1)

【D3中文api文档制作小组英雄帖】

1 背景 大数据的时代,信息获取已经不是问题,从浩繁的数据洪流中挖掘出知识的方法、技术和理论也层出不穷。如何把大量数据有效的展示给用户,如何突出数据的语义和价值,如何方便用户快速的理解就是数据处理和分析之后面临的一个重要难题。数据可视化的研究课开发渐渐解决了上述问题。 作为技术人员的各位英雄豪杰,我们应该身先士卒,冲锋陷阵,奋斗在大数据浪潮的最高点。现在D3可视化开发如火如荼的进行着,而我天朝...
阅读(4005) 评论(3)

【D3.js数据可视化系列教程】(三十六)-- 冰柱图

冰柱图使用D3的分区布局实现,主要用来展现数据的层次和包含关系。实际上使用笛卡尔排列的分区布局数据绘制的就是冰柱图,径向排列就是旭日图。...
阅读(9432) 评论(8)

【D3.js数据可视化系列教程】(三十五)-- 矩形树

TreeMap由Ben Shneiderman于1991年推出,TreeMap递归细分面积成矩形。与邻接图相比,树中任何节点的大小迅速显现出来。树形图是使用颜色区分类别,用嵌套的方形表示层次关系的布局。例如本例中,A包含B,B包含C...D包含E,每一类的颜色都一样,且每一类互不相同。   testD3-33-paddingTree.html .node { border: solid 1px white; font: 10px sans-serif; line-height: 12...
阅读(7782) 评论(2)

【D3.js数据可视化系列教程】(三十四)-- sankey图

好多没看懂。先把理解的放着吧 Sankey Diagram4 #chart { height: 500px; } .node rect { cursor: move; fill-opacity: .9; shape-rendering: crispEdges; } .node text { pointer-events: non...
阅读(9871) 评论(26)

【D3.js数据可视化系列教程】(三十三)-- 力导向图之图片和提示

在力导向图之带文字的基础上添加图片和提示 img&tip.png   //设置图片 node.append("svg:image") .attr("class", "circle") .attr("xlink:href", "http://localhost:8080/spring/imgs/myself.PNG") .at...
阅读(8443) 评论(10)

【D3.js数据可视化系列教程】(三十二)-- 力导向图之弧形箭头连线

弧形箭头连线...
阅读(10034) 评论(9)

【D3.js数据可视化系列教程】(三十一)-- 力导向图之分子式

其实就是简单的力导向图 只是加载了json文件 设置了分层的颜色 设置化学键分隔线 //(1)平方根比例尺 var radius = d3.scale.sqrt()     .range([0, 6]);//值域   (2)连线是两个圆半径之和+20那么长 .linkDistance(function(d) {//(2)连线是两个圆半径之和+20那么长...
阅读(5872) 评论(0)

【D3.js数据可视化系列教程】(三十)--力导向图之带文字

//(1)链接数组 var links = [   {source: "Microsoft", target: "Amazon", type: "licensing"    ,weight:1,color:1},      {source: "Microsoft", target: "HTC", type: "licensing"       ,weight:3,color:4},...
阅读(7714) 评论(3)

【D3.js数据可视化系列教程】(二十九)--折叠树

折叠树...
阅读(9236) 评论(8)

【D3.js数据可视化系列教程】(二十八)--弦图

弦布局...
阅读(7462) 评论(1)

【D3.js数据可视化系列教程】(二十七)--径向树

径向树...
阅读(8289) 评论(5)

【D3.js数据可视化系列教程】(二十六)--加载SVG文件

加载svg...
阅读(5570) 评论(6)

【D3.js数据可视化系列教程】(二十五)--加载csv文件

加载csv文件...
阅读(7821) 评论(1)
44条 共3页1 2 3 下一页 尾页
    个人资料
    • 访问:500432次
    • 积分:6150
    • 等级:
    • 排名:第4186名
    • 原创:73篇
    • 转载:0篇
    • 译文:2篇
    • 评论:210条
    博客专栏
    联系方式
    最新评论