전에 포스트에서는 통계 자료를 문자열로 만들어 SweetAlert 하였고 이번에는 그래프로 만들어 HTML에 출력한다. 파이썬 코드는 동일하다.우선 html에 Chart.js를 사용할 수 있도록 다음 코들르 추가해준다.  그리고 그래프를 띄울 div를 만들고 canvas를 추가해준다. 다음으로 Javascript이다.우선 파이썬에서 전달받은 데이터를 변수에 저장해준다. const year_list = response.data.year_crime_data.map(item => item.year); const year_cnt_list = response.data.year_crime_data.map(item =..

Citizen은 각 지역의 범죄 및 사건을 열람할 수 있다. 우선 Citizen의 ID를 입력하면 자신이 속한 지역을 안내해준다,열람 기능은 2가지로 나뉘는데, 첫번째로 연간, 월간 범죄 통계 자료 열람이고 두번째가 범죄 내역 상세열람이다.두번째 기능은 저번에 이미 구현한 것으로 설명을 생략하겠다.첫번째 기능인 연도별, 월별 범죄 통계자료의 경우 데이터베이스에서 해당 지역의 범죄 횟수를 가져와야 한다.자바스크립트에서 region값을 파이썬 플라스크로 보내준다. 통신 방식은 AXIOS const region = document.getElementById('region').value; axios.post('/crime_data_lookup', { region : region })..

기존 지도에는 78개의 도시의 위치가 전부 표시되어 있다. 용의자의 위치와 가장 가까운 3개의 도시만 지도에 표시하도록 하겠다.우선 용의자의 위치와 가장 가까운 3개의 도시를 선별하는 함수는 다음과 같다.distance.euclidean을 사용하여 유클리디언 거리를 측정한 후, 거리를 기준으로 sort하여 3개의 도시만 따로 뽑았다.@with_transactiondef get_closest_regions(cur, latitude, longitude): cur.execute(f"select region_name, country_name, latitude, longitude from region") region_data = cur.fetchall() region_dist = [] for..

기존에는 지도를 원래 페이지에서 입력폼 바로 밑에 띄우도록 했다. const mapContainer = document.getElementById('map_container'); if (response.data.map_html) { // 새로운 iframe 요소 생성 const iframe = document.createElement('iframe'); iframe.srcdoc = response.data.map_html; // map HTML을 iframe의 srcdoc으로 삽입 iframe.width = '100%'; ifram..

이전 포스팅에서 folium에 각 지역과 용의자의 위도, 경도를 표시했다. 문제점1. 지역의 위도와 경도를 파이썬 random 함수로 생성하여 터무니 없는 곳에 생성되었다.2. 용의자의 위치와 지역의 마커가 동일하여 알아보기 힘들다.3. 마커의 개수가 79개나 되어서 가독성이 떨어진다.해결1. 지역의 위도와 경도를 파이썬 random 함수로 생성하여 터무니 없는 곳에 생성되었다. -> chat-gpt를 사용하여 78개의 도시를 선정하여 도시 이름, 국가 이름, 위도, 경도를 sql 스크립트로 삽입하였다.UPDATE region SET region_name = 'Seoul', country_name = 'South Korea', latitude = 37.5665, longitude = 126.9780..

이전에는 Flask에서 용의자 위치 정보를 전달하면 Javascript에서 전달받은 다음 알람으로 출력했다. 위치 정보를 지도에 표시하면 가시적으로 확인할 수 있기 때문에 해당 위치를 지도에 표시해보도록 한다. 파이썬에서 지도 정보를 활용하려면 folium을 사용하는데 미리 pip install folium 으로 깔아둔다.그리고 region 테이블에 각 지역의 위도, 경도가 저장되어 있으므로 이를 활용한다. postgresql을 사용해도 되지만 이번에느 csv파일로 저장한다음 read_csv하여 지역 정보를 불러왔다. 앞에서 작성한 파이썬의 predict_offender_location 함수에 다음 부분을 추가해준다. # region_data.csv 파일 읽기 region_data = pd.r..