6 Digital Mapping using ArcGIS JSAPI

DigitalFUTURES WORLD : ARCHITECTS UNITE Workshops

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

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

Research Overview:
* Third Place Mobility Energy Consumption

Lecture:
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

By NJSTUDIO

By NJSTUDIO

• Lecture

Coordinate system
Geographic coordinate system

Projection
Projection demo: link

Generalization
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

• Demo
  ArcGIS JSAPI : link
  Mapbox: link
  GoogleMap: 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
nj.namju@gmail.com

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)

Workshop Schedule:
Overview
Day 1: Processing Data and Visualization in Digital Media
Day 2: Data Processing using Python
Day 3: Typescript and HTML Canvas
Day 4: Computational Geometry and Geometry Class
Day 5: Pipeline for Data and Geometry Visualization (or CAD system)
Day 6: Digital Mapping using ArcGIS JSAPI

reference:
ArcGIS Blog