timeline.yaml

# import:
#   - https://www.nextzen.org/carto/refill-style/11/refill-style.zip
#   - https://www.nextzen.org/carto/refill-style/themes/color-zinc.zip
textures:
    data_image:
        url: ./data/20190304/total.png
    residents_data_image:
        url: ./data/residents.png
    female_data_image:
        url: ./data/20190304/female.png

    male_data_image:
        url: ./data/20190304/male.png
        filtering: nearest
    age_0_image:
        url: ./data/20190304/a10.png
        filtering: nearest
    age_1_image:
        url: ./data/20190304/a20.png
        filtering: nearest
    age_2_image:
        url: ./data//20190304/a30.png
        filtering: nearest
    age_3_image:
        url: ./data//20190304/a40.png
        filtering: nearest
    age_4_image:
        url: ./data//20190304/a50.png
        filtering: nearest
    age_5_image:
        url: ./data//20190304/a60.png
        filtering: nearest
global:
    highlighted_dong: false
sources:
    nextzen_vector_tile:
      type: MVT
      url: https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt?api_key=hx2J5tx6QDS1Pnhu8r97JQ
    dong_outline:
        type: GeoJSON
        url: ./geometries/new_dong.json
    hex:
        type: GeoJSON
        url: ./geometries/hex.json
    # half_hex_0:
    #     type: GeoJSON
    #     url: ./geometries/half_hex_2.json
    # half_hex_1:
    #     type: GeoJSON
    #     url: ./geometries/half_hex_1.json

    # male_source:
    #     type: GeoJSON
    #     url: ./male_pop.geojson
    # age0:
    #     type: GeoJSON
    #     url: ./age/age_pop_0.geojson
    # age1:
    #     type: GeoJSON
    #     url: ./age/age_pop_1.geojson
    # age2:
    #     type: GeoJSON
    #     url: ./age/age_pop_2.geojson
    # age3:
    #     type: GeoJSON
    #     url: ./age/age_pop_3.geojson
    # age4:
    #     type: GeoJSON
    #     url: ./age/age_pop_4.geojson
    # age5:
    #     type: GeoJSON
    #     url: ./age/age_pop_5.geojson
