1. 缘起 最近实验室 boss 让用矩形树图做一下研究数据的展示,囧,矩形树图是什么鬼.问了问师兄,说用 R 语言可以实现,让我去研究一下. = =,那这周不是不用干别的了. 刚好最近在研究百度出的 ECharts ,搜了搜竟然有矩形树图的模块,真是感动啊眼泪都要出来了.立马研究了一下,结果还可以,能实现我要的效果. 就在博客里总结一下吧,希望对你有帮助. 2.1 用 ECharts 实现矩形树图(treemap)-- 知识普及 什么是矩形树图? 通常,我们使用缩进方式展现层次结构的层级,比如

矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. 图1  http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/ 现以浙江.广西.江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图. 1. 数据 新建一个citygdp.j

前言 这是第一次用makedown编辑器写文章,感觉像一件利器,排版美观而且效率飙升.进入正题 Echart官网文档地址 针对于矩形树图api配置项链接 1. 完全从数据定义图形 $.get( "{% static 'json/rectTreeData.json' %}", function (obama_budget) { myChart.hideLoading(); //obama_budget数据里面的参数可以决定option里面需要用到的参数,可以直接在后端完整定义这个data

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状图

最近需要实现echarts图形中hover效果轮播(即tooltip在各个数据点上轮流显示)的功能,以下就是我学习的一个过程,只是提供思路,具体场景需要自己修改.(仅针对echarts 2.2.7及以下版本,最后的代码有3.0以上的使用方法以及插件代码链接) 源码:https://github.com/chengwubin/echarts-tooltip-auto-show 关于echarts大家可以查看官网文档. 文档中有这么一段话: 自2.1.8起,我们为echarts开发了专门的合并压缩工

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状图

在金融行业,我们经常会有审计审查的需求,对某个计算结果进行审查,但是这个计算结果可能依赖多个单元格,而且会有会有多级依赖的情况,如果让我们的从业人员靠眼睛找,工作量巨大,而且准确性存疑,基本上死路一条,因此让整个审查过程可视化,迫在眉睫,现在我们利用纯前端表格和Echarts将审计审查过程可视化 一.首先我们先了解一下前端表格或Excel中引用和从属关系: 1.在单元格B1中设置公式 =SUM(A1). 单元格A1是单元格B1的引用单元格(引用关系) 2.在单元格B1中设置公式 =SUM(A1)

布局,可以理解成 “制作常见图形的函数”,有了它制作各种相对复杂的图表就方便多了. 一.布局是什么 布局,英文是 Layout.从字面看,可以想到有“决定什么元素绘制在哪里”的意思.布局是 D3 中一个十分重要的概念. D3 与其它很多可视化工具不同,相对来说较底层,对初学者来说不太方便,但是一旦掌握了,就比其他工具更加得心应手.下图展示了 D3 与其它可视化工具的区别: 可以看到,D3 的步骤相对来说较多.坏处是对初学者不方便.也不好理解.好处是能够制作出更加精密的图形.因此,我们可以据此定义

有不少朋友说学 D3 挺难的.为什么呢?想写一篇文章分析分析. 1. D3 出现的背景 D3.js 是 Github 上的一个开源项目,用于数据可视化.作者是 Mike Bostock,纽约时报的工程师.现纽约时报上各种数据新闻的可视化图表,都是基于 D3 制作的. 数据新闻,是近年来十分热门的一个行业,在互联网新闻里,添加上生动的数据分析,以图形的形式展示,简单易懂. 数据新闻是随着大数据时代的潮流而出现.各公司和机构能掌握的数据越来越多,例如谷歌掌握了数以千万亿的搜索数据,沃尔玛掌握了全球的

一.图表交互操作 与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应. 交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应.对可视化图表来说,交互能使图表更加生动,能表现更多内容.例如,拖动图表中某些图形.鼠标滑到图形上出现提示框.用触屏放大或缩小图形等等. 用户用于交互的工具一般有三种:鼠标.键盘.触屏. 添加交互:对某一元素添加交互操作十分简单,代码如下: var circle = svg.append("circle"); circle

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状

可视化的库有很多,基于 JavaScript 开发的库也有很多,D3 有什么优势呢? (1)数据能够与 DOM 绑定在一起 D3 能够将数据与 DOM 绑定在一起,使得数据与图形成为一个整体,即图形中有数据.数据中有图形.那么在生成图形或更改图形时,就可以方便地根据数据进行操作,并且,当数据更改之后,也能简单地更改图形. (2)数据转换和绘制是独立的 将数据变成图表,需要不少数学算法.很多可视化库的做法是: 提供一个函数 drawPie() ,输入数据,直接绘制出饼状图. 但 D3 的做法是:

捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbostock/1044242 但是此例有些复杂,不太容易弄懂,而且也没有相应的说明文字(D3官网上的例大多没有相应文字解说),根本无法作为参考.本文提供一个简单的例子,讲解捆图到底是什么,应该怎么做. 捆图只有两个函数: d3.layout.bundle():创建一个捆图布局. bundle(link

一步步教你轻松学KNN模型算法( 白宁超 2018年7月24日08:52:16 ) 导读:机器学习算法中KNN属于比较简单的典型算法,既可以做聚类又可以做分类使用.本文通过一个模拟的实际案例进行讲解.整个流程包括:采集数据.数据格式化处理.数据分析.数据归一化处理.构造算法模型.评估算法模型和算法模型的应用.(本文原创,转载必须注明出处: 一步步教你轻松学KNN模型算法) 目录 1 机器学习:一步步教你轻松学KNN模型算法 2 机器学习:一步步教你轻松学决策树算法 3 机器学习:一步步教你轻松学

高级系列的教程已经完结,特此总结. 月初的时候曾说过本月内完结高级教程,今天是最后一天,算是可以交差了.O(∩_∩)O~ 如此一来,[入门]-[进阶]-[高级]三个系列的教程算是完成了.本教程的目的在于提供一个网络的.免费的学习系列,希望大家能喜欢. 在写文章的过程中,笔者对于 D3.js 的理解也在逐步加深.因此,写在前面的文章一定比后面的文章要差,虽然部分经过了修改,但是还没有系统性修正的时间.现在三个系列的教程已经完成,接下来会花时间在修正上,尤其是入门系列,这一系列阅读量最大,但是问题也

在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入门-进阶-高级,是一级比一级难的,大家选自己需要的阅读即可. 高级系列预计会先写一些常见的小问题(如本文)和剩下的三个布局(矩阵树图.堆栈图.捆图),然后写一些较复杂的图的制作方法,以及其交互式操作,例如:思维导图.多图联动.地图的标线标注等等. 近来嗓子像火烧一样,很不舒服,希望能快点好.o(>﹏

day1 Java概述 掌握 .JDK abbr. Java开发工具包(Java Developer's Kit) (abbr.缩写) .JRE abbr. Java运行环境(Java Runtime Environment) .JVM abbr. Java虚拟机(Java Virtual Machine) .system ['sɪstəm] System n. 制度,系统: .out [aʊt] adj. 外面的:出去 .println n. 换行打印(Java语言中的命令) .main [m

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 D3 中不是这个意思. D3 中有非常多 Layout 函数,它们不是为了在画面中布局什么.在 D3 中是对输入的数据进行转换,转换成比較easy进行可视化的数据.实际进行可视化时,须要其它的代码.我们能够简单地把 Layout 理解为"制作常见图形的函数",比方饼状图等等. D3 中一共

通过降维压缩数据 在前面已经介绍了几种不同的特征选择技术对数据集进行降维的方法.另一种常用于降维的特征选择方法就是特征抽取.数据压缩也是机器学习领域中的一个重要内容.数据压缩技术可以帮助我们对数据及逆行存储和分析. 这里主要涵盖三个主题: 1.无监督数据压缩--主成分分析(PCA) 2.基于类别可分最大化的监督降维技术--线性判别分析(LDA) 3.通过核主成分分析进行非线性降维 无监督数据降维技术--主成分分析 特征抽取可以理解为:在尽可能多地保持相关信息的情况下,对数据进行压缩的一种方法.特

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”.因此,可以凭借这两种布局来制作思维导图. 1. 构造思路 树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: "node