Welcome to my personal website!

I am currently an Associate Professor in the Department of Geography and Environmental Science at Hunter College, The City University of New York. I teach Geographic Information Science, GeoInformatics, and Spatial Data Science related courses and also develop and apply spatial analysis and modeling techniques to explore our networked world.

The complexity generated by and embedded in the connections, relatedness, interactions, and interdependence among places, environments, and societies requires new thinking, new theories, and new analytic methods for a sustainable world. It also makes interdisciplinary, planned and unplanned cooperation a necessity in all natural and social sciences but particularly human-environmental and geographical sciences.

Network analysis and agent-based modeling are methodological frameworks that help visualize, analyze, and simulate the pattern and complexity in these interactions, particularly when powered by geocomputation, machine learning, and GeoAI. It is particularly promising, sometimes discouraging, but always challenging to integrate the population, economy, and ecology across spatial scales by capturing and modeling their relations and interactions using networks and the virtual laboratory of agent-based models.

North America in great universal geographic map (Kun yu wan guo quan tu)

New York City Skyline

The Vibrant Urban Landscape

Algorithms for Geovisualization and Spatial Analysis

Futuristic Cityscape Envisioned by AI

I hope my research, teaching, and service as an academic and my pursuit of eco-friendly lifestyle as a cosmopolitan citizen could make a tiny but positive contribution to the greatest collective efforts ever to build a sustainable planet for the nine billion people living on the Earth in the near future.

“By our theories you shall know us”

A well-known quote from David Harvey, explaining why the following “theories” or ideas are on the home page.

Academic conventions divide up the seamless web of the real social world into separate spherers, each with its own theorising. … It is wise to bear in mind that such a conventional cutting of reality is at best just a convenience of the mind. … Subdivisions of social knowledge thus may roughtly correspond to the ways in which human affairs are organized in particitular times and places. They may, accordingly, appear to be increasingly arbitrary when practices change.

– Robert W. Cox (1981).  Social Forces, States and World Orders.       

The value of complexity exists in the eye of its beholder. For some it is merely a passing fad, for others an interesting complement to accepted conceptual frameworks, and for others it is a pioneering break from a moribund Newtonian worldview. …. Complexity offers a host of new approaches to the study of economic, political, social and environmental systems.

– Steven M. Manson (2001).  Simplify Complexity: A Review on Complexity Theory       

Housing activity—households using dwellings—forms a central feature in the human use of the earth. A house is a structure; a home is an experience. Housing is an interactive process with meanings tied to status, social position, wealth, power, aspirations, and personal identity. Housing decisions reflect social drives for congregation and segregation within U.S. cities, thus making social and cultural categories of urban society visible, intelligible, and stable.

– John S. Adams (1984).  The Meaning of Housing in America       

Greedy people, competing, make the world go round.

– Paul Krugman (2009).  “Seven-word” explanation of Economics for Ig Nobels       

function ojs_carousel(images, options = {}) {

  const {
    animDuration = 100,
    translateY = 0,
    translateZ = 3980,
    height = 398,
    size = 200,
    perspective = 1000,
    imgCornerRadius = 5,
    imgBorderColor = "rgba(239,232,170,.51)",
    imgBorderSize = 9,
    imgBorderOpacity = 0.2,
    background = "rgba(0,0,0,0.06)"
  } = options;

  let css = `
    #carousel_main{
      display: flex;
      background : ${background};
      height: ${height}px;
      align-items: center;
      align-content: center;
      justify-content: center;
      overflow: hidden;
    }
    
    #carousel figure {
      display: flex;
      position: absolute;
      align-items: center;
      align-content: center;
      justify-content: center;
      top: 0;
      bottom: 0;
      left: 0;
      right:0;
      margin: auto;
    }
    #carousel figure img {
      border: ${imgBorderSize}px solid ${d3
    .color(imgBorderColor)
    .copy({ opacity: imgBorderOpacity })
    .formatRgb()};
      border-radius: ${imgCornerRadius}px;
      transform: rotateY(180deg);
    }
    
    /* Cannot wrap around those big images. We are looking at images facing back. 
       Therefore, they must be rorate 180 to display the front.
       Same "ratateY(180deg) applies to the image as well.
    */
    #carousel figcaption {
      transform: rotateY(180deg);
      font-size: 2.9rem;
      -webkit-transform: rotateY(180deg);
      text-align: center;
    }
    
    .carousel_container {
      position: relative;
      padding:0px;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
        width: ${size}px;
      height: ${size}px;
        -webkit-perspective: ${perspective}px;
              perspective: ${perspective}px;
    }
    #carousel {
        width: 100%;
        height: 100%;
        position: absolute;
        -webkit-transform-style: preserve-3d;
                        transform-style: preserve-3d;
    }
    #carousel.running{
        animation: spinY ${animDuration}s infinite normal linear forwards;
    }
    
    @keyframes spinY {
            0% {transform:rotateY(360deg);}
            100% {transform:rotateY(0deg);}
    }
    `;

  let body = htl.html`<div id="carousel_main" >
    <div class="carousel_container">
      <div id="carousel" class='running'>
      </div>
    </div>
  </div>`;

  let figures = body.querySelector("#carousel");

  const n = images.length;
  for (let i = 0; i < n; i++) {
    css += `#carousel figure:nth-child(${i + 1}) { -webkit-transform: rotateY(${
      (360 / n) * i
    }deg) translateY(${translateY}px) translateZ(${translateZ}px);\n}\n`;
    figures.append(html`<figure>${images[i]}</figure>`);
  }

  return htl.html`<style>${css}</style>${body}`;
}

function compose_ojs_carousel_images(imageURLsArray) {
    //return imageURLsArray.map((d) => htl.html`<img src=${d}>`);
    return imageURLsArray.map((d) => htl.html`<a href=${d.link}>
    <img src=${d.image}></a>
    <figcaption>${d.caption}</figcaption>
    `);

}

imagesLinks = new Array(3).fill(["images/ming_na_rect.png", 
               "images/nyc_skyline_water.png",
               "images/futuristic_cityscape3_by_zakazeskiz_dg4beed-fullview.png"])
               .flat()
               //.splice(0,2);// remove 2 from index 0, 
               
//console.log(new Array(3).fill(carousel_links).flat());               
// This one uses options from the Input
/*/
ojs_carousel(compose_ojs_carousel_images(new Array(3).fill(carousel_links).flat()), options);
/*/
ojs_carousel(compose_ojs_carousel_images(
                new Array(3).fill(getRandomSubset(carousel_links,4)).flat()
              )
            );

getRandomSubset = function(arr, size) {
  const shuffled = [...arr].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, size);
}