인터랙티브 차트 예시 및 만드는 방법

인터랙티브 차트는 모든 조직에 점점 더 의미를 부여하고 있습니다. 이를 통해 회사는 대규모 데이터 세트를 신속하게 처리하고 분석할 수 있습니다.

이러한 데이터 시각화는 시각적 정보를 캡처하는 뇌의 기능을 활용합니다. 그런 다음 독자가 정확한 결론을 내리고 신뢰할 수 있는 결정을 내릴 수 있도록 표시합니다.

애니메이션은 모든 대화형 차트의 기본 요소입니다. 이를 통해 사용자는 적극적인 역할을 수행하고 표시된 데이터를 보다 심층적으로 분석할 수 있습니다. 툴팁과 같은 필터 및 효과도 참여도를 높입니다.

그렇다면 어떤 애니메이션 및 대화형 요소를 차트에 추가할 수 있을까요? 대화형 그래프가 가치 있고 매력적인지 어떻게 확인할 수 있습니까?

이 문서에서는 독자를 염두에 두면서 데이터 시각화를 개선하는 필수 기술을 찾아보세요. 프로젝트에 따라 어떤 차트 유형과 요소에 집중해야 하는지 이해합니다. 그런 다음 wpDataTables를 사용하여 9단계의 쉬운 단계로 최고 품질의 차트를 작성하는 방법을 알아보십시오.

마지막으로 게시된 최고의 대화형 지도를 확인하여 고유한 지도를 만들기 위한 훌륭한 아이디어를 찾으십시오. 그러나 먼저 대화형 차트가 무엇인지 살펴보십시오.

인터랙티브 차트란 무엇입니까?

이름에서 알 수 있듯이 대화형 그래프에는 사용자 작업에 응답하는 요소가 있습니다. 더 매력적이고 통찰력 있는 경험을 제공합니다. 또한 태블릿 및 스마트폰과 같은 기술 장치의 많은 기능을 채택합니다.

이러한 방식으로 사용자는 친숙한 방식으로 차트와 상호 작용할 수 있습니다. 이 대화형 지도는 데이터 분석을 뷰어가 제어하는 ​​탐색 여정으로 바꿉니다. 그들은 데이터의 개요를 조사하거나 심층 조사를 수행할 수 있습니다.

정적 차트와 대화형 차트

정적 차트는 데이터 시각화로 분류됩니다. 정보를 구성하고 해석을 단순화하는 데 도움이 됩니다. 따라서 비즈니스 보고서와 같은 인쇄 문서를 보완합니다.

그럼에도 불구하고 이러한 지도에는 이동 및 상호 작용 가능성이 부족합니다. 그들의 특성은 더 작고 덜 복잡한 데이터에 가장 적합합니다.

반대로 대화형 상대는 복잡한 데이터를 묘사하고 종종 대시보드에서 간소화합니다. 대화형 요소를 사용하면 하나의 차트에 다양한 범주와 변수를 나타낼 수 있습니다. 표시되는 데이터 세트의 보다 포괄적인 컨텍스트를 제공하는 데 도움이 됩니다.

대화형 데이터 시각화를 개선하는 기술

이제 대화형 그래프를 더 잘 이해했으므로 매력적인 차트를 만들기 위한 최고의 기술을 살펴보십시오. 시각화 목표 및 요구 사항과 청중의 선호도에 따라 사용하십시오.

정적 차트 업그레이드

애니메이션 차트

표준 원형 차트, 선 차트 또는 막대 차트에 애니메이션을 적용하여 참여도를 높일 수 있습니다. 차트 유형에 관계없이 애니메이션 요소를 추가하는 것은 더 나은 사용자 경험을 위해 필수적입니다. 다음은 두 가지 가능성의 예입니다.

• 대화형 결정 트리 : 이전에 플로차트로 작업한 적이 있을 것입니다. 복잡한 프로세스를 여러 단계로 나누는 데 도움이 됩니다. 의사 결정 트리는 동일한 목적을 수행하며 상호 작용성을 추가합니다.
  다양한 상황과 프로젝트에 맞게 대화형 의사 결정 트리를 만들 수 있습니다. 예를 들어 웹사이트에 하나를 추가하여 방문자 탐색을 용이하게 합니다.
