React 및 D3: 동적 2019 관상 바이러스 질병 가시화(2부분: 국가 비교 대시보드)

    useEffect( () => {
        async function fetchData() {
            var requestOptions = {
                method: 'GET',
                redirect: 'follow'
              };

            const response = await fetch("https://api.covid19api.com/countries", requestOptions)
            const data = await response.json()
            setCountries(data)
        }
        fetchData();
    }, []); 

 <select onChange={ event => {setCollection([...collection, [event.target.value.split(",")[1], event.target.value.split(",")[2], event.target.value.split(",")[0]]]); 
   fetchCountry(event.target.value.split(",")[0], event.target.value.split(",")[1])}}>

<option placeholder="Choose a Collection of Countries">Choose a Collection of Countries</option>
   {props.options.map(option => (
       <option
          id={props.id}
          key={option.value}
          value={[option.value, option.name, option.flagCode]}
       >
       {option.name}
       </option>
   ))}
</select>

<NavLink 
  to = {{
     pathname: `/collection`,
     countryData,
     collection
  }}>
  <button className="dark" disabled={invalid()}>View Collection</button>
</NavLink>

    const fetchCountry = (country, countryName) => {
        async function fetchData() {
            const requestOptions = {
                method: 'GET',
                redirect: 'follow'
            };

            const response = await fetch(`https://api.covid19api.com/total/dayone/country/` + `${country}`, requestOptions)
            const data = await response.json()
            setCountryData(countryData => [...countryData, {[countryName]: [data], slug: country}])
        }
        fetchData();
    }
...

를 보여줌으로써, React와 D3 사이의 연결을 설정합니다. D3는 각 막대 그림을 이 자리 표시자 구성 요소에 추가할 수 있습니다.

import React, { useEffect } from 'react';
import DrawBar from './DrawBar'

const Viz = (props) => {

    useEffect( () => {

        DrawBar(props.countryName, props.totalCases, props.dailyData, props.id, props.caseType)
    }, [])

    return (
        <div className={"viz" + props.id} ></div>
    )
}

export default Viz

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

마지막으로, 이 일련의 이벤트는 우리에게 국가 비교 계기판을 제공했다.

홈페이지 지도의 시각화된 구조에 따라 수직 단추 메뉴를 만들었는데 그 중의 옵션은 관상 바이러스 COVID19 API에서 얻은 데이터의 키와 일치한다.클릭하면 이 단추는 사용자가 원하는 특정한 데이터에 따라 사례 유형을 설정합니다. 이로 인해 모든Viz 구성 요소를 다시 렌더링하고 새로운 사례 유형과 일치하는 데이터로 지도를 다시 그릴 수 있습니다.

const Collection = (props) => {
    const [caseType, setCaseType] = useState("");

    return (
      <div>

        <button onClick={event => (setCaseType(event.target.value), selectAll("svg").remove())} className="deathsPerOneMillion block" value="deaths">Deaths</button>

        ...

        {props.location.countryData.map((country, index) => { 
          return (                         
             <Country key={index} id={index} country={country} caseType={caseType} collection={props.location.countryData}/> 
          )
        })}
    </div>
  )
}

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

사용자가 메뉴 단추와 상호작용을 할 때, 각각svg를 선택하고 삭제한 다음 새 데이터로 다시 그립니다.트랙터 막대 기능에는 다음과 같은 매개변수를 포함하여 막대 맵을 동적으로 만드는 데 관련된 모든 논리가 포함됩니다.

countryName- 그래픽 포맷을 위한 제목

totalCases - 그래픽용 부제

dailyData-국가의 일련의 데이터, 그 중 한 대상은 전염병이 발생하는 매일을 대표한다

id - 차트를 해당 HTML 요소

에 첨부하는 국가의 slug 이름

사례 유형 - 사용자가 선택한 데이터 유형(총 사례, 복구 사례, 사망 또는 활동 사례)

전체 함수에서caseType과 다른 매개 변수를 삽입하여 정확한 제목과 하위 제목을 렌더링하고 축의 크기를 적당히 조절하며 적당한 크기의 줄을 렌더링하고 줄과 도구 설명 텍스트를 색인코딩합니다.예를 들어 아래의 코드 세션은 a조를 특정 국가에 추가하는 요소를 보여줍니다. 케이스 Type 변수에 따라 스트라이프 색상을 분배하고 데일리 데이터 데이 카운터 키의 값에 따라 xAxis를 설정하며 괄호 표현법으로 플러그인case Type을 사용하여 yAxis와 스트라이프 높이를 설정합니다.유사한 플러그인 모드는 전체 트랙터 기능에서 중복됩니다. 이것은 사용자가 화면의 메뉴 단추를 사용하여 보기를 사용자 정의할 수 있도록 합니다.

    const svg = select(`.${vizName}`)
        .append("svg")
        .attr("preserveAspectRatio", "xMinYMid meet")
        .attr("viewBox", [0, 0, width, height])

    const g = svg.append("g")
        .attr("fill", color(caseType))
        .selectAll('rect')
        .data(dailyData)
        .join("rect")
        .attr('x', d => xScale(d.dayCount))

        .attr("y", d => yScale(d[`${caseType}`]))
        .attr("width", xScale.bandwidth())
        .attr("height", d => yScale(0) - yScale(d[`${caseType}`]))

