<!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(15), 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.linear()

            .domain([0, 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] 6. Color Scale的更多相关文章

  1. OpenCASCADE Color Scale

    OpenCASCADE Color Scale eryar@163.com Abstract. The color scale is a specialized label object that d ...

  2. 使用d3.js的时候，如何用zoom translate scale限制拖拽范围

    红色代表需要改写的代码 1.添加定义图像大小和容器的大小及坐标 d3.behavior.zoom = function () { var moveCanvas={ width: , height: , ...

  3. [JS] JavaScript框架(2) D3

    D3(Data-Driven Documents)是一个用于网页作图.生成互动图形的JavaScript函数库. 官网:http://d3js.org/ 下载: cdn:<script src= ...

  4. 精通D3.js学习笔记（2）比例尺和坐标

    1.线性比例尺 d3.scale.linear()   创建一个线性比例尺           .domain([0,500]) 定义域           .range([0,1000]) 值域 l ...

  5. [D3] 13. Cleaner D3 code with selection.call()

    selection.call() method in D3 can aid in code organization and flexibility by eliminating the need t ...

  6. D3.js 入门学习(一)

    一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 ...

  7. d3.js画折线图

    下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html ...

  8. D3 数据可视化实战 笔记

    学习真是件奇妙的事情.这本书我之前都看过,有些的知识点却完全没有印象. 总结:把用到的知识好好研究:平时可以了解其他技术的基础,把相关的资料和难点记录下来. javascript陷阱 1.变量类型 v ...

  9. D3 JS study notes

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

随机推荐

  1. 解决nginx 504 Gateway Time-out的一些方法

    在CentOS下配置lnmp组合基本上用的都是同样的配置文件,一直都没出现过问题,可最近在一个vps上安装同样的环境之后,网站在线10多人就出 现了打开速度非常缓慢的情况,有好几次都是直接达到了ngi ...

  2. 利用MSF溢出攻击讲解

    msf的强大之处也就不做探讨了,虽然这些东西网上很多.但我想说说我的感受. 这次的演示是在BT5中远程攻击一台win2003 sp2 metasploit是4.3的 需要说明的一点是 现在的BT5中不 ...

  3. Android Canvas使用drawBitmap绘制图片

    1.基本的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置 drawBitmap(Bitmap bitmap, float left, float top, ...

  4. POJ_1742_Coins_(动态规划,多重部分和)

    描述 http://poj.org/problem?id=1742 n种不同面额的硬币 ai ,每种各 mi 个,判断可以从这些数字值中选出若干使它们组成的面额恰好为 k 的 k 的个数. 原型: n ...

  5. Android Loader详解四：回调及完整例子

    onLoadFinished 这个方法是在前面已创建的装载器已经完成其加载过程后被调用．这个方法保证会在应用到装载器上的数据被释放之前被调用．在此方法中,你必须删除所有对旧数据的使用(因为它将很快会被 ...

  6. ORA-00368 ORA-00353 ORA-00312

    在昨天客户突然打电话过来,说系统进不去了,经过咨询发现是Oracle数据库没启动起来,经过一番折腾,最终弄好了. 解决方法还是在网络上的一般方法,最磨人的是Oracle的一个redo日志文件出现问题, ...

  7. Web---Cookie技术(显示用户上次登录的时间、显示用户最近浏览的若干个图片(按比例缩放))

    本章博客讲解: 1.Cookie基本用法演示 2.演示Cookie的访问权限 3.演示Cookie的删除 4.利用Cookie显示用户上次登录的时间 5.利用Cookie技术显示用户最近浏览的若干个图 ...

  8. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  9. Cogs 309. [USACO 3.2] 香甜的黄油 dijkstra,堆,最短路,floyd

    题目:http://cojs.tk/cogs/problem/problem.php?pid=309 309. [USACO 3.2] 香甜的黄油 ★★   输入文件:butter.in   输出文件 ...

  10. malloc的实现

    在做csapp的malloc实验,一开始是按照书上的隐式链表法,发现得分很低.这种方法确实很挫,需要遍历一遍以找到合适的空闲块.于是我想到<STL源码剖析>中stl的内存池,感觉应该可以用 ...