• Sankey 차트 : Sankey 차트 또는 다이어그램을 사용하면 화살표를 통해 일련의 값 사이의 흐름을 묘사할 수 있습니다. 각 변수에 대한 차트를 만들거나 단일 맵을 사용하여 기본 항목 내의 다양한 옵션을 모두 표시할 수 있습니다.
  값이 낮을수록 화살표가 가늘어지고 흐름이 클수록 화살표가 넓어집니다. 그런 다음 이 표시기는 상황과 선택한 형식에 따라 방향을 바꾸거나 교차합니다.

뷰어를 위한 도구 추가

데이터 점수

그 안에 배치된 도형이나 개체를 통해 모든 차트에서 데이터 요소를 식별할 수 있습니다. 이러한 점은 마우스 움직임이나 클릭에 반응하여 확장되어 추가 정보를 표시합니다.

예를 들어 꺾은선형 차트에는 주요 지점을 표시하는 점이 포함될 수 있습니다. 반대로 각 열은 세로 막대형 차트의 데이터 요소를 구성할 수 있습니다. 어느 쪽이든 이러한 마커를 통해 사용자는 표시된 값을 더 깊이 파고들 수 있습니다.

드릴다운 및 계층적 탐색

드릴다운은 차트에 다양한 정보 레이어를 포함하는 기술입니다. 따라서 사용자는 아웃라인에서 시작하여 더 세부적으로 이동하면서 다양한 수준의 복잡성으로 데이터 값을 분석합니다.

계층적 탐색은 차트를 구성하는 또 다른 방법입니다. 지리적 또는 관리적 지도에 사용할 수 있습니다.

필터링 및 선택 옵션

필터링 및 선택은 가장 기본적인 시각화 추가 기능 중 일부입니다. 이를 통해 사용자는 검색 요구에 따라 다양한 유형의 정보에 집중할 수 있습니다. 메뉴 또는 사이드바 체크리스트를 통합하여 맞춤형 이미지를 활성화할 수 있습니다.

호버링 트리거 툴팁

그래프에 데이터 포인트를 생성한 후 호버링 반응형으로 만들 수 있습니다. 그런 다음 통찰력 있는 툴팁을 첨부하여 추가 정보를 제공하십시오. 이러한 도구 설명은 자세한 설명이나 태그를 포함하거나 정확한 값을 표시할 수 있습니다.

애니메이션

스크롤 또는 기타 사용자 작업에 의해 트리거되는 애니메이션은 사용자 경험을 더욱 매력적으로 만듭니다. 시각화에서 더 많은 데이터를 표시하거나 선 또는 점을 강조 표시하는 데 도움이 될 수 있습니다.

줌 및 팬

모든 시각화는 확대/축소를 활성화해야 합니다. 이렇게 하면 사용자가 이미지를 클릭하여 확대할 수 있으므로 데이터를 더 잘 이해할 수 있습니다.

또한 분석 전반에 걸쳐 관점을 변경하거나 시각화를 패닝해야 합니다. 그래도 박스 플롯이나 막대 차트와 같은 축 그래프에서만 패닝을 허용할 수 있습니다.

wpDataTables로 대화형 차트 만들기

팔! 차트 . 어디에나 있습니다. 파이 차트. 막 대형 차트. 모든 구불구불한 선이 있는 멋진 선 그래프.

우리는 그들을 사랑하고 미워합니다. 그러나 여기서 현실화합시다 – 우리는 그것들이 필요합니다 .

왜? 차트가 없다면 그 모든 흥미로운 숫자와 데이터는 그저 숫자일 뿐이기 때문입니다. 하지만 차트 로 ? 마법이 일어납니다. 패턴이 나타납니다. 복잡한 정보는 한 입 크기의 이해할 수 있는 조각으로 변환됩니다.

웹사이트가 있습니다. 매끈합니다, 반짝입니다. 그러나 마법의 터치 인 대화형 차트가 빠져 있습니다. 청중이 참여 하기를 원합니다. 그들이 데이터를 탐색하기 를 원합니다. 당신은 그들에게 당신이 단지 예쁜 얼굴이 아니라 똑똑한 무리라는 것을 보여주고 싶습니다.

