#25-让长条图一条条动起来～大数据时代！入手 D3.js～

自己做行销的时候，很喜欢玩数据，
数据可以打破一些先入为主的想法、
也可以给我们更全面的视角、或是新的发现。
也因此产生了学习D3的念头。

近几年来流行大数据、 Infographic，
网页也是有机会需要呈现这些数据表格，
有了动态资讯的呈现，就不会这麽枯燥乏味！

最近看到的是这一篇讲软件工程师的技术、就业等趋势报告，
除了他们本身网站配色就很亮眼外，配合上好的动态效果，让无聊的数据有趣了起来：

南非软件工程师报告（英文）

D3.js 是擅长资料处理的一个Javascript资料库，
从推出以来已经十年了，作法跟jQuery 很像，可以直接选取物件，
再喂食Data给他，就会长出图表来。（当然还是有很多设定啦！）

老样子，我不会讲基础原理，
而是要硬逼自己生出一个动态来，
不过也会在code里面说明一下原理和方法。（做中学最好玩了！）

还是老样子，（什麽时候有新样子？）先来看一下今天的成果～

抓了南非的年龄分布失业比率，
（~~非洲下一个问题是如何创造就业机会给庞大的年轻人口~~）
下面先推荐一下学习工具，想看code请跳过～

动态长条图

静态绘图

静态画图的部分，上code解释：

//html 其实就是一个div啦
<div class="graph1"></div>

//JS部分 
//要记得cdn d3唷：
<script src="https://d3js.org/d3.v7.min.js"></script>

//data阵列，D3也可以直接吃csv档案d3.csv()
const unemploymentData = [
  {
    item: '15-24 y',
    value:0.63
  }, ...以下省略]

//接着开始画图形罗！主要就是4大步骤：
//1.基本设定
  const svg = d3.select('.graph1') //选取div
				.append('svg') 
				.attr('width',200)
				.attr('height',200)//div里面加上一个长宽200的svg

//2.比例尺设定，下面会变成一个function，帮你计算每一个矩形x,y对应位置
//这边有满好的解释：https://segmentfault.com/a/1190000011006780
	let xScale = d3.scaleBand() //我的scale要一条一条对应
	               .domain(d3.range(unemploymentData.length))//看要几条
	               .range([0,200])//要画在svg哪里
	               .padding(0.1)
                   
  let yScale = d3.scaleLinear()
				.domain([0, 1])//data的范围，我的资料都是0.多，最多就是1罗
				.range([200,0])//range要反过来，不然会倒过来长

//3.画长条图啦
	//先把所有的矩形选取来，d3可以在rect被画上之前就选取，网路上搜寻会有一些解释～
  const rect = svg.selectAll('rect')
    rect.data(unemploymentData) //把资料要塞到矩形里面
    .enter() //给每一个资料一个元素对应
	.append('rect')//对应元素我要矩形
    .attr('width',24)//矩形宽度
    .attr('fill','orange')//矩形颜色
    .attr('x', (d, i)=>{return xScale(i)})//算x位置
    .attr('width',xScale.bandwidth())//内建函数算x肥度
    .attr('y', (d)=>{return yScale(d.value);})//算y位置
    .attr('height',(d)=>{return yScale(0) - yScale(d.value)}) //算y要长多高，是反过来的，因为0在上方

//4.上标签文字！
  svg.selectAll('text').data(unemploymentData)
    .enter()
    .append('text')
    .text((d)=> {return d.item})
    .style("text-anchor", "end")
    .attr("transform",function(d,i){ return "translate(" + (15+xScale(i)) + ", 210) " + "rotate(-90)"}) //文字太长了我要旋转他！
	.style("font-size", 16)
    .style("fill", "#ffffff")

加上动态

其实D3 很简单，
跟CSS一样名称，只要加上transition()，
他就会帮忙显示前後code的变化。
譬如说我就在长度100前面放一个长度0，
中间穿插一个transition就会帮我们显示了！

然後bar就是要一条一条出现才好看啊！
可以直接用D3内建的 .delay功能（英文就是延迟呀）
让他们一个一个延迟N秒：.delay(function(d, i) { return i * n; })

下面就把transition＆delay补在下面:


    rect.data(unemploymentData)
    .enter() 
	.append('rect')
    .attr('width',24)
    .attr('fill','orange')
    .attr('x', (d, i)=>{return xScale(i)})
    .attr('width',xScale.bandwidth())
    .attr('y', yScale(0)) //先在y最远的地方就定位
    .transition() //动态插入开始！
    .duration(1000)
    .delay(function(d, i) { return i * 100; }) //动态插入结束！下面就是告诉他我要长高呀
    .attr('y', (d)=>{return yScale(d.value);})
    .attr('height',(d)=>{return yScale(0) - yScale(d.value)})

//标签文字也是如法炮制～

今天的成果放这边