前言

散佈圖是用來觀察兩個變數之間的關聯性，又稱為相關圖。

取得資料

*　受僱員工每人每月總薪資－按行業分
*　台灣地區傷害保險個人職業分類表　

整理資料

*　整理 110 年的各行各業月薪和風險

開始畫圖

• 上傳資料
  

• 設定圖大小、邊界
  

• 定義 x 和 y 範圍、顏色
  

• 設定 x 軸、y 軸位置
  

• 畫圖

career_salary_risk_chart = {
  
  const svg = html `<svg width="1000" height="500" />`
  const g = d3.select(svg)
    .append('g')
    .style('font-family', 'sans-serif')
    .style('font-size', 14)
  
  g
    .selectAll('g')
    .data(career_salary_risk5)
    .join('g') // 每一筆資料加入 group
    .attr('class', 'scatter-point')
    .attr('transform', d => `translate(${xScale(d.月薪)},${yScale(d.風險)})`)
    .call(g => g
          .append('circle') // 加入圓形
          .attr('r', 5)
          .style('stroke', d => colors(d.職業))
          .style('stroke-width', 2)
          .style('fill', 'transparent')
         )

  // y 軸
  d3.select(svg)
    .append('g')
    .attr('class', 'y-axis')
    .attr('transform', `translate(${ margin.left},0)`)
    .call(yAxis)
    .style('font-size', 14)

  // x 軸
  d3.select(svg)
    .append('g')
    .attr('class', 'x-axis')
    .attr('transform', `translate(0,${ height - margin.bottom})`)
    .call(xAxis)
    .style('font-size', 14)

  // x 軸標示文字
  g.append('text')
    .attr('class', 'x label')
    .attr('text-anchor', 'end')
    .attr('x', width/2)
    .attr('y', height)
    .attr('dy', '-0.5em')
    .text('月薪')

  // y 軸標示文字
  g.append('text')
    .attr('class', 'y label')
    .attr('text-anchor', 'end')
    .attr('transform', 'rotate(-90)')
    .attr('x', -150)
    .attr('y', margin.left)
    .attr('dy', '-2em')
    .text('風險')
  
  return svg
  
}

• 完成圖
  

結論

• 散佈圖可以直觀地看出不同行業的月薪和風險關係

參考
d3.call()

Color Legend