그리고 당신은 당신을 위해 이것을 못 박을 수 있는 도구를 찾기 위해 웹의 구석구석을 샅샅이 뒤지고 있습니다.

wpDataTables 를 입력합니다 .

wpDataTables를 사용하면 차트만 추가하는 것이 아닙니다. 대화형 차트를 추가하고 있습니다. 멋지고 현대적이며 왼쪽 또는 오른쪽으로 스 와이프하는 일종의 차트. 모든 상황, 모든 유형의 데이터에 대한 차트, 그리고 상단의 체리는 사용하기가 매우 쉽습니다.

그래서 왜 기다려? 지금 wpDataTables 혁명에 참여하여 웹사이트를 엉뚱한 곳 에서 타오르는 곳으로 만드십시오. 청중에게 필요한지 몰랐던 대화형 차트 경험을 제공하십시오.

wpDataTables를 사용하여 대화형 시각화를 구축하는 9단계

wpDataTables로 대화형 시각화를 생성하려면 다음 단계를 따르십시오.

1. 첫 번째 단계는 wpDataTables를 설치하고 WordPress 웹사이트에서 시작하는 것입니다.
2. 플러그인에서 차트 만들기를 클릭하고 차트 제목을 작성한 다음 선호하는 렌더링 엔진을 선택합니다. Google Charts, Highcharts, Chart.js 또는 ApexCharts.js일 수 있습니다.
3. 다양한 차트 유형 옵션에서 원하는 형식을 선택하십시오. 이 선택은 선택한 렌더링 엔진에 따라 다릅니다.
4. 데이터 소스를 선택합니다. 이미 만든 테이블을 사용하거나 새 테이블을 만들 수 있습니다. 이 경우 Excel, CSV, JSON 파일, Google 스프레드시트 또는 MySQL과 같은 다른 소스에서 데이터를 업로드하세요.
5. 그래프에 표시할 데이터를 선택합니다. 최종 시각화에 표시하려는 행과 열을 지정할 수 있습니다. wpDataTables에는 프로세스를 용이하게 하는 필터링 및 그룹화 옵션도 있습니다.
6. 차트의 데이터 범위를 정의한 후 다음을 클릭하여 서식 및 미리보기 로 이동합니다. 이 단계에서 화면 오른쪽에 렌더링된 차트를 볼 수 있습니다. 또한 모든 변경 사항을 즉시 볼 수 있습니다.
7. 차트에 필요한 사용자 정의를 수행하려면 각 범주에서 다음 범주로 이동하십시오. 다양한 맞춤 옵션이 있습니다. 실시간 미리보기 기능을 사용하면 차트의 최종 모습을 확인하고 필요에 따라 변경할 수 있습니다.
8. 차트가 요구 사항 및 개인화 기본 설정을 충족하면 저장 을 클릭할 수 있습니다. 그 후 wpDataTables는 WordPress 데이터베이스에 시각화를 저장합니다. 또한 단축 코드를 내보냅니다.
9. 지금 해야 할 일은 복사를 선택하여 단축 코드를 클립보드에 복사하는 것뿐입니다.

인상적인 대화형 차트 예제

탐색할 수 있는 뛰어난 대화형 차트는 다음과 같습니다.

2018 FIFA 월드컵 시청률

축구 팬을 대상으로 하는 이 Tableau는 FIFA 18명의 선수 등급을 2018 월드컵 명단과 통합합니다. 필드에서 플레이어 위치를 표시하고 등급과 값을 나타내는 산점도를 찾을 수 있습니다.

각 국가의 플레이어를 나머지 국가와 비교하는 히트맵도 있습니다. 이러한 유형의 맵은 스포츠 분석에서 일반적입니다. Scott Teal이 설정한 이 시각화는 복잡한 데이터를 이해할 수 있는 형식으로 표현하는 방법을 보여줍니다.

오바마의 2013년 예산 제안을 쪼개는 네 가지 방법

이 예에서 The New York Times의 Shan Carter가 작성한 반응형 거품형 차트는 Obama의 2013년 예산 제안을 나타냅니다.

자금 할당의 변경 사항을 나타내는 호버링 반응 도구 설명, 태그 및 색상이 있습니다. 버블 크기는 제안된 비용의 양에 따라 다릅니다. 따라서 가장 큰 값은 가장 큰 거품에 해당합니다.

