Skip to content

Latest commit

 

History

History
119 lines (92 loc) · 4.15 KB

d03Polygons.md

File metadata and controls

119 lines (92 loc) · 4.15 KB
id elm
litvis
dependencies
gicentre/elm-vegalite
latest

@import "css/litvis.less"

import VegaLite exposing (..)

30 Day Map Challenge, Day 3: Polygons

This document best viewed in litvis

Initial Thoughts

'Polygons' suggest geometry and geometry suggests Euclid. I am particularly taken to the design of Oliver Byrne's visual treatment of Euclid's Elements.

Possible ideas that might be inspired by Byrne's design:

Data Preparation

Buildings

  1. Open Street Map with bounds -0.1378,51.5106,-0.1122,51.5261 (central London)
  2. Exported from OSM via Overpass API
  3. Polygon features converted to geoJSON via ogr2ogr -f GeoJSON bloomsburyPolys.geojson map.osm multipolygons
  4. Imported into Mapshaper and clipped in mapshaper console with clip bbox=-0.1378,51.5106,-0.1122,51.5261
  5. Simplify geometry with simplify 50%
  6. Extract buildings: filter 'building != undefined'
  7. Store only OSM object ID: filter-fields 'osm_way_id,osm_id'
  8. Store as topojson file: o format=topojson bloomsburyBuildings.json

Footpaths

  1. Open Street Map with bounds -0.1378,51.5106,-0.1122,51.5261 (central London)
  2. Exported from OSM via Overpass API
  3. Line features converted to geoJSON via ogr2ogr -f GeoJSON bloomsburyLines.geojson map.osm lines
  4. Imported into Mapshaper and clipped in mapshaper console with clip bbox=-0.1378,51.5106,-0.1122,51.5261
  5. Extract footpaths: filter 'highway == "footway"'
  6. Extreme simplify of path geometry with simplify 2%
  7. Store as topojson file: o format=topojson drop-table bloomsburyFootways.json

Location of generated files:

path : String -> String
path file =
    "https://gicentre.github.io/data/30dayMapChallenge/" ++ file

Map Design

Buildings use the restricted four-colour palette of Byrne. Colours randomly assigned to the modulus 4 of the OSM id. Dashed lines to represent footways, chosen as these help to emphasise squares (Bloomsbury Square, Bedford Square, Lincoln's Inn Fields, Russell Square, Tavistock Square etc.)

squaresMap : Spec
squaresMap =
    let
        cfg =
            configure
                << configuration (coView [ vicoStroke Nothing ])

        buildingData =
            dataFromUrl (path "bloomsburyBuildings.json")
                [ topojsonFeature "centralLondonPolys" ]

        footwayData =
            dataFromUrl (path "bloomsburyFootways.json")
                [ topojsonFeature "centralLondonLines" ]

        trans =
            transform
                << calculateAs "(isValid(datum.properties.osm_id)? datum.properties.osm_id:0 + isValid(datum.properties.osm_way_id)? datum.properties.osm_way_id:0)%4" "id"

        colours =
            categoricalDomainMap
                [ ( "0", "rgb(233,72,55)" )
                , ( "1", "rgb(57,58,104)" )
                , ( "2", "rgb(243,178,65)" )
                , ( "3", "rgb(25,15,17)" )
                ]

        buildingEnc =
            encoding
                << color [ mName "id", mNominal, mScale colours, mLegend [] ]

        buildingSpec =
            asSpec
                [ buildingData
                , trans []
                , buildingEnc []
                , geoshape [ maOpacity 0.9 ]
                ]

        footwaySpec =
            asSpec
                [ footwayData
                , geoshape
                    [ maOpacity 0.9
                    , maFilled False
                    , maStroke "black"
                    , maStrokeWidth 2
                    , maStrokeDash [ 4, 4 ]
                    ]
                ]
    in
    toVegaLite [ cfg [], width 1300, height 1300, layer [ footwaySpec, buildingSpec ] ]

day 3