先加载d3 网站 https://d3js.org/d3.v3.min.js

修改元素颜色

选择类名选择器时前面加 . 选择ID选择器时前面加#

先确定选定的元素

d3.select('.header__navbar--logo').style('background','black')

修改标题

d3.select('.类名或者ID').text('title')

清除内容

d3.select('.white').html('')

用select方法来选择主要内容区域

var svg=d3.select('#logo').append('svg')

修改svg画布的宽和高

svg.attr('width',600).attr('height',300);

作一个线性比列，将范围15到90的输入数据 映射到250到0的输出范围

d3.scale.linear().domain([15,90]).range([250,0]);
这个函数保存在变量y上
var y=d3.scale.linear().domain([15,90]).range([250,0])

映射到 x 轴
var x=d3.scale.linear().domain([250,100000]).range([0,600])

画园

var r=d3.scale.sqrt().domain([52070,1380000000]).range([10,50])

在svg 显示图

svg.append('circle').attr('fill','red').attr('r',                                 r(1380000000)).attr('cx',x(13330)).attr('cy',y(77));

看单个变量的分布，连续变量可以用直方图，分类变量用柱状图

散点图

要展示两个变量之间的关系，其中y变量随x变量变化而变化——散点图是最高效的方式，可以通过视觉编码展示额外的维度，如p将散点图演变为泡式图，利用圆圈的大小来展示第三种变量
注意——散点图的微妙之处在于X轴的变量通常假定为独立的，而且与其他X数值没有关联——处理时间序列数据时，每个数据点都与之前的数据点暗含相关性这种情况下用曲线图或多重曲线图来展示时间序列数据

研究格式塔的目标是让设计师控制观众在看作品时看到的内容

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

屏幕快照 2018-02-25 16.28.26.png

定量和定型的区别举一个简单的例子：◆定性分析：分析1:郭小明胃口很大分析2:郭晓明胃口很小◆定量分析：分析1:郭小明一顿可以吃3个Schweinshaxe分析2:郭小明在吃了3个Schweinshaxe之后还可以吃5个蛋挞总之从一个商科学生的角度来说，定性分析基本上是让你给研究对象加个形容词或者一个方向上的判断，结合上述分析就是小明『能吃』。定量分析是研究出描述研究对象的数值以及这些数之间的以及他们怎么变化的。比如郭小明吃三个德国烤猪蹄和吃两个德国烤猪蹄会对他再吃2个蛋挞有什么不同的影响，总之要把数字都扯进来玩儿。作为一个曾经的商科学生，我们要用到定量分析的对象会有firm的资金平衡表、损益表、留存收益、市场销售什么的。就是根据以往的数据来挖掘这些指标之间有什么联系。比如一个店铺女装12月营业额收入达到300万，男装312万，如果要做一个定性的评价，可能卖场经理经过比较以后会说这个月卖的好！ 要做一个定量评价的话他可能会考虑这个月比上个月营业额多了多少？下个月按照这个趋势我们可能可以卖多少？考虑细分市场的话，各个市场的消费客户以往平均消费额会对今后产生多大的影响，这些影响如果用销售额或者营业额来衡量大概是多少？
https://www.zhihu.com/question/19603466/answer/21239732

本地建立一个 web服务器

一、cd 到文件夹 
cd /Users/zhongyaode/Desktop/d3_data/basic_charts
二、查看文件里面所有的内容 
ls
三、 python -m http.server
四、浏览器中
http://localhost:8000/

d3

d3.select('svg')
    .selectAll('circle')
    .data(data)
    .enter()
    .append('circle)

做个交互式可视化

身边的收入水平
静态的是全国平均收入
可以选择每个城市的平均收入
几个热点职业的平均收入
这可以提供职业工资水平地图

用中间数据转换函数把观赛人数转换成一个整数，把日期转换成javascript数据对象

d3.tsv("your_data.csv",function(d){
d['字段']= +d['字典'];
d['date']=format.parse(d['date'];
return d;
},plot_points);};
udacity课程

dimple中设置轴的变量类型

addTimeAxis设置时间变量，addMeasureAxis连续变量，是图表类型line、scatter、bar
var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "height");#Category是类别变量，c
          myAxis.overrideMin=-0.5;
          myAxis.overrideMin=0.5;
          myChart.addMeasureAxis("y", "weight");
          myChart.addSeries(null, dimple.plot.line);
          myChart.addSeries(null, dimple.plot.scatter);#null设置数据分面
          myChart.draw();

d3中的聚合函数

  function plot_points(data) {
            //draw circles logic
            debugger;
            var nested = d3.nest()
                           .key(function(d) {
                              debugger;
                              return d['date'].getUTCFullYear();
                           })
                           .rollup(function(leaves) {
                              debugger;
                              return "";
                           })
                           .entries(data);
        };