D3.JS

【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变

颜色插值指的是给出两个RGB颜色值，两个颜色之间的值通过插值函数计算得到。线性渐变是添加到SVG图形上的过滤器，只需给出两端的颜色值即可。1.颜色插值在【高级-第5.0章】里已经提到了颜色插值，在这里做一个例子。先定义颜色插值函数如下，vara=d3.rgb(255,0,0);//红色 varb=d3.rgb(0,255,0);//绿色 varcompute=d3.interpolate(a,b
lzhlzz·2015-05-09 08:00

歌曲推荐系统实践：Pandas、SciPy和D3.js

BenFrederickson在与友人的讨论中就发现，写个推荐系统并没有那么轻而易举，为此他专门写了一篇博文来记录自己实现的整个过程，利用的工具是数据挖掘领域很热门的Pandas和SciPy函数库，最后使用D3
张天雷·2015-05-07 00:00

【 随笔 】 D3 难吗？

1.D3出现的背景D3.js是Github上的一个开源项目，用于数据可视化。作者是 MikeBostock，纽约时报的工程师。现纽约时报上各种数据新闻的可视化图表，都是基于D3制作的。
lzhlzz·2015-04-29 19:00

使用d3.js 绘制交互树

d3.js中包含了丰富的用于表达树和图的例子：http://d3js.org以下代码示例中，用于表示交互的树： .node{ cursor:pointer; } .nodecircle{ fill
csharp25·2015-04-25 12:00

【 D3.js 高级系列 — 5.0 】 颜色

颜色是作图不可少的概念，常用的标准有RGB和HSL，D3提供了创建颜色对象的方法，能够相互转换和插值。RGB色彩模式是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道相互叠加来得到各式各样的颜色。三个通道的值的范围都为0~255，因此总共能表示16777216(256*256*256)种，即一千六百多万种。几乎包括了人类所能识别的所有颜色，是最广泛也是最容易理解的颜色系统之一。HS
lzhlzz·2015-04-19 19:00

D3.js selectAll()函数与enter()函数

D3 Test  天天   天天  var dataset = [ 5, 10, 15, 20, 25 ]; console.log(d3.select("body").selectAll("p").data()); //输出[undefined, undefined] d3.select("body").selectAll("p") .data(dataset) .enter
横着走的螃蟹·2015-04-15 15:00

【 D3.js 高级系列 — 4.0 】 矩阵树图

矩阵树图（Treemap），也是层级布局的扩展，根据数据将区域划分为矩形的集合。矩形的大小和颜色，都是数据的反映。许多门户网站都能见到类似图1，将照片以不同大小的矩形排列的情形，这正是矩阵树图的应用。图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/现以浙江、广西、江苏三省份2013年的GDP作
lzhlzz·2015-04-04 10:00

D3.js area函数

var area = d3.svg.area().interpolate("monotone").x(function(d) { return x(d.date); }).y0(260).y1(function(d) { return y(d.price); });     //.x()数据点在x轴的坐标d.date     //.y1数据点在y轴的坐标d.price,这两个值确定一个数据点的坐标
横着走的螃蟹·2015-04-02 11:00

【 D3.js 高级系列 — 3.0 】 堆栈图

堆栈图布局（StackLayout）能够计算二维数组每一数据层的基线，以方便将各数据层叠加起来。本文讲解堆栈图的制作方法。先说说什么是堆栈图。例如，有如下情况：某公司，销售三种产品：个人电脑、智能手机、软件。2005年，三种产品的利润分别为3000、2000、1100万。2006年，三种产品的利润分别为1300、4000、1700万。计算可得，2005年总利润为6100万，2006年为7000万。
lzhlzz·2015-03-29 18:00

【 D3.js 高级系列 — 2.0 】 捆图

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

【 D3.js 高级系列 — 1.1 】 封装文本自动换行

