vocus.cc Open in urlscan Pro
2606:4700:10::6816:2aa3  Public Scan

Form analysis
0 forms found in the DOM

Text Content

分類
* 政治與評論
* 國際
* 電影戲劇
* 投資理財
* 職場產業
* 閱讀書評
* 創作
* ACG
* 文化生活
* 旅行美食
* 音樂藝文
* 健康與情感
* 寵物
* 親子與教育
* 學習
* 運動
最新主題Premium
人物
* 蘇絢慧
* 張硯拓
* IEObserve國際經濟觀察
* Miula
* 肉蟻小姐
* 蒼藍鴿醫師
* 往櫺
* 陶曉嫚
* 林艾德

成為會員免費暢讀 Premium
登入
取消


繁體 (TW)
幫助中心


SIX WAYS TO VISUALIZE CHANGE OVER TIME IN WEB

flamboyan44追蹤
0

2021-09-15
|閱讀時間 ‧ 約 32 分鐘
SIX WAYS TO VISUALIZE CHANGE OVER TIME IN WEB MAPS SEP 14, 2021

Data visualization is an attempt to answer questions about raw data. These
questions typically start with words like what; how much; when; and of course,
where. In addition to these, people frequently ask questions about how a data
variable changes over time. These could be questions such as the following: How
did population change from 2010 to 2020? Over the last 30 years, has the climate
been warmer or cooler? Where has voter turnout increased or decreased since the
last election? In this article, I demonstrate six ways to visualize change over
time using the ArcGIS API for JavaScript with the following approaches: 1.Toggle
layer visibility 2.Swipe widget 3.Side-by-side views 4.Stacked rings
5.Above-and-below theme 6.Animations
https://naplesartdistrict.com/community/profile/aym-free-guy-movie-online-free/
https://naplesartdistrict.com/community/profile/zz3-the-suicide-squad-movie-online-free/
https://naplesartdistrict.com/community/profile/aym-shang-chi-movie-online-free/
https://naplesartdistrict.com/community/profile/2kk-jungle-cruise-movie-online-free/
https://naplesartdistrict.com/community/profile/hnx-paw-patrol-the-movie-movie-online-free/
https://naplesartdistrict.com/community/profile/uno-dont-breathe-2-movie-online-free/
https://naplesartdistrict.com/community/profile/mnt-no-time-to-die-movie-online-free/
https://naplesartdistrict.com/community/profile/tjt-stillwater-movie-online-free/
https://naplesartdistrict.com/community/profile/4bw-reminiscence-movie-online-free/
https://naplesartdistrict.com/community/profile/rv0-the-show-movie-online-free/
https://naplesartdistrict.com/community/profile/5iu-candyman-movie-online-free/
https://naplesartdistrict.com/community/profile/ggo-malignant-movie-online-free/
https://naplesartdistrict.com/community/profile/i8b-coda-movie-online-free/
https://naplesartdistrict.com/community/profile/qvd-twist-movie-online-free/
https://naplesartdistrict.com/community/profile/iaa-the-protege-movie-online-free/
https://naplesartdistrict.com/community/profile/vkn-the-green-knight-movie-online-free/
https://naplesartdistrict.com/community/profile/1gm-zone-414-movie-online-free/
https://naplesartdistrict.com/community/profile/v61-final-set-movie-online-free/
https://naplesartdistrict.com/community/profile/rw7-karen-movie-online-free/
https://naplesartdistrict.com/community/profile/mih-we-need-to-do-something-movie-online-free/
https://naplesartdistrict.com/community/profile/plz-space-jam-a-new-legacy-movie-online-free/
https://naplesartdistrict.com/community/profile/erw-black-widow-movie-online-free/
https://naplesartdistrict.com/community/profile/zc0-after-we-fell-movie-online-free/
https://naplesartdistrict.com/community/profile/g0n-jj-plus-e-movie-online-free/
https://naplesartdistrict.com/community/profile/the-boss-baby-family-business-movie-online-free/
https://naplesartdistrict.com/community/profile/eum-luca-movie-online-free/
https://naplesartdistrict.com/community/profile/gcz-infinite-movie-online-free/
https://naplesartdistrict.com/community/profile/cxz-worth-movie-online-free/
https://naplesartdistrict.com/community/profile/ii3-cinderella-movie-online-free/
https://naplesartdistrict.com/community/profile/mfs-queenpins-movie-online-free/
https://naplesartdistrict.com/community/profile/31c-f9-movie-online-free/
https://naplesartdistrict.com/community/profile/zcm-kate-movie-online-free/
https://naplesartdistrict.com/community/profile/tfv-catch-the-bullet-movie-online-free/
https://naplesartdistrict.com/community/profile/8m5-dating-new-york-movie-online-free/
https://naplesartdistrict.com/community/profile/xqm-the-voyeurs-movie-online-free/
https://naplesartdistrict.com/community/profile/mpb-come-from-away-movie-online-free/
https://naplesartdistrict.com/community/profile/amn-no-responders-left-behind-movie-online-free/
https://naplesartdistrict.com/community/profile/caw-nightbooks-movie-online-free/
https://naplesartdistrict.com/community/profile/xxv-schumacher-movie-online-free/
https://naplesartdistrict.com/community/profile/sve-cry-macho-movie-online-free/
Toggle layer visibility in this app to explore the average educational
attainment in 2010 compared to 2020. Pink areas show where women outperform men
in school. Yellow areas show where men outperform women. The 2020 numbers show
an overall increase in women outperforming men in school from 2010 compared to
2020. 1 Toggle Layer Visibility The classic way to compare change is to display
the data in separate layers and toggle each layer’s visibility on and off. I
created an app that visualizes average educational attainment for Mexico in 2010
and 2020 by adding both layers to a GroupLayer with an exclusive visibility mode
property. That makes it easy for the user to toggle layers off and on using the
LayerList widget as shown in Listing 1. This approach works well when two layers
differ greatly, and those differences can easily be spotted when layer
visibility changes. This is generally true of choropleth maps (maps that use
polygons with a fill color). This approach is not as effective when the layers
use graduated symbols. Listing 1 The Swipe widget splits the view of a feature,
so that values at two times can be viewed simultaneously. 2 Swipe Widget Using
the Swipe widget is another way to compare how data changes over time. It is
very similar to toggling layer visibility, but instead the Swipe handle is
dragged to view the change, like turning the page of a book. View this app,
which visualizes household statistics for Mexico, to see how the Swipe widget
works. To create this experience, construct a Swipe widget instance as shown in
Listing 2. Then reference layers under leadingLayers and the other layer under
trailingLayers. Since the color ramps in each layer should match to make a fair
comparison, only the style information for one of the layers is displayed in the
legend. Like toggling layer visibility, this technique works well when layers
differ significantly, but with the Swipe widget, data from the same feature for
both time periods can be compared by straddling the feature with the Swipe
handle. The swipe experience can be easily added to ArcGIS StoryMaps apps.
Listing 2 The Capacity Analysis ArcGIS Online configurable app template uses
side-by-side views to compare the output of two models predicting the demand for
hospital beds as a result of the COVID-19 pandemic. Side-by-side view can show
data for more than two time interval views, but owing to browser limitations, a
single app is limited to no more than 16 views. The U.S. High Tide Flooding
Probability Scenarios through 2100 app uses six views to compare data
representing the probability of high-tide flooding for the next 100 years. 3
Side-by-Side Views Sometimes viewing data in side-by-side views can be the most
effective technique for comparing change over time because it doesn’t require
any user interaction. The user can see all the data in one glance and determine
which scenario is better or worse over time. Because this approach requires a
lot of visual scanning between two views, it does not work well when the
differences between two visualizations are subtle. The side-by-side views
approach works best with small-scale phenomena that change significantly over
time. In most cases, the toggle or swipe approaches are more effective.
Displaying two layers in side-by-side views can be effective for showing the
difference between two layers at a single glance. This example, Capacity
Analysis, is an ArcGIS Online configurable app template that uses side-by-side
views to compare the output of two models predicting the demand for hospital
beds as a result of the COVID-19 pandemic. You can also use the side-by-side
view technique to show data for more than two time intervals. However, since
most browsers support no more than 16 WebGL rendering contexts (one context is
required per view), a single app is limited to no more than 16 views. The app,
U.S. High Tide Flooding Probability Scenarios through 2100, uses six views to
compare data representing the probability of high-tide flooding for the next 100
years. Listing 3 Stacked rings can compare a variable for two time periods. This
map shows the change in the number of people born outside their resident city.
Orange rings represent 2010 numbers. Blue rings represent 2020 numbers. 4
Stacked Rings Stacked rings can be used to show a variable’s value in one year
compared to that in another year. Rings of the same size indicate the variable
experienced little or no change from the previous year. To implement this
technique, set the style for the marker symbol to none and represent each year
with different colors. The size variable configuration (i.e., stops) must be
identical between the two layers. This technique can be difficult for users to
understand, so use it with caution. It works best with small, dispersed datasets
and will not be as successful in layers that have dense, overlapping icons.
Listing 4 This map compares the number of homes with soil floors in 2010 and
2020. Rather than display two layers, it uses an ArcGIS Arcade expression to
calculate the change, and the result is used by the renderer for a single layer.
5 Above-and-Below Theme To view growth or decline over time at one glance, use
the above-and-below theme for color and/or size. This approach involves
calculating the change between the two variables (either as total change or as
percent change), and visually indicating that difference with a single renderer.
It requires writing an ArcGIS Arcade expression to calculate the difference
between two fields in the same layer. Set a midpoint of zero in the renderer
break points using a color visual variable (shown in Listing 3) or by using a
ClassBreaksRenderer (shown in Listing 4) to give the renderer distinct
above-and-below symbols. Alternatively, use the above-and-below theme in the
univariate color and size smart mapping module and let the ArcGIS API for
JavaScript pick the color scheme, symbols, and break points as shown in Listing
5. This approach only shows the delta between the two data values, not the
totals for each year. If viewing the value of the variable for each year is
important, then add an option that allows the user to toggle between both values
for the change between years and the totals for each year. See an example using
the above-and-below theme. Listing 5 This visualization combines an
above-and-below theme showing global temperture anomalies between 1880 and 2020
with a timeline animation. 6 Animations Another way to view change over time is
to create a data animation. This is effective for showing subtle, compounding
changes over long periods of time. As opposed to the other approaches, which
only compare change between two dates, this technique allows the user to view
change for many—even hundreds—of time periods. This example, Global Temperature
Anomaly to 1880–2020 doesn’t use TimeSlider for filtering features with a date
field. As shown in Listing 6, TimeSlider is used as a tool for updating the
layer’s renderer to point to a new attribute field (or Arcade expression) at
each slider move. Updating the field name in the renderer to the column
containing data for the selected year is the only change—no other renderer
changes should be made. This visualization combines an above-and-below theme
with an animation to show the number of visitors for specific time periods.
Combinations The approaches listed in this article can be combined. For example,
a layer that already visualizes change in a smaller time interval using the
above-and-below theme can be animated, showing change over time. The National
Park map illustrates the use of the above-and-below theme with animation to
visualize changes in year to year visits to US national parks. A Word of Caution
When comparing data that changes over time in two separate layers, the same
renderer and visual variable configurations must be used for both layers to
ensure that the comparisons make sense. The same stops and break points must be
assigned to the same colors and sizes. Conclusion The ArcGIS API for JavaScript
provides many ways to visualize change over time. All of them are valid. The
approach you choose depends on the final user experience you want. The next time
you need to map a variable as it changes over time, try several of the
approaches listed in this article because the best option may not be the first
one you consider.


