---
title: 散點圖
layout: ./app/layout.ejs
engine: ejs
current: index
---

<style>
  .scatter1,
  .scatter2 {
    margin: auto;
    width: 80%;
    min-width: 300px;
    margin: auto;
  }
</style>

<h4>散點圖1</h4>
<div class="scatter1 m-auto"></div>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  // 散點圖一
  // 先取資料
  async function getData() {
    let dataGet;

    const cors =
      'https://secret-ocean-49799.herokuapp.com/';
    const url =
      'https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv';

    dataGet = await d3.csv(`${url}`);
    scatter1(dataGet);
  }
  getData();

  // 建立圖表
  function scatter1(data) {
    // RWD 清除原本的圖型
    d3.select('.scatter1').select('svg').remove();

    // 建立 svg
    const svgWidth = parseInt(
        d3.select('.scatter1').style('width'),
      ),
      svgHeight = svgWidth;
    margin = 50;
    const svg = d3
      .select('.scatter1')
      .append('svg')
      .attr('width', svgWidth)
      .attr('height', svgHeight);

    // 建立X軸線
    const xScale = d3
      .scaleLinear()
      .domain([0, 4000])
      .range([0, svgWidth - margin * 2]);

    const xAxis = d3.axisBottom(xScale);

    svg
      .append('g')
      .attr(
        'transform',
        `translate(${margin}, ${svgHeight - margin / 2})`,
      )
      .call(xAxis);

    // 建立Y軸線
    console.log(data);
    const yScale = d3
      .scaleLinear()
      .domain([0, 500000])
      .range([svgHeight - margin, 0]);

    const yAxis = d3
      .axisLeft(yScale)
      .tickFormat((d) => '$' + d);

    svg
      .append('g')
      .attr(
        'transform',
        `translate(${margin}, ${margin / 2})`,
      )
      .call(yAxis);

    // 加上點點
    svg
      .append('g')
      .selectAll('dot')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx', (d) => xScale(d.GrLivArea))
      .attr('cy', (d) => yScale(d.SalePrice))
      .attr('r', 1.5)
      .style('fill', (d) => {
        return d.SalePrice > 129000 ? 'pink' : '#69b3a2';
      });
  }

  // 散點圖二
  function scatter2() {
    // RWD 清除原本的圖型
    d3.select('.scatter2').select('svg').remove();

    // 建立svg
    let w = parseInt(d3.select('.scatter2').style('width')),
      h = w * 0.8,
      margin = {
        top: 40,
        right: 20,
        bottom: 20,
        left: 40,
      },
      radius = 5;

    let svg = d3
      .select('.scatter2')
      .append('svg')
      .attr('width', w)
      .attr('height', h);
    console.log(w, h);

    let dataset = [
      { x: 100, y: 110 },
      { x: 83, y: 43 },
      { x: 92, y: 28 },
      { x: 49, y: 74 },
      { x: 51, y: 10 },
      { x: 25, y: 98 },
      { x: 77, y: 30 },
      { x: 20, y: 83 },
      { x: 11, y: 63 },
      { x: 4, y: 55 },
      { x: 0, y: 0 },
      { x: 85, y: 100 },
      { x: 60, y: 40 },
      { x: 70, y: 80 },
      { x: 10, y: 20 },
      { x: 40, y: 50 },
      { x: 25, y: 31 },
    ];

    // 建立Ｘ比例尺與軸線
    const xScale = d3
      .scaleLinear()
      .domain([
        0,
        d3.max(dataset, function (d) {
          return d.x + 10;
        }),
      ])
      .range([margin.left, w - margin.right]);

    const xAxis = d3.axisTop().scale(xScale);

    const xAxisLine = svg
      .append('g')
      .attr('class', 'xAxis')
      .attr('transform', `translate(0, ${margin.top})`)
      .call(xAxis);

    // 建立Ｙ比例尺與軸線
    const yScale = d3
      .scaleLinear()
      .domain([
        0,
        d3.max(dataset, function (d) {
          return d.y + 10;
        }),
      ])
      .range([margin.top, h - margin.bottom]);

    const yAxis = d3.axisLeft().scale(yScale);

    const yAxisLine = svg
      .append('g')
      .attr('class', 'yAxis')
      .attr('transform', `translate(${margin.left}, 0)`)
      .call(yAxis);

    // 資料綁定上circle
    svg
      .selectAll('circle')
      .data(dataset)
      .enter()
      .append('circle')
      .attr('cx', function (d) {
        return xScale(d.x);
      })
      .attr('cy', function (d) {
        return yScale(d.y);
      })
      .attr('r', 5)
      .attr('fill', '#000')
      .on('mouseover', handleMouseOver)
      .on('mouseout', handleMouseOut);

    //  mouseover 時點點變色+tooltip
    function handleMouseOver(d, i) {
      // 選定this的元素，改變hover過去的顏色跟形狀
      d3.select(this)
        .attr('fill', 'orange')
        .attr('r', radius * 2);

      // 加上tooltips
      let pt = d3.pointer(event, this);
      svg
        .append('text')
        .attr('class', 'hoverTextInfo')
        .attr('x', pt[0] + 10)
        .attr('y', pt[1] - 10)
        .style('fill', 'red')
        .text([`x:${d.x}, y:${d.y}`]);
    }

    // mouseleave 時變回原樣
    function handleMouseOut(d, i) {
      d3.selectAll('.hoverTextInfo').remove();
      d3.select(this)
        .attr('fill', 'black')
        .attr('r', radius);
    }

    // 滑鼠click的時候增加一個點
    svg.on('click', function () {
      let coords = d3.pointer(event, this);

      let newData = {
        // 把XY座標軸轉換成資料
        x: Math.round(xScale.invert(coords[0])),
        y: Math.round(yScale.invert(coords[1])),
      };

      // 將增加的資料座標推入原本的data
      dataset.push(newData);

      // 將新的資料綁定上circle、綁定 mouseover/mouseleave 方法
      svg
        .selectAll('circle')
        .data(dataset)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
          return xScale(d.x);
        })
        .attr('cy', function (d) {
          return yScale(d.y);
        })
        .attr('r', 5)
        .attr('fill', '#000')
        .on('mouseover', handleMouseOver)
        .on('mouseout', handleMouseOut);
    });
  }

  // RWD
  d3.select(window).on('resize', scatter1());
</script>