在【高级-第1.0章】中讲解了在SVG中如何配合使用text和tspan来实现换行的功能，本文对此功能进行一下封装，以后就可以直接用了。1.引用js文件下载地址：multext.js下载之后，在标签里引用：或者直接通过网址引用：当然，要使用此文件，同时要引用d3的库：2.函数的参数文件里只实现了一个函数appendMultiText()，其各参数的意义为：appendMultiText( cont
lzhlzz·2015-03-12 10:00

d3.js让ssh暴破次数可视化

  一台做手机app应用的服务器在某云上，很好奇如果没有修改ssh端口的情况下，每天会被暴力破解多少次呢？带着这个疑问，查看一下/var/log/messages的日志，grep一下里面多少含有"Failed"的日志记录。。。由于messages日志会有logrotate，所以：grep "^Mar  1"  /var/log/messages* | grep "Failed" | wc -l分别
老徐_kevin·2015-03-08 19:32

d3.js让ssh暴破次数可视化

  一台做手机app应用的服务器在某云上，很好奇如果没有修改ssh端口的情况下，每天会被暴力破解多少次呢？带着这个疑问，查看一下/var/log/messages的日志，grep一下里面多少含有"Failed"的日志记录。。。由于messages日志会有logrotate，所以：grep "^Mar  1"  /var/log/messages* | grep "Failed" | wc -l分别
老徐_kevin·2015-03-08 19:32

d3.js让ssh暴破可视化

一台做手机app应用的服务器在某云上，很好奇如果没有修改ssh端口的情况下，每天会被暴力破解多少次呢？带着这个疑问，查看一下/var/log/messages的日志，grep一下里面多少含有"Failed"的日志记录。。。由于messages日志会有logrotate，所以：grep "^Mar  1"  /var/log/messages* | grep "Failed" | wc -l分别得到
老徐_kevin·2015-03-08 19:32

【 D3.js 高级系列 — 1.0 】 文本的换行

在SVG中添加文本是使用text元素。但是，这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？高级系列开篇前言从今天开始写高级系列教程。还是那句话，由于本人实力有限，不一定保证入门-进阶-高级，是一级比一级难的，大家选自己需要的阅读即可。高级系列预计会先写一些常见的小问题（如本文）和剩下的三个布局（矩阵树图、堆栈图、捆图），然后写一些较复杂的图的制作方法，以及其交互式操作，例如：思维导图
lzhlzz·2015-03-02 14:00

[置顶] 【 D3.js 进阶系列 】 进阶总结

o(>﹏<)o进阶系列的文章分为两部分，文章前括号里写有：【D3.js进阶系列】【D3.js选择集与数据详解】虽然称之为“进阶”，但并不是说一定要看完“入门”才
lzhlzz·2015-02-18 09:00

【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

在【选择集与数据-4】一文中，介绍了一个update、enter、exit的处理模板，这个模板很常用，本文将通过一个例子来讲解其使用方法。1.模板复习一下上一章提到的模板。//绑定数据后，分别返回update、enter、exit部分 varupdate=selection.data(dataset); varenter=update.enter(); varexit=update.exit();
lzhlzz·2015-02-07 13:00

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后，选择集分为三部分：update、enter、exit。这三部分的处理办法是什么呢？本文将讲解其处理方法，以及一个常用的处理模板。1.enter的处理方法如果没有足够的元素，那么处理方法通常是使用append()添加元素。请看下面的代码： vardataset=[3,6,9]; varp=d3.select("body").selectAll("p"); //绑定数据后，分别获取
lzhlzz·2015-01-27 22:00

d3.js——对柱状图和折线图的封装

1、js调用稍后加上2、封装的jsfunction DrawChart(option) {     //如果没有参数，则返回     if (!option) {         return;     }     if (!option.data || !option.containerId || !option.chartSize || !option.serials || !option.x
龙马行空·2015-01-17 22:00

d3.js——饼状图

1、效果2、html页面 3、js //d3.js必须引用的   //官网上封装好的pie图的js// 调用方法传递图数据 grid.load(obj, function (result) {     
龙马行空·2015-01-17 20:00

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

data()函数有两个参数，第一个是被绑定数据，第二个参数用于指定绑定的顺序。在数据需要更新的时候常常会用到。默认的情况下，data()函数是按照索引号依次绑定数组各项的。第0个元素绑定数组的第0项，第1个元素绑定数组的第1项，依此类推。也可以不按照此顺序进行绑定，这就要用到data()的第二个参数。这个参数是一个函数，称为键函数（keyfunction）。要注意，只有在选择集原来已经绑定有数据的
lzhlzz·2015-01-17 19:00

【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

D3中绑定数据大多是由data()函数来完成的，它是怎样工作的，它与datum()有什么区别呢？data()函数能够将数组各项分别绑定到各元素上，而且能够设置绑定的规则。data()还能够处理数组长度与元素数量不一致的情况。当数组长度大于元素数量，能为多余数据预留元素位置，以便将来插入新元素；当数组长度小于元素数量时，能提供指向多余元素的方法，以便将来删除。下面来剖析data()是如何绑定数据的，
lzhlzz·2015-01-17 19:00

d3.js

/** *Createdbyll0uon1/12/2015. */ //曲线图//varwidth=500,//  height=250,//  margin={top:30,right:30,bottom:30,left:30},//  g_width=width-margin.left-margin.right,//  g_height=height-margin.top-margin.bot
kaka19881101·2015-01-12 17:00

【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

选择集和数据的关系是D3最重要的基础，在【入门-第7章】时进行过些许讲解，对于要掌握好D3是远远不够的。故此开设一个新的分类，专门讨论选择集与数据的关系，包括数据绑定的使用和工作原理，update、enter、exit的原理和使用方法等，接下来一段时间里会有多篇此类文章。D3最大的特色就是能够将数据绑定到DOM上。使用select或selectAll选择元素之后，被选择的元素上是没有数据的。数据绑
lzhlzz·2015-01-12 15:00

数据的可视化之Sublime Text+D3.js+C3.js+python

D3.js的入门教程————————————————————————————————————————————————————————————————————————————SublimeText 前端开发文本编辑器
wxcdzhangping·2015-01-12 15:00

d3.js——柱状图

    我在做bar图的时候感觉他就是先创建一个svg的容器，然后创建比例尺、坐标轴，柱形，文字，这些元素，然后转换一个角度，变换一下位置，把很多元素组合成一个g元素中加入svg标签中。剩下的就是一些方法的使用，这个得看官网的api,其实对于d3.scale.ordinal()、rangeRoundBands([0,width],0.1)这些方法也不是特别懂，还得再学习。1、效果2、html页面 
龙马行空·2015-01-10 15:00

【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

本文讲解稍微复杂一些的拖拽应用，即拖拽饼图的各部分。在【入门-第9.1章】讲解了如何制作饼状图。饼状图的各部分是用具有宽度的弧线来表示的。在与用户进行交互的时候，如果每一部分都能拖拽，是很有趣的。1.饼状图的绘制与【入门-第9.1章】稍有有些不同，我们对饼状图的每一个区域都使用一个g标签将其包围起来，以便平移操作。vargAll=svg.append("g") .attr("transform",
lzhlzz·2015-01-06 13:00

【 D3.js 进阶系列 — 6.1 】 缩放的应用（Zoom）

缩放（Zoom）是另一种重要的可视化操作，主要是使用鼠标的滚轮进行。1.zoom的定义缩放是由d3.behavior.zoom()定义的。varzoom=d3.behavior.zoom() .scaleExtent([1,10]) .on("zoom",zoomed); functionzoomed(){ circles_group.attr("transform", "translate("
lzhlzz·2014-12-28 21:00

【 D3.js 进阶系列 — 6.0 】 拖拽的应用（Drag）

拖拽（Drag）是交互式中很重要的一种，本文将讲解拖拽的使用方法。1.drag的定义D3中可用d3.behavior.drag()来定义drag行为。vardrag=d3.behavior.drag() .on("drag",dragmove); functiondragmove(d){ d3.select(this) .attr("cx",d.cx=d3.event.x) .attr("cy"
lzhlzz·2014-12-27 22:00

【 D3.js 进阶系列 — 5.0 】 直方图

直方图用于描述概率分布，D3提供了直方图的布局Histogram用于转换数据。假设有数组a=[10,11,11.5,12.5,13,15,19,20]，现在把10~20的数值范围分为5段，即：10~12,12~14,14~16,16~18,18~20那么数组a的各数值都落在这几段区域的哪一部分呢？经过计算，可以知道，这5段分别具有的元素个数为：3,2,1,0,2将这个用图形展示出来的，就是直方图。
lzhlzz·2014-12-17 15:00

【 D3.js 进阶系列 — 4.0 】 绘制箭头

在SVG绘制区域中作图，在绘制直线和曲线时，常需要在某处添加箭头。本文介绍如何在D3中给直线和曲线添加箭头。 到目前为止，我们绘制D3的图表都是在SVG绘制区域内，虽然D3也可用Canvas或WebGL等作图，但SVG是最常用的。那么，用D3来绘制箭头，先要明白在SVG中是怎么绘制的。1.在SVG中定义箭头的标识定义箭头的标识如下，先写一对，里面再写一对，其中marker的属性的意义为：viewB
lzhlzz·2014-12-08 20:00

【 D3.js 进阶系列 — 3.2 】 分区图的函数

分区图的布局比较简单，本章介绍一下分区图的参数。分区图布局为：d3.layout.partition()其函数有6个。nodes()将根数据传入后，得到的节点的数组，每个节点添加8个参数：parent-父节点children-子节点value-表示节点的大小，由下面value()函数指定的值，父节点的值等于子节点值的和depth-节点的深度x-节点的x方向的坐标（不一定指x轴方向，跟据size()
lzhlzz·2014-12-07 16:00

【D3.JS数据可视化实战记录】绘制动态状态变化趋势图

参考d3js.org的Health&Wealth实例（http://bost.ocks.org/mike/nations/）按照时间展示节点状态变化。需要展示的json:[{"calendar":"2012-01-0112:00:00","values":[{"name":"A","size":100,"traffic":"20000","cpu":12.9},{"name":"B","size"
追风筝的MM豆·2014-12-03 15:21

【 D3.js 进阶系列 — 3.1 】 圆形分区图

分区图布局的size函数很有意思，即可用于制作矩形分区图，也可用于制作圆形分区图。本文就来谈讨一下圆形分区图的制作。本文与【进阶-第3.0章】基本相同，只有布局函数的size函数和绘制图形的部分稍有区别。1.数据本文仍然使用【入门-第9.4章】的数据，内容为中国境内几个城市的所属关系。2.布局（数据转换）varpartition=d3.layout.partition() .sort(null)
lzhlzz·2014-11-30 19:00

【 D3.js 进阶系列 — 3.0 】 分区图

分区图（Partition），也是D3的一个布局（Layout）。这个布局很有意思，可以做成方形也可能做成圆形，本文先介绍方形分区图的制作方法，这也是分区图最基本的形式。分区图也是用于表示包含与被包含关系的。1.数据本文使用【入门-第9.4章】的数据，内容为中国境内几个城市的所属关系。2.布局（数据转换）varpartition=d3.layout.partition() .sort(null)
lzhlzz·2014-11-23 18:00

利用Python进行数据分析--绘图和可视化

此外，还可以利用诸如d3.js（http://d3js.org/）之类的工具为Web应用构建交互式图像。matplotlib是一个用于创建出版质量图
cador·2014-11-19 22:23

利用Python进行数据分析--绘图和可视化

此外，还可以利用诸如d3.js（http://d3js.org/）之类的工具为Web应用构建交互式图像。matplotlib是一个用于创建出版质量图
u013524655·2014-11-19 22:00

【 D3.js 进阶系列 — 2.2 】 力学图的参数

力学图的布局中有很多参数，本文将逐个说明。D3中的力学图布局是使用韦尔莱积分法计算的，这是一种用于求解牛顿运动方程的数值方法，被广泛应用于分子动力学模拟以及视频游戏中。定义布局的代码如下：varforce=d3.layout.force()即可，D3中提供了17个函数用于设定其参数和事件，在所有布局中是最多的，下面将对其进行说明。size()用于设定力学图的作用范围，使用方法为force.size
lzhlzz·2014-11-15 10:00

d3学习之（Data Visualization with d3.js Cookbook ）（第四章）-3

3.使用分类范围尺     在某些情况下，我们可能需要将我们的数据映射到一些分类的（顺序的）值，比如[a,b,c]或者[#1f77b4,#ff7f0e,#2ca02c]等，如何用D3来处理这类映射呢，本节将回答这个问题。     老规矩还是先上代码，打开你的编辑器，输入如下代码： OrdinalScale OrdinalScalewithAlphabet Mapping[1..
snakehealth·2014-11-12 14:00

d3学习之（Data Visualization with d3.js Cookbook ）（第四章）-2

2.使用时间范围尺    通常，我们进行分析的数据集，是与时间和日期相关的，因此，D3提供了内置的时间尺度来执行这种类型的映射。在这一节中我们就将学习如何使用D3的时间尺度。    准备好你的编辑器，输入如下代码 TimeScale LinearTimeProgression Mapping[01/01/2013,12/31/2013]to[0,1200] varstar
snakehealth·2014-11-10 17:00

【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

本章讨论在力学图中常用到的事件（Event），然后对【进阶-第2.0章】的人物关系图进行改进，使用户能够固定拖拽的对象。在【入门-第9.2章】和【进阶-第2.0章】中，都用到了以下代码：force.on("tick",function(){ });这里的force是之前代码中定义的布局（Layout），tick表示当运动进行中每更新一帧时。这是力学图中最常使用的事件，用于设定力学图每一帧是如何更
lzhlzz·2014-11-08 10:00

D3.js 以圆做点绘制力图（一）

SVG是什么？如何在SVG上绘制一个圆？如何在SVG上绘制一条线？力图的基本属性有哪些？这些问题将由本文来一一解答。在代码方面，我们沿用上文的网页框架，把body里面的js替换成现在的js即可。SVG SVG，可缩放的矢量图，我们以后所绘制的数据展示图大都是在SVG这个大容器内完成的，它相当于画布。创建SVG，就是有利于导出、保存绘制好的图形。 简单的SVG标签格式 ，在SVG标签中可以嵌入很多可
qiyuexuel·2014-10-30 11:00

D3.js 从P元素的创建开始

D3是一个基于数据操作的可视化js库，认识d3，就从最基础的显示可加载数据谈起。 html的基本框架不多说，先上代码再解释： 新建一个test目录，在该目录下创建demo和d3两个文件夹。demo存放要编写的html文件，d3存放d3.v3.js 在demo文件夹下新建indexP.html，将下面代码复制其中，双击在浏览器打开查看效果。 D3:Settingparagraphs'style
qiyuexuel·2014-10-29 14:00

【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图

力学图（力导向图）与生活中常见的人物关系图结合，是比较有趣的。本文将以此为凭，阐述在力学图中如何插入外部图片和文字。在【第9.2章】中制作了一个最简单的力学图。其后有很多朋友有疑问，主要的问题包括：如何在小球旁插入文字如何将小球换为别的图形如何插入图片如何限制小球运动的边界本文将对以上问题依次做出解说。其中前三点是SVG元素的问题，和D3无多大关联。1.SVG图片SVG的图片元素的详细解说可看【官
lzhlzz·2014-10-25 10:00

【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法

在D3中使用d3.csv读取CSV文件时，有时会出现乱码问题。怎么解决呢？1.乱码问题使用d3.csv读取xxx.csv文件时，如果xxx.csv文件使用的是UTF-8编码，不会有什么问题。当然，个人认为尽量使用UTF-8编码，可以在同一编码内使用各国文字。但是，如果xxx.csv文件使用的是utf-8编码，使用MicrosoftExcel打开的时候，可能会出现乱码，因为国内的Excel默认使用G
lzhlzz·2014-10-18 15:00

【 D3.js 进阶系列 — 1.1 】 其他表格文件的读取

CSV表格文件是以逗号作为单元分隔符的，其他还有以制表符Tab作为单元分隔符的TSV文件，还有人为定义的其它分隔符的表格文件。本文将说明在D3中如何读取它们。 1.TSV表格文件是什么TSV(TabSeparatedValues)，制表分隔值，它和CSV文件仅仅是分隔符不一致。它的格式如下：nameage 张三22 李四24 2.D3中读取TSV文件在D3中读取TSV文件的方法和CSV文件是一样的
lzhlzz·2014-10-08 10:00

【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取

在入门系列的教程中，我们常用d3.json()函数来读取json格式的文件。json格式很强大，但对于普通用户可能不太适合，普通用户更喜欢的是用MicrosoftExcel或OpenOfficeCalc等生成的表格文件，因为简单易懂，容易编辑。MicrosoftExcel通常会保存为xls格式，OpenOfficeCalc通常会保存为ods格式。这些格式作为表格文件来说都很强大，但要读取它们是有些
lzhlzz·2014-10-03 15:00

d3.js（Data-Driven Documents）数据可视化-----初步学习

1.d3.js是一个将数据转化为图表的javascript库。效果如如下：scriptsrc="http://d3js.org/d3.v3.min.js"charset="utf-8">也可自行去官网下载至本地。2.完整代码如下  SimpleGraph    body{font:12pxArial;}   path{     stroke:red;     stroke-width:2;    
苏丶小魂·2014-09-29 09:08

[置顶] 【 D3.js 入门系列 — 11 】 入门总结

一转眼，这个入门系列已经积累了二十二篇文章之多，我想作为D3.js这款数据可视化工具的入门来说已经足够了。相信只要看完本系列，以后完全可以在辅以查询的情况下完成大部分可视化工作。  
lzhlzz·2014-09-17 13:00

【 D3.js 入门系列 — 10.3 】 GeoJSON 和 TopoJSON 文件有什么不同？

本人的个人博客为：www.ourd3js.com csdn博客为：blog.csdn.net/lzhlzz转载请注明出处，谢谢。前些天有朋友留言询问GeoJSON文件和TopoJSON文件的关系，正好我其实也不是十分明了，查询了一番后整理如下，还望大家指证。这两种文件都是基于JSON语法的，首先来说一下JSON语法和文件是怎样的。1.JSON格式JSON（JavaScriptObjectNotat
lzhlzz·2014-09-12 09:00
上一页 15 16 17 18 19 20 21 22 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他