# 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. 4070: [Apio2015]雅加达的摩天楼
			
    Description 印尼首都雅加达市有 N 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 0 到 N−1.除了这 N 座摩天楼外,雅加达市没有其他摩天楼.   有 M 只叫做 “do ...
    
			
    2. 
						
  2. UITextView -- 基础备忘
			
    UITextView 这篇文章只涉及到基本的使用,日后会写一些关于结合TextKit的备忘 基本属性 let screenSize = UIScreen.mainScreen().bounds.siz ...
    
			
    3. 
						
  3. lua之mysql编程
			
    环境搭建 #mysql 安装 sudo apt-get install mysql-server mysql-client # lua mysql 开发驱动安装 sudo apt-get instal ...
    
			
    4. 
						
  4. 【转载】C# HttpWebRequest 发送SOAP XML
			
    调用webservice的几种方法: 方法一:添加web引用(简单/方便 局限客户端是.net) 方法二:Post xml(本文重点讲述) 方法三:使用微软MSXML2组件(好像在window ser ...
    
			
    5. 
						
  5. JNI/NDK开发指南（开山篇）
			
    转载请注明出处:http://blog.csdn.net/xyang81/article/details/41759643 相信很多做过Java或Android开发的朋友经常会接触到JNI方面的技术, ...
    
			
    6. 
						
  6. jquery 判断是否 ie6 ie7 ie8
			
      var isIE = !!window.ActiveXObject; var isIE6 = isIE && !window.XMLHttpRequest; var isIE8 = ...
    
			
    7. 
						
  7. [原博客] BZOJ 1257 [CQOI2007] 余数之和
			
    题目链接题意: 给定n,k,求 ∑(k mod i) {1<=i<=n} 其中 n,k<=10^9. 即 k mod 1 + k mod 2 + k mod 3 + … + k mo ...
    
			
    8. 
						
  8. Wild Words
			
    poj1816:http://poj.org/problem?id=1816 题意:给你n个模板串,然后每个串除了字母,还有?或者*,?可以代替任何非空单个字符,*可以替代任何长度任何串,包括空字符串 ...
    
			
    9. 
						
  9. HDU 4081 Qin Shi Huang's National Road System
			
    步骤是先求最小生成树,然后选两个不同的点,遍历所有的这样的点,选出两点人口比较大,而且连通两点的边的最大边比较大的情况. 因此要对i,j点连接起来的边进行遍历. #include<stdio.h ...
    
			
    10. 
						
  10. Gdi+实用入门
			
    大部分是参照其它资料,然后加以自己的理解,那是什么,总结.算不得什么教程.......汗,自己看着就行了..如果别人能看那就更好了. 首先下载GDI+文件包,一个动态链接库,使用GDI+就是调用那个动 ...
    
			
    11.