주 인구가 이동한 방법

The Washington Post의 이 기사는 지난 100년 동안 미국 주 인구의 진화에 초점을 맞춥니다. 스크롤 시 활성화되는 애니메이션과 묘사된 변경 사항을 설명하는 시기적절한 메모가 있습니다.

이 지도는 1920년 각 주의 위치를 ​​강조 표시하고 색상 선을 통해 성장 또는 쇠퇴를 강조 표시합니다. 이렇게 하면 그들의 궤적을 분리하고 이해할 수 있습니다.

COVID-19의 기하급수적 확산에 대한 대화형 시각화

여기에서 COVID-19의 전 세계 확산을 나타내는 4개의 대화형 차트를 볼 수 있습니다. 이 프로젝트는 신뢰할 수 있는 데이터를 강조합니다. 출처는 Johns Hopkins University, Oxford University 또는 The Atlantic(COVID Tracking Project)입니다.

로그 또는 선형 척도 중에서 선택하고, 국가 또는 미국 주별로 데이터를 필터링하고, 자세한 보고서를 생성할 수 있습니다. 지도도 반응합니다. 아무 지점 위로 마우스를 가져가면 더 많은 정보를 찾거나 추가 하이라이트를 추가하거나 추가 데이터를 포함할 수 있습니다.

그래픽은 다운로드할 수 있으며 사용자는 데이터의 발전이 자연스럽게 나타나도록 애니메이션을 적용할 수 있습니다. 이렇게 하면 많은 수치와 기록이 있음에도 불구하고 사용자는 COVID-19의 확산 추이를 이해할 수 있습니다.

흑인 학생에 대한 Pinellas 카운티의 공립학교 불평등

다음은 Tampa Bay Times 전속 작가 Nathaniel Lash의 강력한 프레젠테이션입니다. 그것은 Pinellas 카운티의 공립학교에서 분리의 영향을 탐구합니다. 이와 같이 차트는 여러 주와 다른 플로리다 카운티의 학생 및 학교 결과를 강조합니다.

사용자는 각 그래픽과 해당 정보의 영향을 이해할 수 있습니다. 간단한 설명은 명확하고 정확한 메시지를 전달합니다.

애니메이션과 전환은 클릭하거나 스크롤할 때 트리거됩니다. 다음 차트 또는 추가 세부 정보를 표시할 수 있습니다. 이 기능은 모바일 장치에서 볼 때 유용합니다. 게다가 소셜 미디어에서의 응용 프로그램으로 인해 대부분의 사용자에게 이미 친숙합니다.

스크롤 지원은 독자가 더 오래 참여하도록 하는 훌륭한 형태입니다. 또한 차트와 데이터가 주요 초점이 되므로 정보를 더 잘 캡처합니다.

지속 가능성 이점

이 예제는 Workflow의 대화형 보고서입니다. ESG(Environmental, Social, Corporate Governance)가 비즈니스 전략과 연결되는 방식에 중점을 둡니다. 지원 데이터를 표시하고 중요한 지표를 추적하는 통찰력 있는 차트를 발견하게 될 것입니다.

환경 모범 사례를 채택하는 회사의 이점을 강조합니다. 그런 다음 그렇게 하지 않는 것의 단점도 지적합니다. 프레젠테이션은 신뢰, 리더십 및 측정에 접근하기 위해 세 섹션으로 나뉩니다.

시차 및 페이딩 효과를 포함하여 많은 스크롤 트리거 전환 및 애니메이션이 있습니다. 다른 시각화보다 더 많은 텍스트가 있음에도 불구하고 이 예제는 추천을 뒷받침합니다. 또한 사용자가 현재 상황과 추세를 이해할 수 있도록 컨텍스트를 제공합니다.

담배 아틀라스

Tobacco Atlas는 담배 사용 및 중독의 위험에 대한 인식을 높이는 데 도움이 됩니다. 소비 감소에도 불구하고 이 문제는 전 세계 수백만 명의 사람들에게 계속 영향을 미칩니다. 시각화는 영향력이 있습니다.

데이터와 결론을 강조하기 위해 차트, 일러스트레이션 및 효과를 사용합니다. 세로 레이아웃을 따라 개발하면 사용자가 더 많은 정보에 액세스하려면 특정 지점을 클릭해야 합니다.