styles:
    alpha_polygons:
        base: polygons
        blend: multiply
    dongStyle:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: data_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                      float random (vec2 st) {
                          return fract(sin(dot(st.xy,
                                               vec2(12.9898,78.233)))*
                              43758.5453123);
                      }
                color: |
                  float yIndex = getIndex(color.xy);
                  vec4 colorData = getColor(vec2(mod(u_offset,u_param.x), mod(yIndex, u_param.y) ));
                  float cData = (colorData.r+colorData.g+colorData.b)/3.0;
                  color.rgb = vec3(cData, (0.5 - cData/2.), 1.0);
                position: |
                    vec3 pos = worldPosition().xyz;

                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);

                    position.z = ceil(position.z/500.);
                    position.z *= abs((data_interpol.r + data_interpol.g  + data_interpol.b)*3000.);
    residentsStyle:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: residents_data_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                position: |
                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);

                    // just making it 1
                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;
    femaleStyle:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: female_data_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                color: |
                  float yIndex = getIndex(color.xy);
                  vec4 colorData = getColor(vec2(mod(u_offset,u_param.x), mod(yIndex, u_param.y) ));
                  float cData = (colorData.r+colorData.g+colorData.b)/3.0;


                  color.rgb = vec3(294. /255., (134. /255.) + cData/4. ,65. /255.);
                position: |
                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);

                    // just making it 1
                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;
    maleStyle:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: male_data_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                color: |
                  float yIndex = getIndex(color.xy);
                  vec4 colorData = getColor(vec2(mod(u_offset,u_param.x), mod(yIndex, u_param.y) ));
                  float cData = (colorData.r+colorData.g+colorData.b)/3.0;
                  color.rgb = vec3((94./255.) +cData/4. , 60./255.+cData/4.,153./255.);
                position: |
                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);

                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;
    age0Style:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: age_0_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                position: |
                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);


                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;
    age1Style:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: age_1_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                position: |
                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);


                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;
    age2Style:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: age_2_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                position: |
                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);


                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;
    age3Style:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: age_3_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                position: |
                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);


                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;
    age4Style:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: age_4_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }
                position: |
                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);


                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;
    age5Style:
        base: polygons
        animated: true
        material:
            ambient: 1.0
            diffuse: 1.0
        shaders:
            uniforms:
                u_data: age_5_image
                u_param: [168, 424]
                u_offset: 0.
            blocks:
                global: |
                      float getIndex (vec2 encodedIndex) {
                        return (encodedIndex.x*65025.+encodedIndex.y*255.)+.5;
                      }
                      vec4 getColor (vec2 st) {
                          float texWidth = u_param.x;
                          float texHeigth = u_param.y;
                          st.y = 1.-(st.y/texHeigth);
                          return texture2D(u_data,vec2(st.x/texWidth,st.y));
                      }

                position: |
                    vec3 pos = worldPosition().xyz;

                    float zz = (position.z - .5);
                    float t = u_offset;
                    float i_now = floor(t);
                    float f_now = fract(t);
                    float next = i_now+1.;

                    vec4 data_now = getColor(vec2(mod(i_now, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_next = getColor(vec2(mod(next, u_param.x) , mod(zz, u_param.y)));
                    vec4 data_interpol = mix(data_now,data_next,f_now);

                    position.z = ceil(position.z /500.);
                    position.z *= (data_interpol.r + data_interpol.g  + data_interpol.b)*3000.;

cameras:
    camera1:
        type: isometric
        # axis: [0.1, 0.8]

layers:
    earth:
      data: { source: nextzen_vector_tile }
      draw:
          polygons:
              color: "#ddd"
              order: 0
    water:
      data: { source: nextzen_vector_tile }
      draw:
          polygons:
              color: "#aaa"
              order: 1
    roads:
      data: { source: nextzen_vector_tile }
      draw:
          lines:
              order: 4
              color: '#ffffff'
              width: [[7,0.0px], [10, .5px], [15, .75px], [17, 5m]]
    dongoutline:
        data: { source: dong_outline }
        draw:
            lines:
                order: 29
                width: 3px
                color: '#999'
            alpha_polygons:
                interactive: true
                order: 29
                width: 3px
                color: white
        dongoutline_hightlited:
            filter: { name: global.highlighted_dong }
            draw:
                lines:
                    color: '#999'
    dong:
        data: { source: hex }
        draw:
            dongStyle:
                order: 30
                color: |
                  function () {
                    return [ ( Math.floor(feature.id/255))/255, (feature.id%255)/255, 0 ]
                  }
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                   }
    time_pop:
        data: { source: half_hex_0 }
        enabled: false
        draw:
            dongStyle:
                order: 29
                color: |
                    function () {
                      return [ ( Math.floor(feature.id/255))/255, (feature.id%255)/255, 0 ]
                    }
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }
    resident:
        data: { source: half_hex_1 }
        enabled: false
        draw:
            residentsStyle:
                order: 30
                color: 'hsl(30, 0.8, 0.5)'
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }
    female:
        data: { source: half_hex_1 }
        enabled: false
        draw:
            femaleStyle:
                order: 32
                color: |
                    function () {
                      return [ ( Math.floor(feature.id/255))/255, (feature.id%255)/255, 0 ]
                    }
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }
    male:
        data: { source: half_hex_0 }
        enabled: false
        draw:
            maleStyle:
                order: 29
                color: |
                    function () {
                      return [ ( Math.floor(feature.id/255))/255, (feature.id%255)/255, 0 ]
                    }
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }
    age0:
        data: { source: tri4 }
        draw:
            age0Style:
                order: 60
                color: "#440154"
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }
    age1:
        data: { source: tri5 }
        draw:
            age1Style:
                order: 59
                color: "#414287"
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }

    age2:
        data: { source: tri0 }
        draw:
            age2Style:
                order: 58
                color: "#2a768e"
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }
    age3:
        data: { source: tri1 }
        draw:
            age3Style:
                order: 51
                color: "#21a585"
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }
    age4:
        data: { source: tri2 }
        draw:
            age4Style:
                order: 52
                color: "#70cf57"
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }
    age5:
        data: { source: tri3 }
        draw:
            age5Style:
                order: 53
                color: "#b0dd2f"
                extrude: |
                  function () {
                    return (feature.id + 1) ;
                  }