# 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. 
						
  2. D3 JS study notes
		
    如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited t ...
    
		
    3. 
						
  3. 【D3 API 中文手冊】
		
    [D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...
    
		
    4. 
						
  4. D3——scale
		
    d3.scale 比例尺 “Scales are functions that map from an input domain to an output range” Domains 定义域 和 R ...
    
		
    5. 
						
  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. 
						
  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. 
						
  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. 
						
  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. 
						
  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 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. csu 10月 月赛 D 题 CX and girls
			
    Description CX是要赶去上课,为了不迟到必须要以最短的路径到达教室,同时CX希望经过的路上能看到的学妹越多越好.现在把地图抽象成一个无向图,CX从1点出发,教室在N号点,告诉每个点上学妹的 ...
    
			
    2. 
						
  2. 3G? 2G? 2.5G? 4G? 与 WIFI, GPRS,CDMA 3G无线上网
			
    首先说说无线上网有哪几种形式? WIFI, GPRS, CDMA 3G无线上网 1>wifi全称wireless fidelity,是当今使用最广的一种无线网络传输技术.实际上就是把有线网络信号 ...
    
			
    3. 
						
  3. 这个HEAD FIRST系统不错哟
			
    以前看过JAVA,现 在是PYTHON,接下来还下载了SQL,HTML系统看看..
    
			
    4. 
						
  4. 循环冗余校验（CRC）算法入门引导
			
    目录 写给嵌入式程序员的循环冗余校验CRC算法入门引导 前言 从奇偶校验说起 累加和校验 初识 CRC 算法 CRC算法的编程实现 前言 CRC校验(循环冗余校验)是数据通讯中最常采用的校验方式.在嵌 ...
    
			
    5. 
						
  5. 33个优秀的HTML5应用演示 (转)
			
    33个优秀的HTML5应用演示 (转) HTML5能做什么?取代Flash?制作动画?开发程序应用?这些都只是HTML5的一小部分功能而已. 大家可能听到很多关于Flash是否会被HTML5取代的讨论 ...
    
			
    6. 
						
  6. LintCode 38. Search a 2D Matrix II
			
    Write an efficient algorithm that searches for a value in an m x n matrix, return the occurrence of  ...
    
			
    7. 
						
  7. BZOJ_3196_二逼平衡树_(树套树,线段树+Treap)
			
    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3196 可以处理区间问题的平衡树. 3196: Tyvj 1730 二逼平衡树 Time Lim ...
    
			
    8. 
						
  8. Centos6.4 为用户添加sudo功能
			
    sudo即super user do,以超级管理员的方式运行命令.使用时,只需在命令最前面加上sudo即可. 要为用户添加sudo功能,需要修改sudo的配置文件: vi /etc/sudoers ( ...
    
			
    9. 
						
  9. Entity Framework 学习初级篇2--ObjectContext类的介绍
			
    转自:http://www.cnblogs.com/Tally/archive/2012/09/14/2685014.html 本节,简单的介绍EF中的ObjectContext.ObjectQuer ...
    
			
    10. 
						
  10. VMware设置虚拟机，并配置远程连接桌面
			
    现在需要使用VMware虚拟出几个window7的机器,用来跑自动化测试. 在配置虚拟机的时候遇到了几个问题: 问题1:虚拟机无法与外界机器通信.(可ping通过). 问题2:外界机器无法链接虚拟机的 ...
    
			
    11.