내 저장소에서drabr () 함수의 코드를 볼 수 있습니다 추가 상호 작용 추가

어플리케이션에 대한 나의 비전을 바탕으로 사용자는 대시보드 보기에서 모든 국가를 동시에 볼 수 있고 축소판과 데이터의 상호작용을 통해 국가 간의 비교를 신속하게 할 수 있다는 점이 매우 중요하다.그러나 이런 방법은 데이터를 읽는 데 매우 어렵다.나는 다음과 같은 특징을 통해 이 도전을 해결했다.
데이터 탭이 있는 도구 알림을 추가했습니다. 사용자는 마우스를 한 칸에 놓고 모든 유형의 사례의 날짜와 데이터를 볼 수 있습니다.이것은 큰 HTML 문자열을 만들어서 이루어진 것이다.

    const tip = d3Tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
            return "<p>" + "<span style='color:white'>" + "Day " + d.dayCount + "<br/>" +
                d.date.toLocaleDateString() + "<br/>" + "</span>" +
                "<span style='color:#BD2D28'>" + d.total + " Total" + "<br/>" + "</span>" +
                "<span style='color:#E3BA22'>" + d.active + " Active" + "<br/>" + "</span>" +
                "<span style='color:#A0B700'>" + d.recovered + " Recovered" + "<br/>" + "</span>" +
                "<span style='color:#BA5F06'>" + d.deaths + " Deaths" + "</p>" 
        })

나는 모든 Viz 구성 요소를 내비게이션 링크에 포장합니다. 이 링크는 사용자가 어떤 도형을 눌러도 큰 그림이 있는 디스플레이 페이지를 볼 수 있도록 합니다.

     <NavLink
         to = {{
             pathname: `/countries/${props.country.slug}`,
             countryName,
             totalCases: totalCases(),
             dailyData: parseData(dailyData, array), 
             slug: props.country.slug, 
             id: props.country.slug,
             collection: props.collection
         }}>
         <Viz countryName={countryName} totalCases={totalCases()} dailyData={parseData(dailyData, array)} id={props.country.slug} slug={props.country.slug} caseType={props.caseType}/>
     </NavLink>

여기서 사용자는 상술한 모든 상호작용을 가지고 있지만 규모는 더욱 크다.

사용자는 지도를 클릭한 다음 모음으로 돌아가기 버튼을 클릭하여 대시보드와 디스플레이 페이지 사이를 왔다 갔다 할 수 있습니다.

    <NavLink
       to = {{
          pathname: `/collection`,
          countryData: props.location.collection
       }}>
       <button className="reset block">Return to Collection</button>
   </NavLink>

마지막 생각

# 코드 초보자로서 나는 9개월의 코드만 썼다.한 달 전, 나는 Flatiron 학교의 소프트웨어 공학 훈련 캠프를 졸업했는데, 그때 나는 새로운 기술을 배우고 내가 이미 습득한 기술을 연습해야 했다.목표 목록을 돌이켜보면 이 프로젝트는 제가 매우 의미 있는 방식으로 6개의 목표를 실현할 수 있도록 도와줍니다.

라이프 사이클 방법이 아닌 갈고리 사용

클래스 구성 요소가 아닌 기능 구성 요소 만들기

추가 프레임워크와 라이브러리 사용을 제한

Redux 상점이 아닌 로컬 상태와 통행 도구 사용 연습

외부 API에서 데이터 가져오기

D3를 사용하여 데이터 시각화 생성 및 렌더링

이 프로젝트는 완벽합니까?아니오, 응답 능력과 사용자 인터페이스 개선에 있어서 저는 특히 모바일 기기 분야에서 더 많은 일을 하고 싶습니다.GitHub 페이지가 React Router와 잘 맞지 않아서 자동 리디렉션을 잃어버렸습니다.나는 몇 가지 측면에서 코드를 정리하고 재구성해야 한다.그러나 # 코드 초보자로서 자신을 위해 새로운 목표를 설정하고 새로운 의미 있는 프로젝트를 통해 그것을 실현할 때가 되었다.
만약 네가 현장으로 뛰어들지 않은 상태에서 이렇게 멀리 갔다면, 지금 가서 보아라!

우선, 보기 및 조회quick video demo 빠른 조회 항목.

현장 탐색: README.md file

이 시리즈의 첫 번째 부분을 놓쳤다고요?여기를 클릭하십시오.

만약 이 사이트를 훑어보았다면 아래의 평론에서 당신의 생각을 알려주십시오.

당신은 어떻게 이 사이트를 탐색했습니까?

당신은 어떤 문제를 제기했습니까?뭐 공부 해요?

지도보기와 국가 계기판이 공동으로 더 많은 문제를 제기하고 2019 관상바이러스 질병의 대유행을 더욱 잘 이해하는 데 도움을 줍니까?