分享至


成為作者繼續創作的動力吧！

--------------------------------------------------------------------------------

flamboyan44追蹤
flamboyan44追蹤
贊助作者

本日熱門

進擊的鋼鐵長城 - 1986年草原烈火行動淺談

冷戰時期高科技海上衝突並不多見，1986年錫德拉灣衝突算是其中一個，然而這一事件長年被不到1個月後傳奇性的黃金峽谷行動掩蓋了風頭，這篇就簡單介紹一下事件始末。

抄書性質的戰史研究
7

358# 我不希望再看到任何阿伯扮演小美人魚了

我走了幾十次的環劍湖，卻沒發現長谷川第一眼就看到的小島。這就好像第一次打麻將最容易胡牌一樣，人生應該珍惜每一次的第一次。

貳零陸參2063
發佈於
貳零陸參
15

太平盛世的頂點（3）

現代教育越來越講求普及性，篩選出適性人才，其實是站在一個整體的角度。現代產業的各種技能，有些需要非常頂尖的腦袋，如果以繼承制運行，這會變成老爸技能100，你最差可能變成10，別說維持家業，撐得過1年不倒都算奇蹟。

王立第二戰研所
發佈於
王立第二戰研所
33
flamboyan44
追蹤

--------------------------------------------------------------------------------

贊助

--------------------------------------------------------------------------------

0收藏
分享

留言
分享
0留言收藏

關於方格子
 * 平台簡介
 * 徵才資訊
 * 聯絡我們
 * 方格誌
 * RSS訂閱

作者服務
 * 加入成為作者
 * 方格子為什麼適合你
 * 作者幫助中心
 * 創作者成長學院
 * 方格子主題徵文
 * 寫作者俱樂部
 * 方格子直送計畫

讀者服務
 * 讀者常見問題
 * 讀者幫助中心
 * 忘記密碼
 * 如何訂閱
 * 如何閱讀已訂閱文章
 * 讀者俱樂部
 * 電子發票相關問題

網站規範
 * 會員服務條款
 * 著作、智財權政策
 * 隱私權政策
 * 出版專題服務條款
 * 贊助服務條款

© 2021 方格子 All rights reserved.

 * 
 * 
 * 
 * 
 *