본문 바로가기

Workshop Index

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



  • 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

 

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

 

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