DAY 29
0
Modern Web

## 淺談Convert HTML Tables To JSON

### 轉換成JSON

Convert HTML Tables To JSON網站按下Ctrl+V將剛剛複製的HTML貼到HTML Code的下方空白處

## 中位數的重要性

`d3.quantile``d3.median`

d3StatisticsAPI

## 盒鬚圖介紹

Q1 將一組數據由小到大排列排在1/4的地方又稱第一四分位數
Q2 將一組數據由小到大排列排在2/4的地方又稱第二四分位數，也稱中位數
Q3 將一組數據由小到大排列排在3/4的地方又稱第三四分位數
IQR 由Q3-Q1所計算出來的值，稱為四分位距interQuantileRange

## 繪製d3Js標籤的盒鬚圖

### 得出Q1、Q2、Q3值

``````let dataSort = d3.sort(data,(a,b) => d3.ascending(a.articleStrNum,b.articleStrNum));
let q1 = d3.quantile(dataSort,.25,d=>(d.articleStrNum));
let median =d3.quantile(dataSort,.5,d=>(d.articleStrNum));
let q3 = d3.quantile(dataSort, .75,d=>(d.articleStrNum));
let interQuantileRange = q3 - q1;
let minBox = q1 - 1.5 * interQuantileRange;
let maxBox = q1 + 1.5 * interQuantileRange;
``````

## 繪製盒鬚圖的軸線

``````let scaleY =  d3.scaleLinear()
.domain([minBox,max])
.range([800, 0]).nice();
let axisY =  d3.axisLeft(scaleY)
.ticks(40);
const gY = svg.append("g")
gY.call(axisY);
let boxPlotG = svg.append("g")
``````

``````let boxCenter = 100;
let boxWidth = 50;

boxPlotG
.append("line")
.attr("x1", boxCenter)
.attr("x2", boxCenter)
.attr("y1", scaleY(minBox) )
.attr("y2", scaleY(maxBox) )
.attr("stroke", "black");
``````

``````boxPlotG
.append("rect")
.attr("x", boxCenter - boxWidth/2)
.attr("y", scaleY(q3) )
.attr("height", (scaleY(q1)-scaleY(q3)) )
.attr("width", boxWidth )
.attr("stroke", "black")
.style("fill", "#e89baa");
``````

``````        boxPlotG
.selectAll(".SML")
.data([minBox, median, maxBox])
.join("line")
.attr("x1", boxCenter-boxWidth/2)
.attr("x2", boxCenter+boxWidth/2)
.attr("y1", function(d){ return(scaleY(d))} )
.attr("y2", function(d){ return(scaleY(d))} )
.attr("stroke", "black")
.classed("SML",true);
``````

``````let circleG = svg.append("g").attr("transform",`translate(\${padding},\${padding})`);
circleG.selectAll("circle").data(dataSort)
.join("circle")
.attr("cx","300")
.attr("cy", function(d){
return scaleY(d.articleStrNum);
})
.attr("r", "5")
.attr("fill","rgba(255,0,0,.1)" );//以透明度0.1當作顏色主要是如果資料重疊的情況發生的時候可以看得出資料密集的程度
})
``````