Google Map의 레스토랑 리뷰 평가가 좋은 지역을 시각화

개요



Google Map의 리뷰 점수가 높은 레스토랑이 모이는 곳은 어디인가? 라고 의문에 생각해, 히트 맵으로 해 보았습니다

리뷰 등급을 받습니다.



Place Search API 을 사용합니다. 이 래퍼 을 사용하셨습니다.
  • 단순히 레스토랑의 위치 × 리뷰를 플롯하면 레스토랑이 많은 지역이 붉은 히트 맵이 될 뿐이므로, 에리어를 그리드 형태로 분할해, 각 그리드내의 레스토랑의 평균 등급으로 가중치한다고 가정해 갑니다
  • 이번 그리드는 약 500m 단위가 되도록 설정했으므로 radius 를 500으로 합니다
  • 결과는 최대 20 건이므로 레스토랑 밀집 지역에서는 API 맡기기의 무작위 20 건의 평균입니다.

    fetch_rating.rb
    @client = GooglePlaces::Client.new(API_KEY)
    col_num.times do |c|
      row_num.times do |r|
        lng = south_west[:lng] + c * diff
        lat = south_west[:lat] + r * diff
        result = @client.spots(lat, lng, language: :ja, types: :restaurant, radius: 500)
    
        # 平均出したりする処理...
      end
    end
    

    요금에 대해


  • 도쿄도에만 좁혀도, 망라적으로 하려고 하면 2188km²/0.25km²=약 8700request가 필요
  • 요금은 $13/1000req 정도가 될 것 같아서 이용은 계획적으로 (이번 취한 범위는 무료 크레딧내에 들어갔습니다)

    히트맵 그리기


  • Kibana와 Tableau를이를 위해 준비하는 것은 번거롭습니다
  • Google Data Studio라면 무료이고 간편하게 히트 맵화할 수 있지만, 줌 레벨이 「국가」까지 밖에 선택할 수 없다(US라면 주까지 갈 수 있다)

  • 그래서 Maps JavaScript API의 HeatmapLayer를 사용합니다.

    HeatmapLayer


  • HeatmapLayer에 건네주는 데이터에 weight를 포함시키면 가중치를 할 수 있다(weight: 3이면 내부적으로 3개의 점이 플롯되는 취급이 된다)
  • 그러나 선형에 반영될 뿐이라고 이런 느낌에 신축성이 없는 히트 맵이 되어 버린다

  • 그래서 적당히 weight = Math.pow(weight, 3) 빗질해서 비선형으로 합니다

  • 결과는 이런 느낌입니다.
    니시 아자 부, 메구로 근처, 그리고 왠지 서쪽이 강하네요.


    heatmap.js
      fetch('summary.json')
        .then(response => response.json())
        .then(json => {
          const heatmapData = json.map(d => {
            const location = new google.maps.LatLng(d['location']['lat'], d['location']['lng'])
            const weight = Math.max(0, Math.pow(d['avg'] - 3, 3))
            return {location, weight}
          })
          const map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(35.672196, 139.729521),
            zoom: 12.3,
            maxZoom: 12.6,
            minZoom: 12,
            disableDefaultUI: true
          })
          const heatmap = new google.maps.visualization.HeatmapLayer({
            data: heatmapData,
            radius: 40,
            opacity: 0.5,
            gradient: ['white', '#ffff99', '#fff000', '#ff0000'],
          })
          heatmap.setMap(map)
        })
    

    여기 에서 움직이는 것을 볼 수 있습니다.
    비밀이지만 여기 에서 리뷰가 낮은 지역이 붉어지는 버전도 볼 수 있습니다.

    좋은 웹페이지 즐겨찾기