6 Digital Mapping using ArcGIS JSAPI


Day 6: Digital Mapping using ArcGIS JSAPI
Introduction to JSAPI and the Development of a Mapping App

Projection, Remap, Interpolation, Generalization, ArcGIS JSAPI, Gestalk Principles, Principles of Graphical Integrity, Bertin’s Visualization design space

Research Overview:
* Third Place Mobility Energy Consumption

1) Projection, remap, interpolation
2) Generalization
3) Understand modify Object-oriented programming(OOP) pattern

Workshop: Codepen, Github
1) develop a mapping app with JSAPI based on the boilerplate code

Additional note:
1) data visualization using d3
2) data visualization using Amcharts

  • Overview
  • Lecture

Coordinate system
Geographic coordinate system

Projection demo: link

Scaling, Clustering, Aggregation, Clustering and so on

Gestalk Principles: link
Grouping: Proximity — Similarity — Enclosure

Bertin’s Visualization design space: link
Mark / point / lines / area
Channels / position / value / texture / color / orientation / shape

Clustering Point
Grid-based clustering

ArcGIS StoryMaps

Clustering Points: Collision-Based Dynamic Graph method

ArcGIS StoryMaps

1: Build connectivities based on collision
2: Construct cluster graphs based on the connectivities
3: Recursive checking for the collisions while repositioning clusters by adding adjacent points
4: Tessellate big clusters based on a resolution
5: Post-process for merging based on a tolerance

Principles of Graphical Integrity: link
Lie Factor / Data-Ink Ratio / Chartjunk / Graphical Integrity

How coronavirus charts can mislead us — link

45-ways-to-communicate-two-quantities: link

Nightingale-mortality: link
Domain knowledge / Analysis / Repeated measurements /
Speaking with data and persuading with visual insight

  • Workshop

Globe and projection: link
Remap: Bar Chart / Scatter plot
Interpolation (easing): link
Collision detection(Axis-Aligned Bounding Box(AABB) 2D / 3D: link

Introduction to Mapping Sandbox for Mapping & Data Vis on Web
Data Visualization — ArcGIS JSAPI, and Canvas: link(English version)
Data Visualization — ArcGIS JSAPI, and Canvas: link(Korean version)
* Tools Visual Studio Code: link, Nodejs: link, Github Desktop: link

Github, Mapping, and Visualization: link
ArcGIS Javascript: link

  • Additional Notes

ArcGIS JSAPI: link

Amcharts: link
1. basic: link
2. projection: link
3. base map: link

D3(Data-Driven Documents): link

  • Discussion, Reflection, and Final project
  1. A visualization project with one or two data sets in any location on the globe
  2. A form of the images or videos telling your story and visualization
  3. You can recode your voices or insert texts with animation or sets of images of your visualization project for the exhibition at the conference.
  4. (1)Images or (2)videos with the (3)JSON file you use for visualization, and your (4)information(name or website…)
English Version
Korean Version

NJ Namju Lee

Architecture design, Computation, Visualization specialist
MDes;Harvard, MArch;UCB, B.S;SNUST, Research Fellow; MIT

Director and founder of NJSTUDIO , NJS Lab, NJS Lab Sandbox

NJ Blog / NaverBlog(KR) / NaverCafe(KR) / GitHub / Linkedin / NJSTUDIO FB

Youtube(eng) / Youtube(kr) / Medium / DaumBrunch

Data and Design / Computational Design
Lecture / Workshop / QnA / Digital FUTURES World / DaumBrunch Link

Digital FUTURES World Youtube Playlist Long version (English)
Digital FUTURES World Youtube Playlist Short version (English)

Digital FUTURES World Youtube Playlist Long version (Korean)
Digital FUTURES World Youtube Playlist Short version (Korean)

ArcGIS Blog

Computational Designer at NJSTUDIO, and Software Engineer at ESRI