# Quantitative Scales
    var colorScale = d3.scale.quantile()
.domain([d3.max(dataset) / 4, d3.max(dataset) / 2 , 3*d3.max(dataset) / 4, d3.max(dataset)])
.range(["#9c9ede","#6b6ecf","#5254a3", "#393b79"]);
So the code divide the value into 4 range, if the value smaller than 1/4 max value, then it use #9c9ede color;
from 1/4 - 1/2: #6b6ecf
...
from 3/4 - 1: #393b79
 var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']);
//q(0.3) === 'a', q(0.4) === 'b', q(0.6) === 'b', q(0.7) ==='c';
//q.invertExtent('a') returns [0, 0.3333333333333333]


### use:
.attr('fill', colorScale);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../ventor/d3.min.js"></script>
<style type="text/css"> body
{
padding-top: 50px;
padding-left: 100px; } #chartArea {
width: 400px;
height: 300px;
background-color: #CCC;
} .bar
{
display: inline-block;
width: 20px;
height: 75px; /* Gets overriden by D3-assigned height below */
margin-right: 2px;
/* fill: teal; *//* SVG doesn't have background prop, use fill instead*/
z-index:99;
} </style>
</head>
<body>
<section id="chartArea"></section>
<script>
var dataset = _.map(_.range(30), function(num) {
return Math.random() * 50;
}), //reandom generate 15 data from 1 to 50
w = 400, h = 300;
var svg = d3.select('#chartArea').append('svg')
.attr('width', w)
.attr('height', h); //svg deosn't need 'px' var yScale = d3.scale.linear()
.domain([0, d3.max(dataset) * 1.1]) //d3.max(dataset), set the max val of database
.range([0, h]); var xScale = d3.scale.ordinal()
.domain(dataset)
.rangeBands([0,w],0.3, 0.1); // var colorScale = d3.scale.category20c();
var colorScale = d3.scale.quantile()
.domain([d3.max(dataset) / 4, d3.max(dataset) / 2 , 3*d3.max(dataset) / 4, d3.max(dataset)])
.range(["#9c9ede","#6b6ecf","#5254a3", "#393b79"]); svg.selectAll('div')
.data(dataset)
.enter()
.append('rect')// svg doesn't have div, use rect instead
.attr('class', "bar")
.attr('width', xScale.rangeBand())
.attr('x', function(each_data, index){
return xScale(each_data);
})
.attr('y', function(each_data){
return h-yScale(each_data);
})
.attr('height', function(each_data, i){
return yScale(each_data);
})
.attr('fill', colorScale);
</script>
</body>
</html>

[D3] 7. Quantitative Scales的更多相关文章

  1. 【D3.V3.js系列教程】--(十二)坐标尺度

    [D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...

  2. D3 JS study notes

    如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited t ...

  3. 【D3 API 中文手冊】

    [D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...

  4. D3——scale

    d3.scale 比例尺 “Scales are functions that map from an input domain to an output range” Domains 定义域 和 R ...

  5. [D3] Build a Column Chart with D3 v4

    Column and bar charts are staples of every visualization library. They also make a great project for ...

  6. [D3] Convert Dates to Numeric Values with Time Scales in D3 v4

    Mapping abstract values to visual representations is what data visualization is all about, and that’ ...

  7. [D3] Convert Input Data to Output Values with Linear Scales in D3

    Mapping abstract values to visual representations is what data visualization is all about, and that’ ...

  8. [D3] Create Labels from Non-numeric Data with Ordinal Scales in D3 v4

    When your data contains discrete, non-numeric property values that you need to format or convert bef ...

  9. [D3] Create Labels from Numeric Data with Quantize Scales in D3 v4

    Sometimes data needs to be converted from a continuous range, like test scores, to a discrete set of ...

随机推荐

  1. php的ftp类

    1.需求 了解php的ftp使用 2.例子 使用CI封装好的ftp类库 上传 $this->load->library('ftp'); $config['hostname'] = 'ftp ...

  2. 导航 - 利用系统自带的App导航

    导航: 可以将需要导航位置丢给系统自带的App进行导航 发送网络请求到公司服务器, 获取导航数据, 自己手动绘制导航 利用三方SDK进行导航(百度) #import "ViewControl ...

  3. 最浅显、易懂的Linux 硬链接与软链接的理解

    正文: Linux上的文件可以这么理解:文件-->文件名.文件是一个Object,也就是磁盘上的二进制数据.一个文件可以有多个文件名,平时我们都是通过文件名访问文件Object. 这样,硬链接可 ...

  4. ASP.NET State Service服务

    ASP.NET State Service服务是用来管理 Session 的,正常来说,Session 位于IIS进程中(其实可以理解成在服务器的内存中),当IIS重启或程序池回收会自动清空Sessi ...

  5. 如何使用Github仓库创建网站

    官方文档:https://help.github.com/categories/github-pages-basics/ 1.创建一个仓库 2.额外建立一个gh-pages分支 3.添加CNAME文件 ...

  6. 自定义scrollbar

    Chrome ::-webkit-scrollbar 整体部分 ::-webkit-scrollbar-track 轨道 ::-webkit-scrollbar-track-piece 内层轨道 :: ...

  7. hdu 4111 Alice and Bob

    组合游戏题: 组合游戏的规则: 1.必败态的所有后继都是必胜态: 2.必胜态最少有一个必败的后继: 这里的必胜态是f[1][0][0][0]; 其中f[a][b][c][d]表示有a个1,b个2,c个 ...

  8. const char * 的终结贴(看完无需其他任何文章,从此不再蛋疼)

    我之前也是以为我对const char *ptr 这种形式的写法是掌握了的,真的,不就是说一个指针是不可改变的吗? 那么问题就来了,到底是ptr指针本身不能改变,还是ptr执行的值不能改变呢? 从网上 ...

  9. git ignore 的使用

    http://www.barretlee.com/blog/2015/09/06/set-gitignore-after-add-file/ 需要注意的 **: 如果一个 pattern 以 ** 开 ...

  10. App架构经验总结(转)

    原文链接: http://keeganlee.me/post/architecture/20160303 架构因人而异,不同的架构师大多会有不同的看法:架构也因项目而异,不同的项目需求不同,相应的架构 ...