수평 슬라이드 갤러리 및 대화형 세계 지도를 통해 사용자 상호 작용을 위한 많은 기회가 있습니다.

힙합에서 가장 큰 어휘

이 비주얼리제이션에서 The Pudding은 가사에 사용된 고유한 단어 수로 순위가 매겨진 래퍼를 표시합니다. 첫 번째 그래프는 반응형이며 아티스트를 한 줄로 모아 다양한 어휘를 정의합니다.

다음 차트는 랩퍼를 두 가지 변수로 나눕니다: 그들의 시대와 특정 고유 단어 간격. 그리고 마지막은 랩의 서정적 다양성을 다른 음악 장르와 비교한다. 이러한 방식으로 프레젠테이션은 귀중한 정보와 컨텍스트를 제공합니다.

세계 최대의 데이터 유출 및 해킹

Information is Beautiful은 데이터 시각화 참조입니다. 이 예는 적절한 차트를 선택하는 것이 관련 사실을 구조화하고 강조하는 데 어떻게 도움이 되는지 보여줍니다. 이 거품형 차트는 2004년 이후 전 세계에서 발생한 가장 중요한 데이터 유출 및 해킹을 강조 표시합니다.

거품의 크기는 공격의 영향에 따라 다릅니다. 게다가 모든 거품이 호버링 반응을 보입니다. 각 상황에 대한 자세한 정보를 제공하는 외부 페이지로 연결됩니다.

세계 형성

Worldshapin은 인간 개발과 지속 가능성을 연결하는 유익한 차트입니다. 인구, 교육, 생활 수준, CO2 배출량, 직장 평등 및 건강에 대한 데이터를 수집합니다.

그 정보는 인간 개발 보고서 2011에서 가져오며 인간 개발 지수(HDI)에 의존합니다. 그런 다음 세계와 각 국가의 상황을 묘사하는 독특한 모양을 형성합니다.

이 방법은 비교 및 ​​평가를 용이하게 합니다 . 특정 국가를 선택하면 기준에 해당 값을 지정하는 다른 차트가 나타납니다.

인터랙티브 차트에 대한 FAQ

인터랙티브 차트란?

대화형 차트는 실시간으로 만질 수 있는 데이터 그림과 같습니다. 실제로 가지고 놀 수 있기 때문에 우리가 익숙한 일반 정적 그래프와 다릅니다.

그 위로 마우스를 가져간 다음 항목을 클릭하고 자세한 정보를 확인하세요. 거의 손에 들고 있는 것처럼 데이터와 상호 작용하고 다양한 각도에서 데이터를 볼 수 있습니다.

대화형 차트를 사용해야 하는 이유는 무엇입니까?

대화형 차트는 데이터를 더욱 매력적이고 이해하기 쉽게 만듭니다. 그것들은 당신의 두뇌를 위한 놀이터와 같습니다.

테이블의 숫자를 보는 것은 꽤 지루할 수 있습니다. 그렇죠?

하지만 그 숫자들이 눈앞에서 움직이고 변하는 것을 보면 훨씬 더 흥미로워집니다. 또한 복잡한 데이터를 이해하기 쉽게 만드는 좋은 방법입니다.

대화형 차트는 어떻게 만듭니까?

몇 가지 옵션이 있습니다. 코딩을 하고 있다면 D3.js 또는 Chart.js와 같은 라이브러리를 사용할 수 있습니다. 끌어서 놓기 사용자라면 wpDataTables가 가장 좋은 친구입니다. 선택은 실제로 디자인에 대한 통제력과 기술에 정통한 정도에 따라 다릅니다.

대화형 차트를 사용자 정의할 수 있습니까?

전적으로! 대화형 차트를 사용하면 귀하가 보스입니다. 색상, 크기, 라벨 등 모든 것을 선택할 수 있습니다.

그림을 그리는 것과 같지만 브러시와 페인트를 사용하는 대신 데이터를 사용하고 있습니다. 데이터를 원하는 방식으로 만들 수 있는 모든 자유가 있습니다.

대화형 차트에 어떤 종류의 데이터를 사용할 수 있습니까?

