React 및 D3: 동적 2019 관상 바이러스 질병 가시화(1부분: 세계지도)

과학 교사로서 나는 데이터의 가시화를 좋아한다.나는 예술, 과학, 수학과 인문 학과를 어떻게 결합시켜 하나의 이야기를 할 수 있는지 강한 시각화를 좋아한다. 나는 시각화된 상호작용과 탐색 방면을 좋아한다.그러나 많은 시각화에서 디자이너는 어떤 데이터를 표시하고 어떻게 데이터를 표시하는지에 대한 모든 결정을 내리고 특정한 측면에서 특정한 이야기를 한다.
그러나 교사로서 저는 사용자로 하여금 자신의 문제에 대한 안내 아래 스스로 더 많은 선택을 하고 답을 찾고 더욱 탐구하는 가시화를 하는 것을 좋아합니다.따라서 내가 데이터 시각화를 만드는 여정을 시작했을 때 나는 사용자의 입력을 바탕으로 데이터를 보여주는 것을 해야 한다는 것을 알았다. 이것은 내가 현재 진행하고 있는 프로젝트인 2019 관상바이러스 질병 세계 추적기의 개념을 자극했다.

우선check out a quick video demo, 조회README.md file, 빠른 항목 조회.

사용자 상호 작용 목표 설계 및 계획

나의 디자인 선택은 이 지도적인 문제를 둘러싸고 있다.

How can I display data and options that will allow the user to generate open-ended questions and freely investigate those questions to better understand the COVID-19 outbreak?

나의 목표는 간단한 플랫폼을 개발하여 사용자가 그 중에서 전 세계적으로 2019 관상바이러스 질병의 발생 상황을 쉽게 탐색하고 비교하며 실시간 전 세계 데이터를 사용하고 전체 발생 상황의 역사 데이터를 볼 수 있도록 하는 것이다.응용 프로그램의 지도 가시화 부분은 현재 병례 데이터를 신속하게 분석하고 사용자가 병례 수, 병례 심각도 간의 가능한 관련성을 탐색하며 전체 인구를 고려할 때 데이터의 외관을 탐색할 수 있도록 한다.응용 프로그램의 스트립트 부분은 사용자가 한 그룹을 선택하여 국가를 비교하고 각 국가가 첫 번째 보고 사례에서 전염병의 변천을 비교할 수 있도록 한다.이 응용 프로그램의 두 부분이 함께 실행된다. 이상적인 상황에서 전 세계 지도를 훑어본 후에 사용자들은 호기심 있게 더욱 깊이 파고들고 그들이 지도에서 본 내용에 따라 일부 국가를 비교한다.
이 글의 나머지 부분은 내가 어떻게 조합하여 반응했는지 설명할 것이다.D3의 js 사용자 인터페이스입니다.js는 이 목표를 실현하고 사용자가 탐색한 데이터, 그들이 제기한 문제, 그리고 그들의 이해를 더욱 잘 통제할 수 있도록 하는 데 목적을 둔다.이 글은 지도의 가시화에 주목하고, 나의 다음 글은 조형도에 주목할 것이다.

세계 지도를 사용하여 시각적으로 실시간 글로벌 데이터를 탐색하다

사용 가능한 데이터

지도 데이터는 Novel COVID API에서 얻는다.내가 이 API를 선택한 이유는 각종 유명 출처에서 데이터를 얻고 각 국가의 일치된 현재 데이터를 포함하기 때문이다.다음은 아프가니스탄 데이터 입력의 예입니다.

사용 가능한 데이터 기반 생성 옵션

우선, 맵 입력 구성 요소 (React.js) 의 useffect () 갈고리를 사용하여 이 데이터를 가져옵니다.

나는 맵 입력 구성 요소의 일련의 사용자 입력 단추를 구성하기 위해 모든 데이터 포인트 (병례, 사망, 인구 등) 의 키를 사용한다.이 구성 요소는 일련의 단추를 보여 줍니다. 이 단추를 눌렀을 때, 사용자가 지도에 표시하고자 하는 특정한 데이터와 관련된 인자를 포함하는 DisplayMapData() 함수(D3.js)를 호출합니다.예:

<button 
    onClick={event => DisplayMapData(event.target.value, event.target.innerText, countryResults)} 
    className="cases block" 
    value="cases">
        Total Cases
</button>

css 단추 스타일과react 안내줄Col카드 형식을 통해 옵션의 왼쪽 표시줄 메뉴를 만들었습니다.

사용자가 선택한 데이터 시각화

여기서부터 DisplayMapData(caseType,casettitle,data) 함수는 아래로 전달된 매개 변수를 사용하여 사용자가 입력한 (caseType) 데이터를 분석하여 데이터 대상에서country Info 대상이 제공하는 각 국가의 지리 좌표를 사용하고 지도에서만 선택한 데이터를 그립니다.이 함수는 먼저 마지막 선택과 관련된 모든 데이터 (국가원, 도례, 제목) 를 삭제한 다음 최근에 선택한 사례 유형에 이 정보를 보여 줍니다.
You can view the code for the DisplayMapData() function in my repository

추가 상호 작용 추가

마지막으로 나는 사용자가 지도와 데이터를 더욱 탐색할 수 있도록 추가적인 상호작용을 구축했다.여기에는 다음이 포함됩니다.

맵 뷰 축소 및 변환

국가 경계 강조 표시 및 국가 이름 표시

각 데이터 링에 멈출 때 국가 데이터 보이기

스트라이프를 사용하여 특정 국가의 역사 데이터를 시각화하여 비교하다

본고의 두 번째 부분을 유의하여 응용 프로그램의 조형도 부분을 묘사하십시오.

마지막 생각

초보 프로그래머로서 이 프로젝트는 나로 하여금 지난 2주 동안 자신의 기술을 대폭 향상시켰다.D3에 관해서 나는 아직 배울 것이 많다.js.저는 복잡한 데이터 집합을 사용하여 서로 다른 유형의 시각화를 만드는 연습을 계속하고 사용자 체험과 자주 조회의 기회를 디자인의 최첨단에 놓을 계획입니다.
이 프로젝트는 결코 완전하지 않다. 나는 몇 주 안에 현장 프로젝트에 연결된 것을 공유할 것이다.동시에 매주 업데이트를 유의해서 프로젝트의 진전이 어떠한지 봅시다.
만약 네가 이 점을 할 수 있다면, 읽어 줘서 고마워!
아래에 메시지를 남겨주세요.

당신은 이런 가시화에서 어떤 사용자 체험을 보고 싶습니까?

추가 기능 또는 상호 작용은 무엇입니까?

또 다른 2019 관상바이러스 질병 데이터가 있는데 이런 식으로 탐색하고 싶으세요?