# 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. JavaScript自学代码--(三)

    //通过 id 查找 HTML 元素 var x = document.getElementById("demo"); //通过标签名查找 HTML 元素 //本例查找 id=&q ...

  2. 配置.NET程序中最大HTTP并发连接数(默认为2)

    方式一:代码 ServicePointManager.DefaultConnectionLimit = 方式二:配置 <system.net> <connectionManageme ...

  3. http://www.ibm.com/developerworks/cn/opensource/os-cn-cas/

    http://www.ibm.com/developerworks/cn/opensource/os-cn-cas/

  4. CycleScrollView实现轮播图

    // //  CycleScrollView.h //  PagedScrollView // //  Created by 李洪强 on 16-1-23. //  Copyright (c) 201 ...

  5. 解决qt5窗口不刷新(测试窗口类型,测试窗口属性)

    QApplication::notify #if QT_VERSION >= 0x050000        if (QEvent::Show == pEvent->type())     ...

  6. POJ_3666_Making_the_Grade_(动态规划)

    描述 http://poj.org/problem?id=3666 给一串坡的高度,现在要调整某些点,使整个坡单调不降或单调不升.调整的花费为原高度与先高度的差的绝对值,问最小花费(可单增可单降). ...

  7. response常见应用、response细节、输出随机图片、定时刷新网页

      response常见应用 向客户端输出中文数据 分别以OutputStream和PrintWriter输出 多学一招:使用HTML语言里面的<meta>标签来控制浏览器行为 思考:用O ...

  8. 如何将数据库中已有表导入到powerDesigner生成pdm文件

    1.create new PDM: 2.select database menu; 3.click Reverse  Engineer database :4.then choose your scr ...

  9. handlebars模板库的资源

    web 开发中,js 解析JSON 是经常的事情.非常繁琐.handlebars 使用了模版,只要你定义一个模版,提供一个json对象,handlebars 就能吧json对象放到你定的模版中,非常方 ...

  10. [SAM4N学习笔记]按键程序(中断方式)

    一.准备工作:      将上一节搭建的工程复制一份,命名为"6.key interrupt".这一节主要讲如何使用SAM4N的GPIO中断功能,实现按键的中断输入. 二.程序编写 ...