대화형 차트에는 거의 모든 종류의 데이터를 사용할 수 있습니다. 판매 수치, 날씨 데이터, 스포츠 통계 등 원하는 대로 지정할 수 있습니다.

어떤 식으로든 서로 관련된 일련의 데이터 요소가 있는 한 대화형 차트를 만들 수 있습니다.

올바른 유형의 대화형 차트를 어떻게 선택합니까?

데이터가 말해주는 이야기에 대해 생각해 보십시오. 서로 다른 것을 비교하고 있습니까? 막 대형 차트로 이동하십시오. 시간이 지남에 따라 추세를 보입니까? 꺾은선형 차트는 당신의 사람입니다.

이야기를 이해하고 나면 올바른 차트를 선택하는 것은 의상에 맞는 올바른 신발을 선택하는 것과 같습니다.

대화형 차트의 도구 설명은 무엇입니까?

도구 설명은 차트의 비밀 메모와 같습니다. 데이터 포인트 위로 마우스를 가져가면 자세한 정보가 포함된 작은 상자가 나타납니다.

차트를 지저분하게 보이게 하지 않고 세부 정보를 추가할 수 있는 좋은 방법입니다.

내부자 정보를 제공하는 속삭이는 친구가 있는 것과 같습니다.

내 대화형 차트를 모바일 친화적으로 만들려면 어떻게 해야 합니까?

글쎄요, 약간 까다롭지만 완전히 할 수 있습니다. 차트의 크기가 잘 조정되고 터치하기 쉬운지 확인해야 합니다. 일부 도구는 이 작업을 자동으로 수행하지만 직접 코딩하는 경우 각별한 주의가 필요합니다.

기억하세요. 큰 화면에서 잘 보이는 것이 작은 화면에서는 제대로 작동하지 않을 수 있습니다.

애니메이션 대화형 차트의 거래는 무엇입니까?

애니메이션 차트는 스테로이드의 대화형 차트와 같습니다. 그냥 가만히 있는 것이 아니라 이동하면서 시간이 지남에 따라 데이터의 변화를 보여줍니다. 각 주자가 다른 데이터 포인트인 경주를 관람한다고 상상해 보십시오.

데이터에 생명을 불어넣는 재미있고 역동적인 방법입니다.

대화형 차트를 공유할 수 있습니까?

그래 넌 할수있어! 공유는 대화형 차트가 멋진 이유 중 큰 부분을 차지합니다. 웹사이트에 삽입하거나 소셜 미디어에서 공유하거나 프레젠테이션에 포함할 수도 있습니다.

사용 중인 도구에 관계없이 공유 설정을 확인하는 것을 잊지 마십시오.

대화형 차트에 대한 결론

대화형 차트는 개인과 조직 모두를 위한 데이터 시각화의 필수 요소입니다. 그들은 중요한 정보 세트를 수집하고 다양한 장치에서 일관된 경험을 제공합니다.

표준 정적 차트를 매력적인 애니메이션 다이어그램으로 전환할 수 있습니다. 이러한 지도는 사용자 작업에 반응하며 여러 수준의 정보를 제공합니다. 따라서 그들은 데이터에 대한 깊은 이해를 촉진하고 보다 정보에 입각한 신뢰할 수 있는 결정을 지원합니다.

이 기사를 통해 대화형 차트가 무엇인지 살펴보았습니다. 또한 그래프를 보다 몰입감 있고 가치 있게 만드는 최고의 기술을 발견했습니다. 위의 예는 프로젝트에 적용할 뛰어난 아이디어를 제공할 수 있습니다.

또한 베스트셀러 플러그인 wpDataTables를 사용하여 다양한 차트를 구성하는 방법을 알게 되었습니다. 이 도구를 사용하면 최신 데이터를 제공하고 사용자가 데이터를 탐색할 수 있도록 하면서 공간, 시간 및 비용을 절약할 수 있습니다.

대화형 차트에 대한 이 기사를 재미있게 읽으셨다면 다음 내용도 읽어보시기 바랍니다.

• 웹사이트에서 사용할 수 있는 비교 차트 유형
• 사용할 수 있는 다양한 유형의 차트 및 그래프
• wpDataTables를 사용하여 웹사이트에 쉽게 차트를 삽입하는 방법